From 085df24ba7f8d2c8e214bfaf1a5833bc20f1d94c Mon Sep 17 00:00:00 2001
From: Jaime Idolpx <jaime@idolpx.com>
Date: Fri, 12 Jun 2026 20:57:28 -0400
Subject: [PATCH] feat(MediaManager): add breadcrumb scrolling functionality
 for improved navigation

---
 src/app/components/MediaManager.tsx | 13 +++++++++----
 src/app/components/StatusPage.tsx   | 12 +++++++-----
 2 files changed, 16 insertions(+), 9 deletions(-)

diff --git a/src/app/components/MediaManager.tsx b/src/app/components/MediaManager.tsx
index cee831e..6357229 100644
--- a/src/app/components/MediaManager.tsx
+++ b/src/app/components/MediaManager.tsx
@@ -455,9 +455,10 @@ export default function MediaManager({ initialPath, rootPath, title, config, set
   const [renameName, setRenameName]     = useState('');
   const [mountEntry, setMountEntry]     = useState<EntryInfo | null>(null);
 
-  const fileInputRef   = useRef<HTMLInputElement>(null);
-  const renameInputRef = useRef<HTMLInputElement>(null);
-  const dragCounter    = useRef(0);
+  const fileInputRef    = useRef<HTMLInputElement>(null);
+  const renameInputRef  = useRef<HTMLInputElement>(null);
+  const breadcrumbRef   = useRef<HTMLDivElement>(null);
+  const dragCounter     = useRef(0);
   const [confirm, setConfirm] = useState<ConfirmOptions | null>(null);
 
   // ── Directory loading ────────────────────────────────────────────────────
@@ -477,6 +478,10 @@ export default function MediaManager({ initialPath, rootPath, title, config, set
   }, []);
 
   useEffect(() => { void load(path); }, [path, load]);
+  useEffect(() => {
+    const el = breadcrumbRef.current;
+    if (el) el.scrollLeft = el.scrollWidth;
+  }, [path]);
   useEffect(() => { localStorage.setItem('fileManager.filter',  filter);        }, [filter]);
   useEffect(() => { localStorage.setItem('fileManager.sortKey', sortKey);       }, [sortKey]);
   useEffect(() => { localStorage.setItem('fileManager.sortAsc', String(sortAsc)); }, [sortAsc]);
@@ -1003,7 +1008,7 @@ export default function MediaManager({ initialPath, rootPath, title, config, set
 
         {/* Breadcrumb */}
         <div className="flex items-center gap-1 text-sm text-neutral-600">
-          <div className="flex items-center gap-1 overflow-x-auto flex-1 min-w-0">
+          <div ref={breadcrumbRef} className="flex items-center gap-1 overflow-x-auto flex-1 min-w-0 [&::-webkit-scrollbar]:hidden" style={{ scrollbarWidth: 'none' }}>
           <button onClick={() => navigateTo(rootPath ?? '/')} className="p-1 rounded hover:bg-neutral-100 flex-shrink-0" title="Root">
             <Home className="w-4 h-4" />
           </button>
diff --git a/src/app/components/StatusPage.tsx b/src/app/components/StatusPage.tsx
index 01252e6..ce58773 100644
--- a/src/app/components/StatusPage.tsx
+++ b/src/app/components/StatusPage.tsx
@@ -172,16 +172,18 @@ export default function StatusPage({ config, setConfig, onOpenFileManager }: Sta
               <button
                 type="button"
                 onClick={() => setShowDeviceOverlay(true)}
-                className="flex items-center gap-3 text-left rounded-lg p-1 -m-1 hover:bg-neutral-50 transition cursor-pointer"
+                className="flex items-center gap-3 text-left rounded-lg p-1 -m-1 hover:bg-neutral-50 transition cursor-pointer min-w-0"
                 aria-label={`Open details for Device #${activeDevice.number}`}
               >
-                <div className="w-10 h-10 bg-blue-100 rounded-full flex items-center justify-center">
+                <div className="w-10 h-10 bg-blue-100 rounded-full flex items-center justify-center flex-shrink-0">
                   <HardDrive className="w-5 h-5 text-blue-600" />
                 </div>
-                <div>
+                <div className="min-w-0">
                   <div className="font-medium">Device #{activeDevice.number}</div>
-                  <div className="text-sm text-neutral-500">
-                    {[activeDevice.base_url, activeDevice.url].filter(Boolean).join('') || '—'}
+                  <div className="text-sm text-neutral-500 overflow-hidden whitespace-nowrap" style={{ direction: 'rtl', textOverflow: 'ellipsis' }}>
+                    <span style={{ direction: 'ltr', unicodeBidi: 'embed' }}>
+                      {[activeDevice.base_url, activeDevice.url].filter(Boolean).join('') || '—'}
+                    </span>
                   </div>
                 </div>
               </button>