diff --git a/src-tauri/src/config/library_preferences.rs b/src-tauri/src/config/library_preferences.rs index 931a3303a..ae92543e5 100644 --- a/src-tauri/src/config/library_preferences.rs +++ b/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)] diff --git a/src/lib/components/LocalLibraryFolderTree.svelte b/src/lib/components/LocalLibraryFolderTree.svelte index 8270e3a4a..cbf761495 100644 --- a/src/lib/components/LocalLibraryFolderTree.svelte +++ b/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 { diff --git a/src/lib/components/views/LocalLibraryView.svelte b/src/lib/components/views/LocalLibraryView.svelte index 0f48e637d..840da30d5 100644 --- a/src/lib/components/views/LocalLibraryView.svelte +++ b/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(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;