chore: fix overflow on large results

jaypyles · Jul 8, 2024 · 8215423 · 8215423
1 parent 4e9e592
commit 8215423
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 23 deletions.
diff --git a/src/components/JobTable.tsx b/src/components/JobTable.tsx
@@ -113,7 +113,6 @@ const JobTable: React.FC<JobTableProps> = ({ jobs, fetchJobs }) => {
       display="flex"
       justifyContent="center"
       minHeight="100vh"
-      p={3}
     >
       <Box
         className="flex flex-col justify-start align-center items-center"

diff --git a/src/pages/index.tsx b/src/pages/index.tsx
@@ -238,28 +238,30 @@ const Home = () => {
         {results && (
           <>
             <Typography variant="h4">Results</Typography>
-            <Table ref={resultsRef} style={{ marginTop: "20px" }}>
-              <TableHead>
-                <TableRow>
-                  <TableCell>Name</TableCell>
-                  <TableCell>XPath</TableCell>
-                  <TableCell>Text</TableCell>
-                </TableRow>
-              </TableHead>
-              <TableBody>
-                {Object.keys(results).map((key, index) => (
-                  <React.Fragment key={index}>
-                    {results[key].map((result, resultIndex) => (
-                      <TableRow key={resultIndex}>
-                        <TableCell>{result.name}</TableCell>
-                        <TableCell>{result.xpath}</TableCell>
-                        <TableCell>{result.text}</TableCell>
-                      </TableRow>
-                    ))}
-                  </React.Fragment>
-                ))}
-              </TableBody>
-            </Table>
+            <Box style={{ maxHeight: "400px", overflow: "auto" }}>
+              <Table ref={resultsRef} style={{ marginTop: "20px" }}>
+                <TableHead>
+                  <TableRow>
+                    <TableCell>Name</TableCell>
+                    <TableCell>XPath</TableCell>
+                    <TableCell>Text</TableCell>
+                  </TableRow>
+                </TableHead>
+                <TableBody>
+                  {Object.keys(results).map((key, index) => (
+                    <React.Fragment key={index}>
+                      {results[key].map((result, resultIndex) => (
+                        <TableRow key={resultIndex}>
+                          <TableCell>{result.name}</TableCell>
+                          <TableCell>{result.xpath}</TableCell>
+                          <TableCell>{result.text}</TableCell>
+                        </TableRow>
+                      ))}
+                    </React.Fragment>
+                  ))}
+                </TableBody>
+              </Table>
+            </Box>
           </>
         )}
       </Container>