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

@@ -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}`}