feat: implement App layout and server-side paginated DataGrid for table views

frontend/src/components/MainContent.tsx

@@ -41,8 +41,8 @@ const MainContent: React.FC = () => {
             field: col.Field,
             headerName: col.Field,
             type: type,
-            flex: 1,
-            minWidth: 150,
+            width: 200,
+            minWidth: 100,
             valueGetter: (value: any) => {
               if ((type === 'date' || type === 'dateTime') && value && typeof value === 'string') {
                 return new Date(value);
@@ -109,14 +109,14 @@ const MainContent: React.FC = () => {
   }
 
   return (
-    <Box sx={{ flexGrow: 1, p: 3, bgcolor: 'background.default', overflow: 'hidden', display: 'flex', flexDirection: 'column' }}>
+    <Box sx={{ flexGrow: 1, p: 3, bgcolor: 'background.default', display: 'flex', flexDirection: 'column', width: '100%', minWidth: 0, overflow: 'hidden' }}>
       <Box sx={{ mb: 2, display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
         <Typography variant="h5" sx={{ fontWeight: 700 }}>
           {activeDatabase}.{activeTable}
         </Typography>
       </Box>
       
-      <Paper sx={{ flexGrow: 1, borderRadius: 2, overflow: 'hidden', display: 'flex', flexDirection: 'column' }}>
+      <Paper sx={{ flexGrow: 1, borderRadius: 2, overflow: 'hidden', display: 'flex', flexDirection: 'column', width: '100%' }}>
         {loadingSchema ? (
           <Box sx={{ display: 'flex', height: '100%', alignItems: 'center', justifyContent: 'center' }}>
             <CircularProgress />
@@ -133,13 +133,24 @@ const MainContent: React.FC = () => {
             pageSizeOptions={[25, 50, 100]}
             sx={{
               border: 'none',
+              width: '100%',
+              height: '100%',
               '& .MuiDataGrid-cell:focus': {
                 outline: 'none',
               },
               '& .MuiDataGrid-columnHeader:focus': {
                 outline: 'none',
               },
-              height: '100%',
+              '& .MuiDataGrid-row:nth-of-type(even)': {
+                bgcolor: (theme) => theme.palette.mode === 'light' 
+                  ? 'rgba(0, 0, 0, 0.03)' 
+                  : 'rgba(255, 255, 255, 0.03)',
+              },
+              '& .MuiDataGrid-row:hover': {
+                bgcolor: (theme) => theme.palette.mode === 'light' 
+                  ? 'rgba(0, 97, 255, 0.08)' 
+                  : 'rgba(0, 97, 255, 0.15)',
+              },
             }}
             slotProps={{
               loadingOverlay: {