Fix hanging characters

This commit is contained in:
Nick Mowen 2022-11-09 16:09:07 -07:00
parent 8ee8e3aab2
commit 77ee99279d

View File

@ -57,45 +57,47 @@ export default function Debug() {
) : ( ) : (
<Fragment> <Fragment>
<Heading>Detectors</Heading> <Heading>Detectors</Heading>
<div data-testid="detectors" className="grid grid-cols-1 3xl:grid-cols-3 md:grid-cols-2 gap-4 p-2 px-4"> <div data-testid="detectors" className="grid grid-cols-1 3xl:grid-cols-3 md:grid-cols-2 gap-4">
{detectorNames.map((detector) => ( {detectorNames.map((detector) => (
<div key={detector} className="dark:bg-gray-800 shadow-md hover:shadow-lg rounded-lg transition-shadow p-4 m-2"> <div key={detector} className="dark:bg-gray-800 shadow-md hover:shadow-lg rounded-lg transition-shadow">
<div className="text-lg flex justify-between">{detector}</div> <div className="text-lg flex justify-between p-4">{detector}</div>
<Table className="w-full"> <div className="p-2">
<Thead> <Table className="w-full">
<Tr> <Thead>
{detectorDataKeys.map((name) => ( <Tr>
<Th key={name}>{name.replace('_', ' ')}</Th>
))}
</Tr>
</Thead>
<Tbody>
{detectorNames.map((detector, i) => (
<Tr key={i} index={i}>
{detectorDataKeys.map((name) => ( {detectorDataKeys.map((name) => (
<Td key={`${name}-${detector}`}>{detectors[detector][name]}</Td> <Th key={name}>{name.replace('_', ' ')}</Th>
))} ))}
</Tr> </Tr>
))} </Thead>
</Tbody> <Tbody>
</Table> {detectorNames.map((detector, i) => (
<Tr key={i} index={i}>
{detectorDataKeys.map((name) => (
<Td key={`${name}-${detector}`}>{detectors[detector][name]}</Td>
))}
</Tr>
))}
</Tbody>
</Table>
</div>
</div> </div>
))} ))}
</div> </div>
<Heading>Cameras</Heading> <Heading>Cameras</Heading>
<div data-testid="cameras" className="grid grid-cols-1 3xl:grid-cols-3 md:grid-cols-2 gap-4 p-2 px-4"> <div data-testid="cameras" className="grid grid-cols-1 3xl:grid-cols-3 md:grid-cols-2 gap-4">
{cameraNames.map((camera) => ( {cameraNames.map((camera) => (
<div key={camera} className="dark:bg-gray-800 shadow-md hover:shadow-lg rounded-lg transition-shadow p-4 m-2"> <div key={camera} className="dark:bg-gray-800 shadow-md hover:shadow-lg rounded-lg transition-shadow">
<div className="text-lg flex justify-between"> <div className="text-lg flex justify-between p-4">
<Link href={`/cameras/${camera}`}>{camera.replaceAll('_', ' ')}</Link> <Link href={`/cameras/${camera}`}>{camera.replaceAll('_', ' ')}</Link>
<Button onClick={(e) => onCopyFfprobe(camera, e)}>copy ffprobe</Button> <Button onClick={(e) => onCopyFfprobe(camera, e)}>copy ffprobe</Button>
</div> </div>
<div className="p-4"> <div className="p-2">
<Table className="w-full"> <Table className="w-full">
<Thead> <Thead>
<Tr> <Tr>
<Th>Processes</Th> <Th>Process</Th>
<Th>Process ID</Th> <Th>Process ID</Th>
<Th>fps</Th> <Th>fps</Th>
<Th>Cpu %</Th> <Th>Cpu %</Th>