Use grid display so more cameras can take less vertical space

This commit is contained in:
Nick Mowen 2022-11-09 15:34:02 -07:00
parent 5e3f8f19b9
commit 8ee8e3aab2

View File

@ -57,7 +57,7 @@ export default function Debug() {
) : ( ) : (
<Fragment> <Fragment>
<Heading>Detectors</Heading> <Heading>Detectors</Heading>
<div data-testid="detectors" className="min-w-0 overflow-auto"> <div data-testid="detectors" className="grid grid-cols-1 3xl:grid-cols-3 md:grid-cols-2 gap-4 p-2 px-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 p-4 m-2">
<div className="text-lg flex justify-between">{detector}</div> <div className="text-lg flex justify-between">{detector}</div>
@ -84,7 +84,7 @@ export default function Debug() {
</div> </div>
<Heading>Cameras</Heading> <Heading>Cameras</Heading>
<div data-testid="cameras" className="min-w-0 overflow-auto"> <div data-testid="cameras" className="grid grid-cols-1 3xl:grid-cols-3 md:grid-cols-2 gap-4 p-2 px-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 p-4 m-2">
<div className="text-lg flex justify-between"> <div className="text-lg flex justify-between">