Fix scroll on mobile for list views

uwblueprint · Sep 4, 2024 · c7dbab7 · c7dbab7
1 parent 451a626
commit c7dbab7
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 1 deletion.
diff --git a/frontend/src/components/common/ListView.tsx b/frontend/src/components/common/ListView.tsx
@@ -44,6 +44,9 @@ const ListView = ({ columns, rowOptions, data, loading, requestType, currentPage
         margin: 0 !important;
         width: 100%;
         --data-table-library_grid-template-columns: repeat(${columns.length - 1}, minmax(0, 1fr)) 88px;
+
+        overflow: auto;
+        min-width: 500px;
   
         .animate {
           grid-column: 1 / -1;
@@ -95,6 +98,8 @@ const ListView = ({ columns, rowOptions, data, loading, requestType, currentPage
         bgColor="gray.50"
         borderLeft="2px solid"
         borderColor="gray.gray83"
+        minWidth="500px"
+        overflow="auto"
       >
         <Text variant="desktop-body-bold">{requestType}</Text>
       </Box>
@@ -122,6 +127,8 @@ const ListView = ({ columns, rowOptions, data, loading, requestType, currentPage
         gap="16px"
         color="#4A5568"
         justifyContent="right"
+        minWidth="500px"
+        overflow="scroll"
       >
         <Text fontSize="14px">Page: {currentPage}</Text>
         {currentPage === 1 ? (

diff --git a/frontend/src/pages/ASPDashboard.tsx b/frontend/src/pages/ASPDashboard.tsx
@@ -40,7 +40,7 @@ const Dashboard = (): React.ReactElement => {
       <Text variant="desktop-caption" mb="20px">
         Use this page to see your upcoming food deliveries
       </Text>
-      <Tabs defaultIndex={0} w="100%">
+      <Tabs defaultIndex={0} w="100%" minWidth="400px" overflow="scroll">
         <Flex flexDir="row" justifyContent="space-between">
           <TabList>
             <Tab gap="8px">