From 8bec32dea66b113cb46a6d32bc261679ac81f510 Mon Sep 17 00:00:00 2001
From: Anso <dev@saelix.com>
Date: Sun, 28 Jun 2026 22:04:44 -0400
Subject: [PATCH] fix: stack the volume browser panels on phones so the file
 preview is readable (#1512)

On phone widths the volume browser kept its fixed 260px tree column beside the
preview, leaving the preview roughly 54px wide so file content wrapped to one or
two characters per line. Below the md breakpoint the two panels now stack into a
single column (tree above, preview below) with the tree capped at 40% of the
height, so the preview spans the full width. Desktop and tablet layouts are
unchanged.
---
 frontend/src/components/resources/VolumeBrowserSheet.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/src/components/resources/VolumeBrowserSheet.tsx b/frontend/src/components/resources/VolumeBrowserSheet.tsx
index 12522325..dcf765d3 100644
--- a/frontend/src/components/resources/VolumeBrowserSheet.tsx
+++ b/frontend/src/components/resources/VolumeBrowserSheet.tsx
@@ -90,7 +90,7 @@ export function VolumeBrowserSheet({ volumeName, onClose }: VolumeBrowserSheetPr
       {volumeName && (
         <>
           {isAnonymousVolumeName(volumeName) && <AnonymousNameBand name={volumeName} />}
-          <div className="grid grid-cols-[260px_1fr] gap-3 px-6 py-5 flex-1 min-h-0">
+          <div className="grid grid-cols-[260px_1fr] gap-3 px-6 py-5 flex-1 min-h-0 max-md:grid-cols-1 max-md:grid-rows-[40%_1fr] max-md:px-4">
             <div className="rounded-md border border-card-border bg-card overflow-hidden">
               <FileTree
                 key={`${volumeName}:${refreshKey}`}