diff --git a/components/utilities/files/FileBrowserPanel.tsx b/components/utilities/files/FileBrowserPanel.tsx
index c0084c7b..3487187a 100644
--- a/components/utilities/files/FileBrowserPanel.tsx
+++ b/components/utilities/files/FileBrowserPanel.tsx
@@ -1,7 +1,15 @@
 "use client";
 
 import React, { useEffect, useMemo, useState, useCallback } from "react";
-import { Loader2, Download, Folder, FileText, RefreshCw, ArrowUp, Home } from "lucide-react";
+import {
+    Loader2,
+    Download,
+    Folder,
+    FileText,
+    RefreshCw,
+    ArrowUp,
+    Home,
+} from "lucide-react";
 
 type FileItem = {
     name: string;
@@ -117,119 +125,131 @@ export default function FileBrowserPanel() {
 
     return (
         <div className="space-y-3">
-        <div className="flex items-center gap-2">
-        <button
-        onClick={onHome}
-        className="inline-flex items-center gap-2 rounded-md border px-3 py-1.5 text-sm hover:bg-muted"
-        title="Root"
-        >
-        <Home className="h-4 w-4" /> root
-        </button>
-        <div className="ml-auto flex items-center gap-2">
-        <button
-        onClick={fetchList}
-        className="inline-flex items-center gap-2 rounded-md border px-3 py-1.5 text-sm hover:bg-muted"
-        title="Refresh"
-        >
-        <RefreshCw className="h-4 w-4" /> Refresh
-        </button>
-        <button
-        onClick={onUp}
-        className="inline-flex items-center gap-2 rounded-md border px-3 py-1.5 text-sm hover:bg-muted"
-        title="Up one folder"
-        >
-        <ArrowUp className="h-4 w-4" /> Up
-        </button>
-        </div>
-        </div>
+        <style>{`
+            @media (min-width: 1024px) {
+                .fs-grid {
+                    display: grid;
+                    grid-template-columns: 1fr clamp(340px, 36vw, 480px);
+                    gap: 1rem;
+                }
+            }
+            `}</style>
 
-        <div className="text-xs text-muted-foreground select-all">{path}</div>
-
-        {/* Wider table, same preview: left has min 760px; table can scroll horizontally if cramped */}
-        <div className="grid grid-cols-1 lg:grid-cols-[minmax(760px,1fr),420px] gap-4">
-        {/* TABLE */}
-        <div className="rounded-md border overflow-hidden">
-        <div className="overflow-x-auto">
-        <div className="min-w-[740px]">
-        <div className="grid grid-cols-[minmax(340px,1fr),110px,120px,170px,120px] items-center bg-muted px-3 py-2 text-sm font-medium whitespace-nowrap">
-        <div>Name</div>
-        <div>Type</div>
-        <div>Size</div>
-        <div>Modified</div>
-        <div className="text-right">Actions</div>
-        </div>
-
-        <div className="divide-y">
-        {loading ? (
-            <div className="p-6 text-sm text-muted-foreground flex items-center gap-2">
-            <Loader2 className="h-4 w-4 animate-spin" /> Loading…
+            <div className="flex items-center gap-2">
+            <button
+            onClick={onHome}
+            className="inline-flex items-center gap-2 rounded-md border px-3 py-1.5 text-sm hover:bg-muted"
+            title="Root"
+            >
+            <Home className="h-4 w-4" /> root
+            </button>
+            <div className="ml-auto flex items-center gap-2">
+            <button
+            onClick={fetchList}
+            className="inline-flex items-center gap-2 rounded-md border px-3 py-1.5 text-sm hover:bg-muted"
+            title="Refresh"
+            >
+            <RefreshCw className="h-4 w-4" /> Refresh
+            </button>
+            <button
+            onClick={onUp}
+            className="inline-flex items-center gap-2 rounded-md border px-3 py-1.5 text-sm hover:bg-muted"
+            title="Up one folder"
+            >
+            <ArrowUp className="h-4 w-4" /> Up
+            </button>
             </div>
-        ) : error ? (
-            <div className="p-6 text-sm text-rose-400">Error: {error}</div>
-        ) : items.length === 0 ? (
-            <div className="p-6 text-sm text-muted-foreground">Empty folder.</div>
-        ) : (
-            items.map((it) => (
-                <div
-                key={it.name + it.type}
-                className="grid grid-cols-[minmax(340px,1fr),110px,120px,170px,120px] items-center px-3 py-2 text-sm hover:bg-muted/50"
-                >
-                <button
-                className="text-left inline-flex items-center gap-2 hover:underline"
-                onClick={() => onOpen(it)}
-                title={it.type === "dir" ? "Open folder" : "Preview"}
-                >
-                {it.type === "dir" ? (
-                    <Folder className="h-4 w-4" />
-                ) : (
-                    <FileText className="h-4 w-4" />
-                )}
-                <span className="truncate">{it.name}</span>
-                </button>
-                <div className="uppercase tracking-wide text-[11px] text-muted-foreground">
-                {it.type}
+            </div>
+
+            <div className="text-xs text-muted-foreground select-all">{path || "/"}</div>
+
+            <div className="fs-grid">
+            {/* TABLE */}
+            <div className="rounded-md border overflow-hidden">
+            <div className="overflow-x-auto">
+            <div className="min-w-[560px]">
+            {/* compact column plan: name grows; others stay tidy */}
+            <div className="grid grid-cols-[minmax(260px,1fr),88px,92px,156px,auto] items-center bg-muted px-3 py-2 text-sm font-medium">
+            <div>Name</div>
+            <div>Type</div>
+            <div>Size</div>
+            <div>Modified</div>
+            <div className="text-right">Actions</div>
+            </div>
+
+            <div className="divide-y">
+            {loading ? (
+                <div className="p-6 text-sm text-muted-foreground flex items-center gap-2">
+                <Loader2 className="h-4 w-4 animate-spin" /> Loading…
                 </div>
-                <div className="text-muted-foreground">{formatSize(it.size)}</div>
-                <div className="text-muted-foreground">
-                {it.mtimeMs ? new Date(it.mtimeMs).toLocaleString() : "—"}
-                </div>
-                <div className="text-right">
-                {it.type === "file" && (
-                    <button
-                    onClick={() => onDownload(it)}
-                    className="inline-flex items-center gap-1 rounded-md border px-2 py-1 text-xs hover:bg-muted"
-                    title="Download"
+            ) : error ? (
+                <div className="p-6 text-sm text-rose-400">Error: {error}</div>
+            ) : items.length === 0 ? (
+                <div className="p-6 text-sm text-muted-foreground">Empty folder.</div>
+            ) : (
+                items.map((it) => (
+                    <div
+                    key={it.name + it.type}
+                    className="grid grid-cols-[minmax(260px,1fr),88px,92px,156px,auto] items-center px-3 py-2 text-sm hover:bg-muted/50"
                     >
-                    <Download className="h-3.5 w-3.5" />
-                    Download
+                    <button
+                    className="text-left inline-flex items-center gap-2 hover:underline min-w-0"
+                    onClick={() => onOpen(it)}
+                    title={it.type === "dir" ? "Open folder" : "Preview"}
+                    >
+                    {it.type === "dir" ? (
+                        <Folder className="h-4 w-4 shrink-0" />
+                    ) : (
+                        <FileText className="h-4 w-4 shrink-0" />
+                    )}
+                    <span className="truncate">{it.name}</span>
                     </button>
-                )}
-                </div>
-                </div>
-            ))
-        )}
-        </div>
-        </div>
-        </div>
-        </div>
-
-        {/* PREVIEW (unchanged size) */}
-        <div className="rounded-md border p-3">
-        <div className="mb-2 text-sm font-medium">Preview</div>
-        {previewHref ? (
-            <div className="border rounded overflow-hidden">
-            <iframe
-            key={previewHref}
-            src={previewHref}
-            className="w-full h-[420px]"
-            title="Preview"
-            />
+                    <div className="uppercase tracking-wide text-[11px] text-muted-foreground">
+                    {it.type}
+                    </div>
+                    <div className="text-muted-foreground">{formatSize(it.size)}</div>
+                    <div className="text-muted-foreground">
+                    {it.mtimeMs ? new Date(it.mtimeMs).toLocaleString() : "—"}
+                    </div>
+                    <div className="text-right">
+                    {it.type === "file" && (
+                        <button
+                        onClick={() => onDownload(it)}
+                        className="inline-flex items-center gap-1 rounded-md border px-2 py-1 text-xs hover:bg-muted"
+                        title="Download"
+                        >
+                        <Download className="h-3.5 w-3.5" />
+                        Download
+                        </button>
+                    )}
+                    </div>
+                    </div>
+                ))
+            )}
+            </div>
+            </div>
+            </div>
+            </div>
+
+            {/* PREVIEW */}
+            <div className="rounded-md border p-3">
+            <div className="mb-2 text-sm font-medium">Preview</div>
+            {previewHref ? (
+                <div className="border rounded overflow-hidden">
+                <iframe
+                key={previewHref}
+                src={previewHref}
+                className="w-full h-[420px]"
+                title="Preview"
+                />
+                </div>
+            ) : (
+                <div className="text-sm text-muted-foreground">
+                Select a file to preview.
+                </div>
+            )}
+            </div>
+            </div>
             </div>
-        ) : (
-            <div className="text-sm text-muted-foreground">Select a file to preview.</div>
-        )}
-        </div>
-        </div>
-        </div>
     );
 }