From 8ee8e3aab243de657c2ba98bef7055d24a428e89 Mon Sep 17 00:00:00 2001
From: Nick Mowen <nickmowen213@gmail.com>
Date: Wed, 9 Nov 2022 15:34:02 -0700
Subject: [PATCH] Use grid display so more cameras can take less vertical space

---
 web/src/routes/Debug.jsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/web/src/routes/Debug.jsx b/web/src/routes/Debug.jsx
index 3f77b0be6..dd6522bd7 100644
--- a/web/src/routes/Debug.jsx
+++ b/web/src/routes/Debug.jsx
@@ -57,7 +57,7 @@ export default function Debug() {
       ) : (
         <Fragment>
           <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) => (
               <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>
@@ -84,7 +84,7 @@ export default function Debug() {
           </div>
 
           <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) => (
               <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">