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

@@ -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");

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 {