idolpx/meatloaf-config
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(MediaManager): enhance mount dialog layout and improve text overflow handling

Browse Source
This commit is contained in:
Jaime Idolpx 2026-06-12 04:59:24 -04:00
parent 92a22fe253
commit de303e9327
1 changed files with 17 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
src/app/components/MediaManager.tsx
View File

@ -1266,11 +1266,18 @@ export default function MediaManager({ initialPath, rootPath, title, config, set
{/* ── Mount dialog ── */} {/* ── Mount dialog ── */}
<Dialog open={mountEntry !== null} onOpenChange={open => !open && setMountEntry(null)}> <Dialog open={mountEntry !== null} onOpenChange={open => !open && setMountEntry(null)}>
<DialogContent className="max-w-sm"> <DialogContent className="max-w-sm flex flex-col max-h-[90dvh]">
<DialogHeader> <DialogHeader className="flex-shrink-0">
<DialogTitle>Mount on Virtual Drive</DialogTitle> <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> </DialogHeader>
<div className="overflow-y-auto flex-1 min-h-0">
{(() => { {(() => {
const allDevices = Object.entries(config?.devices?.iec ?? {}); const allDevices = Object.entries(config?.devices?.iec ?? {});
const drives = allDevices const drives = allDevices
@ -1288,13 +1295,17 @@ export default function MediaManager({ initialPath, rootPath, title, config, set
<button <button
key={`${dev.type}-${dev.key}`} key={`${dev.type}-${dev.key}`}
onClick={() => void mountOnDevice(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'}`} /> <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="min-w-0 flex-1">
<div className="font-medium text-sm">Device #{dev.key}</div> <div className="font-medium text-sm">Device #{dev.key}</div>
{(dev.base_url || dev.url) && ( {(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('')} {[dev.base_url, dev.url].filter(Boolean).join('')}
</div> </div>
)} )}
@ -1305,6 +1316,7 @@ export default function MediaManager({ initialPath, rootPath, title, config, set
</div> </div>
); );
})()} })()}
</div>
</DialogContent> </DialogContent>
</Dialog> </Dialog>
</div> </div>