feat(local-library): tighter tree sidebar default + horizontal scroll

Default width drops from 432px to 302px (~30% smaller). Long folder
names no longer ellipsize - the sidebar scrolls horizontally inside
itself when content exceeds the column width. Drag-resize and the
persisted width preference are unchanged: the user can still widen
to 40% of the content area, and that choice survives restart.

The resize handle stays anchored to the column's right edge because
it sits as a sibling of the scroll wrapper (.folder-tree-scroll),
not inside it - horizontal scroll inside the wrapper does not drag
the handle along.

cc

src-tauri/src/config/library_preferences.rs

@@ -39,7 +39,7 @@ pub struct LibraryPreferences {
     #[serde(default)]
     pub folders_view_mode: FoldersViewMode,
     /// Width (in CSS pixels) of the tree-mode left sidebar in the Folders
-    /// tab. `None` means "use the frontend default" (currently 432px).
+    /// tab. `None` means "use the frontend default" (currently 302px).
     /// Persisted on drag-end so the choice survives restarts. Bounds are
     /// enforced on the frontend (min 200px, max 40% of content area).
     #[serde(default)]

src/lib/components/LocalLibraryFolderTree.svelte

@@ -333,6 +333,12 @@
     user-select: none;
     color: var(--text-primary);
     transition: background 100ms ease;
+    /* Extend to natural content width when names are long; fill the
+       rail when names are short. Combined with overflow-x: auto on
+       .folder-tree-scroll, this gives Plex-style horizontal scroll
+       inside the rail instead of clipping or ellipsizing names. */
+    width: max-content;
+    min-width: 100%;
   }
   .folder-tree-row:hover {
     background: var(--bg-hover);
@@ -396,12 +402,12 @@
   }
 
   .row-name {
-    flex: 1;
-    min-width: 0;
+    /* No flex:1 / min-width:0 / overflow:hidden / text-overflow:ellipsis
+       here — the row container (.folder-tree-row) extends to natural
+       content width and the rail scrolls horizontally instead of
+       truncating long names. Single-line is preserved via nowrap. */
     font-size: 0.78rem;
     line-height: 1.3;
-    overflow: hidden;
-    text-overflow: ellipsis;
     white-space: nowrap;
   }
   .row-name-highlight {

src/lib/components/views/LocalLibraryView.svelte

@@ -323,7 +323,7 @@
       // 'flat' when the field is absent (legacy installs).
       foldersViewMode = prefs.folders_view_mode === 'tree' ? 'tree' : 'flat';
       // Hydrate the tree-mode sidebar width. NULL/missing → frontend
-      // default (432px). Anything non-positive is treated as missing so a
+      // default (302px). Anything non-positive is treated as missing so a
       // corrupt/zeroed value can't collapse the rail at startup.
       const persistedTreeWidth = prefs.folders_tree_sidebar_width;
       if (typeof persistedTreeWidth === 'number' && persistedTreeWidth > 0) {
@@ -855,10 +855,12 @@
 
   // ───────── Folders tab tree-mode sidebar resize ─────────
   // The left rail is user-resizable via a thin handle on its right edge.
-  // Default = 432px (1.8x the original 240px the spec called out as too
-  // narrow). Bounds: 200px floor; 40% of the live content area as ceiling.
-  // Persisted on drag-end via v2_set_library_folders_tree_sidebar_width.
-  const FOLDER_TREE_SIDEBAR_DEFAULT_WIDTH = 432;
+  // Default = 302px (~30% smaller than the previous 432px; long folder
+  // names that overflow scroll horizontally inside the rail rather than
+  // forcing the rail wider). Bounds: 200px floor; 40% of the live content
+  // area as ceiling. Persisted on drag-end via
+  // v2_set_library_folders_tree_sidebar_width.
+  const FOLDER_TREE_SIDEBAR_DEFAULT_WIDTH = 302;
   const FOLDER_TREE_SIDEBAR_MIN_WIDTH = 200;
   let folderTreeSidebarWidth = $state<number>(FOLDER_TREE_SIDEBAR_DEFAULT_WIDTH);
   let isResizingTreeSidebar = $state(false);
@@ -8061,9 +8063,9 @@
 
   .folder-tree-column {
     /* Width is set inline via style:width — see folderTreeSidebarWidth in
-       LocalLibraryView.svelte. The 432px fallback only kicks in if the
+       LocalLibraryView.svelte. The 302px fallback only kicks in if the
        inline style fails to attach (defensive). */
-    width: 432px;
+    width: 302px;
     flex-shrink: 0;
     display: flex;
     flex-direction: column;
@@ -8098,6 +8100,11 @@
   .folder-tree-scroll {
     flex: 1;
     overflow-y: auto;
+    /* Long folder names extend past the column width and scroll
+       horizontally inside the rail (Plex/foobar2000 pattern). The
+       resize handle stays anchored to .folder-tree-column (a sibling
+       of this scroll wrapper), so it doesn't drift with content. */
+    overflow-x: auto;
     padding: 4px 12px 4px 0;
     -webkit-overflow-scrolling: touch;
     scroll-behavior: smooth;