chore: fix overflow on large results

This commit is contained in:
Jayden Pyles
2024-07-07 20:27:57 -05:00
parent 4e9e592b2f
commit 82154232a2
2 changed files with 24 additions and 23 deletions

View File

@@ -113,7 +113,6 @@ const JobTable: React.FC<JobTableProps> = ({ jobs, fetchJobs }) => {
display="flex" display="flex"
justifyContent="center" justifyContent="center"
minHeight="100vh" minHeight="100vh"
p={3}
> >
<Box <Box
className="flex flex-col justify-start align-center items-center" className="flex flex-col justify-start align-center items-center"

View File

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