From de303e932745daa30baaeedb7898d193f4e51a5b Mon Sep 17 00:00:00 2001
From: Jaime Idolpx <jaime@idolpx.com>
Date: Fri, 12 Jun 2026 04:59:24 -0400
Subject: [PATCH] feat(MediaManager): enhance mount dialog layout and improve
 text overflow handling

---
 src/app/components/MediaManager.tsx | 22 +++++++++++++++++-----
 1 file changed, 17 insertions(+), 5 deletions(-)

diff --git a/src/app/components/MediaManager.tsx b/src/app/components/MediaManager.tsx
index 4ce601b..9f87cd2 100644
--- a/src/app/components/MediaManager.tsx
+++ b/src/app/components/MediaManager.tsx
@@ -1266,11 +1266,18 @@ export default function MediaManager({ initialPath, rootPath, title, config, set
 
       {/* ── Mount dialog ── */}
       <Dialog open={mountEntry !== null} onOpenChange={open => !open && setMountEntry(null)}>
-        <DialogContent className="max-w-sm">
-          <DialogHeader>
+        <DialogContent className="max-w-sm flex flex-col max-h-[90dvh]">
+          <DialogHeader className="flex-shrink-0">
             <DialogTitle>Mount on Virtual Drive</DialogTitle>
-            <DialogDescription className="truncate">{mountEntry?.name}</DialogDescription>
+            <DialogDescription
+              className="block overflow-hidden whitespace-nowrap"
+              style={{ direction: 'rtl', textOverflow: 'ellipsis' }}
+              title={mountEntry?.name}
+            >
+              {mountEntry?.name}
+            </DialogDescription>
           </DialogHeader>
+          <div className="overflow-y-auto flex-1 min-h-0">
           {(() => {
             const allDevices = Object.entries(config?.devices?.iec ?? {});
             const drives = allDevices
@@ -1288,13 +1295,17 @@ export default function MediaManager({ initialPath, rootPath, title, config, set
                   <button
                     key={`${dev.type}-${dev.key}`}
                     onClick={() => void mountOnDevice(dev.type, dev.key)}
-                    className="w-full text-left px-4 py-3 rounded border border-neutral-200 hover:bg-blue-50 hover:border-blue-300 inline-flex items-center gap-3"
+                    className="w-full text-left px-4 py-3 rounded border border-neutral-200 hover:bg-blue-50 hover:border-blue-300 flex items-center gap-3"
                   >
                     <HardDrive className={`w-5 h-5 flex-shrink-0 ${dev.enabled ? 'text-blue-500' : 'text-neutral-400'}`} />
                     <div className="min-w-0 flex-1">
                       <div className="font-medium text-sm">Device #{dev.key}</div>
                       {(dev.base_url || dev.url) && (
-                        <div className="text-xs text-neutral-500 truncate">
+                        <div
+                          className="text-xs text-neutral-500 overflow-hidden whitespace-nowrap"
+                          style={{ direction: 'rtl', textOverflow: 'ellipsis' }}
+                          title={[dev.base_url, dev.url].filter(Boolean).join('')}
+                        >
                           {[dev.base_url, dev.url].filter(Boolean).join('')}
                         </div>
                       )}
@@ -1305,6 +1316,7 @@ export default function MediaManager({ initialPath, rootPath, title, config, set
               </div>
             );
           })()}
+          </div>
         </DialogContent>
       </Dialog>
     </div>