better panels

src/apps/officer-web/Screens/Dashboard/Files/Screen/index.tsx

@@ -26,7 +26,6 @@ import { useFiles, type DirEntry, useTasks, type TaskSummary, Breadcrumb, Toolba
 import { useUserState } from '@/state/useUserState';
 import { useAuth } from 'hooks/useAuth';
 import { RadioGroup, RadioGroupItem } from '@/components/ui/radio-group';
-import { Card } from '@/components/Card';
 import { FileGrid } from './FileGrid';
 import { FileViewer } from './FileViewer';
 import { TaskRunnerModal } from './TaskRunnerModal';
@@ -374,12 +373,7 @@ export const Files = () => {
 
   return (
     <>
-      <div className="flex items-center justify-center h-full p-0 md:p-4">
-        <Card
-          className={`flex flex-col overflow-hidden transition-all duration-200 ${
-            fullscreen ? 'w-[90vw] h-[90%]' : 'w-full h-full md:w-[90vw] md:h-[90%] lg:w-[50vw]'
-          }`}
-        >
+      <div className="flex flex-col h-full overflow-hidden">
           {/* Toolbar */}
           <div className="shrink-0 flex items-center gap-2 md:gap-3 px-3 md:px-4 h-12 md:h-14 border-b border-duck-dark/10 overflow-hidden">
             <Toolbar
@@ -638,7 +632,6 @@ export const Files = () => {
               </ContextMenu>
             )}
           </div>
-        </Card>
       </div>
 
       <FileViewer

src/apps/officer-web/Screens/Dashboard/Files/index.tsx

@@ -1,2 +1,14 @@
-export { Files } from './Screen';
+import { Card } from '@/components/Card';
+import { Files as FilesInner } from './Screen';
+
+export { FilesInner as Files };
+
+export const FilesPage = () => (
+  <div className="flex items-center justify-center h-full p-0 md:p-4">
+    <Card className="flex flex-col overflow-hidden w-full h-full md:w-[90vw] md:h-[90%] lg:w-[50vw]">
+      <FilesInner />
+    </Card>
+  </div>
+);
+
 export { FileBrowser as FileBrowserWidget } from './Widget';