From 4a3428ed8f4ad8683d167ce4bcc9dac631613547 Mon Sep 17 00:00:00 2001
From: Vishesh 'ironeagle' Bangotra <aetoskia@gmail.com>
Date: Sun, 24 May 2026 13:52:34 +0530
Subject: [PATCH] fixes for mobile view broken

---
 react-openapi/components/EnhancedTable.tsx | 24 ++++++++++++++++++++--
 react-openapi/components/FilterBar.tsx     |  9 +++-----
 2 files changed, 25 insertions(+), 8 deletions(-)

diff --git a/react-openapi/components/EnhancedTable.tsx b/react-openapi/components/EnhancedTable.tsx
index 55b6286..10dc971 100644
--- a/react-openapi/components/EnhancedTable.tsx
+++ b/react-openapi/components/EnhancedTable.tsx
@@ -130,6 +130,15 @@ export default function EnhancedTable({
     return cols;
   }, [config, onDelete, navigate, onNavigateToResource]);
 
+  const mobilePageSize = 10;
+  const [mobilePage, setMobilePage] = React.useState(0);
+  const mobileTotalPages = Math.ceil(data.length / mobilePageSize) || 1;
+  const mobileData = data.slice(mobilePage * mobilePageSize, (mobilePage + 1) * mobilePageSize);
+
+  React.useEffect(() => {
+    if (mobilePage >= mobileTotalPages) setMobilePage(0);
+  }, [data.length, mobilePage, mobileTotalPages]);
+
   if (isMobile) {
     return (
       <Box>
@@ -140,7 +149,7 @@ export default function EnhancedTable({
           </Button>
         </Box>
         <Box sx={{ display: 'flex', flexDirection: 'column', gap: 2 }}>
-          {data.map((row) => (
+          {mobileData.map((row) => (
             <Box key={row[config.primaryKey] || Math.random()}>
               <MobileCardRow 
                 row={row} 
@@ -153,6 +162,17 @@ export default function EnhancedTable({
             </Box>
           ))}
         </Box>
+        <Box sx={{ display: 'flex', justifyContent: 'center', gap: 1, mt: 2, flexWrap: 'wrap' }}>
+          <Button size="small" disabled={mobilePage === 0} onClick={() => setMobilePage(mobilePage - 1)}>
+            Previous
+          </Button>
+          <Typography variant="body2" sx={{ alignSelf: 'center', px: 1 }}>
+            Page {mobilePage + 1} of {mobileTotalPages}
+          </Typography>
+          <Button size="small" disabled={mobilePage >= mobileTotalPages - 1} onClick={() => setMobilePage(mobilePage + 1)}>
+            Next
+          </Button>
+        </Box>
       </Box>
     );
   }
@@ -240,7 +260,7 @@ function MobileCardRow({ row, config, onDelete, onNavigate, navigate }: any) {
                             <Typography variant="caption" color="text.secondary" sx={{ display: 'block' }}>
                                 {field.label}
                             </Typography>
-                            <Typography variant="body2" sx={{ fontWeight: 500, wordBreak: 'break-all' }}>
+                            <Typography variant="body2" component="div" sx={{ fontWeight: 500, wordBreak: 'break-all' }}>
                                 <FieldRenderer params={{ value: row[key], row }} field={field} fieldKey={key} config={config} onNavigate={onNavigate} navigate={navigate} isMobile />
                             </Typography>
                         </Box>
diff --git a/react-openapi/components/FilterBar.tsx b/react-openapi/components/FilterBar.tsx
index d9f226d..8455741 100644
--- a/react-openapi/components/FilterBar.tsx
+++ b/react-openapi/components/FilterBar.tsx
@@ -5,10 +5,6 @@ import {
   Paper,
   TextField,
   Autocomplete,
-  Select,
-  MenuItem,
-  FormControl,
-  InputLabel,
   Typography,
 } from "@mui/material";
 import FilterListIcon from "@mui/icons-material/FilterList";
@@ -59,7 +55,7 @@ function extractOptions(
     }
   }
 
-  console.log('extracted', fieldName, Array.from(values).sort())
+  // console.log('extracted', fieldName, Array.from(values).sort())
   return Array.from(values).sort();
 }
 
@@ -245,7 +241,8 @@ export default function FilterBar({
               const field = fields[fieldName];
               if (!field) return null;
 
-              const options = extractOptions(fieldName, field, data ?? []);
+              const needsOptions = !field.filterType || field.filterType === "autocomplete" || field.filterType === "multiselect";
+              const options = needsOptions ? extractOptions(fieldName, field, data ?? []) : [];
               const raw = draft[fieldName];
 
               return (