feat: optimize mobile navigation and storage display

- Stack breadcrumbs above action buttons on mobile screens
- Move storage usage component above navigation for better hierarchy
- Make Create Folder and Upload buttons full-width on mobile with proper spacing
- Maintain desktop horizontal layout for larger screens
- Improve information architecture and mobile usability

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <[email protected]>

1 files changed, 25 insertions, 25 deletions

diff --git a/frontend/components/drive/DriveDirectoryClient.tsx b/frontend/components/drive/DriveDirectoryClient.tsx
index 3058a68..7c5827b 100644
--- a/frontend/components/drive/DriveDirectoryClient.tsx
+++ b/frontend/components/drive/DriveDirectoryClient.tsx
@@ -366,33 +366,35 @@ export function DriveDirectoryClient({ path, files, breadcrumbs, storageData, us
 
   return (
     <div className="space-y-6">
+      {/* Storage Info */}
+      <StorageUsage data={storageData} />
+
       {/* Navigation and Actions */}
-      <div className="flex items-center justify-between">
-        <div className="flex items-center gap-4">
-          {/* Breadcrumbs */}
-          <nav className="flex items-center gap-1 text-sm text-muted-foreground">
-            {breadcrumbs.map((crumb, index) => (
-              <div key={crumb.path} className="flex items-center gap-1">
-                {index > 0 && <ChevronRight className="h-3 w-3" />}
-                {index === breadcrumbs.length - 1 ? (
-                  <span className="text-foreground font-medium">{crumb.name}</span>
-                ) : (
-                  <Link 
-                    href={crumb.path}
-                    className="hover:text-foreground transition-colors"
-                  >
-                    {crumb.name}
-                  </Link>
-                )}
-              </div>
-            ))}
-          </nav>
-        </div>
+      <div className="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
+        {/* Breadcrumbs */}
+        <nav className="flex items-center gap-1 text-sm text-muted-foreground">
+          {breadcrumbs.map((crumb, index) => (
+            <div key={crumb.path} className="flex items-center gap-1">
+              {index > 0 && <ChevronRight className="h-3 w-3" />}
+              {index === breadcrumbs.length - 1 ? (
+                <span className="text-foreground font-medium">{crumb.name}</span>
+              ) : (
+                <Link 
+                  href={crumb.path}
+                  className="hover:text-foreground transition-colors"
+                >
+                  {crumb.name}
+                </Link>
+              )}
+            </div>
+          ))}
+        </nav>
         
-        <div className="flex items-center gap-2">
+        <div className="flex items-center gap-2 sm:gap-2">
           <Button 
             variant="secondary"
             onClick={() => setCreateFolderDialogOpen(true)}
+            className="flex-1 sm:flex-none"
           >
             <FolderPlus className="mr-2 h-4 w-4" />
             Create Folder
@@ -400,6 +402,7 @@ export function DriveDirectoryClient({ path, files, breadcrumbs, storageData, us
           <Button 
             onClick={() => fileInputRef.current?.click()}
             disabled={uploading}
+            className="flex-1 sm:flex-none"
           >
             <Upload className="mr-2 h-4 w-4" />
             {uploading ? "Uploading..." : "Upload Files"}
@@ -407,9 +410,6 @@ export function DriveDirectoryClient({ path, files, breadcrumbs, storageData, us
         </div>
       </div>
 
-      {/* Storage Info */}
-      <StorageUsage data={storageData} />
-
       {/* Bulk Actions */}
       {selectedFiles.size > 0 && (
         <div className="bg-blue-50 border border-blue-200 rounded-lg p-4 flex items-center justify-between">