fix: fix ui overflow

Author: LazuliKao

web/src/app/browser/browser-client.tsx

@@ -151,14 +151,14 @@ const BrowserClient: FC<BrowserClientProps> = ({
         </Toolbar>
 
         {/* File Table */}
-        <div className="overflow-x-auto">
+        <div className="overflow-x-auto w-full">
           <Table size="medium">
             <TableHeader className="bg-gray-50">
               <TableRow>
-                <TableHeaderCell>Archive Name</TableHeaderCell>
-                <TableHeaderCell style={{ width: '120px' }}>Size</TableHeaderCell>
-                <TableHeaderCell style={{ width: '180px' }}>Date Modified</TableHeaderCell>
-                <TableHeaderCell style={{ width: '80px' }} className="text-center">Action</TableHeaderCell>
+                <TableHeaderCell className="min-w-[120px] sm:min-w-[200px]">Archive Name</TableHeaderCell>
+                <TableHeaderCell style={{ width: '100px' }} className="hidden sm:table-cell">Size</TableHeaderCell>
+                <TableHeaderCell style={{ width: '150px' }}>Date Modified</TableHeaderCell>
+                <TableHeaderCell style={{ width: '60px' }} className="text-center">Action</TableHeaderCell>
               </TableRow>
             </TableHeader>
             <TableBody>
@@ -195,7 +195,7 @@ const BrowserClient: FC<BrowserClientProps> = ({
                           </a>
                         </TableCellLayout>
                       </TableCell>
-                      <TableCell>
+                      <TableCell className="hidden sm:table-cell">
                         <Text size={200} className="font-mono text-gray-500">
                            {filesize(file.size || 0, { base: 2 }).toString()}
                         </Text>

web/src/app/globals.css

@@ -16,5 +16,5 @@ body {
 }
 
 .log-wrapper {
-  @apply relative w-full;
+  @apply relative w-full h-full;
 }

web/src/components/log-dialog.tsx

@@ -35,8 +35,8 @@ export default function LogDialog() {
               <span>Backup Execution Logs</span>
             </div>
           </DialogTitle>
-<DialogContent>
-        <div className="min-h-[500px] bg-gray-900 rounded-lg overflow-hidden mt-4">
+<DialogContent className="overflow-hidden min-h-[500px] flex flex-col p-0">
+        <div className="flex-1 bg-gray-900 rounded-lg overflow-hidden mt-4 flex flex-col h-full w-full max-w-full">
           <Suspense fallback={<div className="text-white text-center py-8">Loading...</div>}>
             <LogView />
           </Suspense>

web/src/components/log-view.tsx

@@ -3,7 +3,7 @@ import { api } from '@/lib/api';
 
 export default function LogView() {
   return (
-    <div className="log-wrapper">
+    <div className="log-wrapper flex-1">
       <ScrollFollow
         startFollowing
         render={({ follow, onScroll }) => (