From dd798877f5a1093bd1094475368cfce8b84609a8 Mon Sep 17 00:00:00 2001
From: Elijah <elijah.kuntz@gmail.com>
Date: Sun, 24 May 2026 09:11:42 -0700
Subject: [PATCH] Mobile UI folder view width cap and name wrapping

---
 frontend/src/components/FileExplorer.tsx | 14 +++-----------
 1 file changed, 3 insertions(+), 11 deletions(-)

diff --git a/frontend/src/components/FileExplorer.tsx b/frontend/src/components/FileExplorer.tsx
index 5a290b9..ec653b2 100644
--- a/frontend/src/components/FileExplorer.tsx
+++ b/frontend/src/components/FileExplorer.tsx
@@ -1464,17 +1464,9 @@ export default function FileExplorer({ onLogout }: FileExplorerProps) {
                   <Menu className="w-5 h-5" />
                 </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) => (
                 <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
                     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]'}`}
@@ -1864,7 +1856,7 @@ export default function FileExplorer({ onLogout }: FileExplorerProps) {
                     {group.name && (
                       <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) => (
                       <motion.div
                         key={file.path}
@@ -1930,7 +1922,7 @@ export default function FileExplorer({ onLogout }: FileExplorerProps) {
                         ) : (
                           <Tooltip text={file.name}>
                             <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)' }}
                             >
                               {getFileDisplayName(file.name, file.is_dir)}