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 {