From eda88b2e4a69aab0fc9bb5dc4c2cad31d5126bfc Mon Sep 17 00:00:00 2001 From: Nariman Jelveh Date: Thu, 22 Oct 2026 14:01:35 -0700 Subject: [PATCH] fix(dashboard): keep a deep folder path on one row with the current folder in view A long path wrapped the crumbs over several lines on top of the column headers and pushed the toolbar actions off-screen; where the crumbs already scrolled (phones), the row opened at the root, hiding the current folder. The crumbs now scroll within their row and are scrolled to their end on render and when the tab is shown. --- src/gui/src/UI/Dashboard/TabFiles.js | 14 ++++++++++++++ src/gui/src/css/dashboard.css | 11 +++++++++++ 2 files changed, 25 insertions(+) diff --git a/src/gui/src/UI/Dashboard/TabFiles.js b/src/gui/src/UI/Dashboard/TabFiles.js index 3e401bb57..22f26803b 100644 --- a/src/gui/src/UI/Dashboard/TabFiles.js +++ b/src/gui/src/UI/Dashboard/TabFiles.js @@ -669,6 +669,19 @@ const TabFiles = { if ( this.currentPath && window.is_dashboard_mode ) { this.updateDashboardUrl(this.currentPath); } + // Crumbs rendered while the tab was hidden had no width to scroll. + this.revealCurrentCrumb(); + }, + + /** + * Scrolls a breadcrumb trail too long for its row to its end, so the + * current folder stays in view rather than the root. + * + * @returns {void} + */ + revealCurrentCrumb () { + const crumbs = this.$el_window?.find('.files-tab .path-breadcrumbs')[0]; + if ( crumbs ) crumbs.scrollLeft = crumbs.scrollWidth; }, /** @@ -2376,6 +2389,7 @@ const TabFiles = { this.updateActionButtons(isTrashFolder); $('.path-breadcrumbs').html(this.renderPath(this.currentPath, window.user.username)); + this.revealCurrentCrumb(); $('.path-breadcrumbs .dirname').each(function () { const dirnameElement = this; const clickedPath = dirnameElement.getAttribute("data-path"); diff --git a/src/gui/src/css/dashboard.css b/src/gui/src/css/dashboard.css index 1f75ded10..e580d69f3 100644 --- a/src/gui/src/css/dashboard.css +++ b/src/gui/src/css/dashboard.css @@ -3882,6 +3882,7 @@ body.myapps-reordering .myapps-tile { } .dashboard .path-nav-buttons { + flex-shrink: 0; padding: 4px 10px 4px 0px; display: flex; justify-content: center; @@ -3925,6 +3926,16 @@ body.myapps-reordering .myapps-tile { display: flex; align-items: center; margin-left: 10px; + /* A deep path scrolls inside its row (kept at its end by + revealCurrentCrumb) instead of wrapping or pushing the actions out. */ + min-width: 0; + overflow-x: auto; + white-space: nowrap; + scrollbar-width: none; +} + +.dashboard-section-files .header .path-breadcrumbs::-webkit-scrollbar { + display: none; } .dashboard-section-files .header .path-breadcrumbs:empty + .path-actions {