Elijah/drive
Archived
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Mobile UI folder view width cap and name wrapping
All checks were successful
Automated Container Build / build-and-push (push) Successful in 41s
Details

Browse source
This commit is contained in:
Elijah 2026-05-24 09:11:42 -07:00
parent 14289b741f
commit dd798877f5
1 changed files with 3 additions and 11 deletions
Download patch file Download diff file Expand all files Collapse all files

14
frontend/src/components/FileExplorer.tsx
View file

@ -1464,17 +1464,9 @@ export default function FileExplorer({ onLogout }: FileExplorerProps) {
<Menu className="w-5 h-5" /> <Menu className="w-5 h-5" />
</button> </button>
)} )}
<button
onClick={() => { navigateTo('.'); setActiveSection('files'); }}
className="text-sm font-medium hover:opacity-80 transition-opacity flex items-center"
style={{ color: 'var(--color-text-secondary)' }}
title="Home"
>
{isMobile ? <Home className="w-4.5 h-4.5" /> : "Home"}
</button>
{pathSegments.map((seg, i) => ( {pathSegments.map((seg, i) => (
<div key={i} className="flex items-center gap-1"> <div key={i} className="flex items-center gap-1">
<ChevronRight className="w-3.5 h-3.5" style={{ color: 'var(--color-text-tertiary)' }} /> {i > 0 && <ChevronRight className="w-3.5 h-3.5" style={{ color: 'var(--color-text-tertiary)' }} />}
<button <button
onClick={() => navigateTo(pathSegments.slice(0, i + 1).join('/'))} onClick={() => navigateTo(pathSegments.slice(0, i + 1).join('/'))}
className={`text-sm font-medium hover:opacity-80 transition-opacity truncate ${isMobile ? 'max-w-[60px]' : 'max-w-[150px]'}`} className={`text-sm font-medium hover:opacity-80 transition-opacity truncate ${isMobile ? 'max-w-[60px]' : 'max-w-[150px]'}`}
@ -1864,7 +1856,7 @@ export default function FileExplorer({ onLogout }: FileExplorerProps) {
{group.name && ( {group.name && (
<h3 className="text-xs font-semibold uppercase tracking-wider mb-3 px-1" style={{ color: 'var(--color-text-tertiary)' }}>{group.name}</h3> <h3 className="text-xs font-semibold uppercase tracking-wider mb-3 px-1" style={{ color: 'var(--color-text-tertiary)' }}>{group.name}</h3>
)} )}
<div className="grid gap-3" style={{ gridTemplateColumns: isMobile ? 'repeat(2, 1fr)' : `repeat(auto-fill, minmax(${gridSize}px, 1fr))` }}> <div className="grid gap-3" style={{ gridTemplateColumns: isMobile ? 'repeat(2, minmax(0, 1fr))' : `repeat(auto-fill, minmax(${gridSize}px, 1fr))` }}>
{group.files.map((file, idx) => ( {group.files.map((file, idx) => (
<motion.div <motion.div
key={file.path} key={file.path}
@ -1930,7 +1922,7 @@ export default function FileExplorer({ onLogout }: FileExplorerProps) {
) : ( ) : (
<Tooltip text={file.name}> <Tooltip text={file.name}>
<span <span
className="text-xs font-medium text-center w-full truncate block" className={`text-xs font-medium text-center w-full block ${isMobile ? 'whitespace-normal break-words line-clamp-2' : 'truncate'}`}
style={{ color: 'var(--color-text-primary)' }} style={{ color: 'var(--color-text-primary)' }}
> >
{getFileDisplayName(file.name, file.is_dir)} {getFileDisplayName(file.name, file.is_dir)}