fix(web): debug tables scrollable on small width screens

This commit is contained in:
Paul Armstrong 2021-02-05 15:56:04 -08:00 committed by Blake Blackshear
parent 4e03acc944
commit 3e2506136c

View File

@ -49,49 +49,53 @@ export default function Debug() {
Debug <span className="text-sm">{service.version}</span> Debug <span className="text-sm">{service.version}</span>
</Heading> </Heading>
<Table className="w-full"> <div class="min-w-0 overflow-auto">
<Thead> <Table className="w-full">
<Tr> <Thead>
<Th>detector</Th> <Tr>
{detectorDataKeys.map((name) => ( <Th>detector</Th>
<Th>{name.replace('_', ' ')}</Th>
))}
</Tr>
</Thead>
<Tbody>
{detectorNames.map((detector, i) => (
<Tr index={i}>
<Td>{detector}</Td>
{detectorDataKeys.map((name) => ( {detectorDataKeys.map((name) => (
<Td key={`${name}-${detector}`}>{detectors[detector][name]}</Td> <Th>{name.replace('_', ' ')}</Th>
))} ))}
</Tr> </Tr>
))} </Thead>
</Tbody> <Tbody>
</Table> {detectorNames.map((detector, i) => (
<Tr index={i}>
<Table className="w-full"> <Td>{detector}</Td>
<Thead> {detectorDataKeys.map((name) => (
<Tr> <Td key={`${name}-${detector}`}>{detectors[detector][name]}</Td>
<Th>camera</Th> ))}
{cameraDataKeys.map((name) => ( </Tr>
<Th>{name.replace('_', ' ')}</Th>
))} ))}
</Tr> </Tbody>
</Thead> </Table>
<Tbody> </div>
{cameraNames.map((camera, i) => (
<Tr index={i}> <div class="min-w-0 overflow-auto">
<Td> <Table className="w-full">
<Link href={`/cameras/${camera}`}>{camera}</Link> <Thead>
</Td> <Tr>
<Th>camera</Th>
{cameraDataKeys.map((name) => ( {cameraDataKeys.map((name) => (
<Td key={`${name}-${camera}`}>{cameras[camera][name]}</Td> <Th>{name.replace('_', ' ')}</Th>
))} ))}
</Tr> </Tr>
))} </Thead>
</Tbody> <Tbody>
</Table> {cameraNames.map((camera, i) => (
<Tr index={i}>
<Td>
<Link href={`/cameras/${camera}`}>{camera}</Link>
</Td>
{cameraDataKeys.map((name) => (
<Td key={`${name}-${camera}`}>{cameras[camera][name]}</Td>
))}
</Tr>
))}
</Tbody>
</Table>
</div>
<div className="relative"> <div className="relative">
<Heading size="sm">Config</Heading> <Heading size="sm">Config</Heading>