- improved layouts across app

- adjusted card spacing

src/features/cameras/components/CameraGrid.tsx

@@ -9,11 +9,17 @@ const CameraGrid = () => {
   const [tabIndex, setTabIndex] = useState(0);
 
   return (
-    <div className="flex flex-col gap-4 p-4 md:grid md:grid-cols-5 md:grid-rows-5 md:max-h-screen md:gap-0 md:p-0">
+    <div className="grid grid-cols-1 md:grid-cols-3 gap-4 p-4 h-screen max-h-screen overflow-hidden">
+      <div className="col-span-2 flex flex-col gap-4">
+        <div className="shrink-0">
           <VideoFeedGridPainter />
-      <CameraSettings tabIndex={tabIndex} setTabIndex={setTabIndex} />
+        </div>
+        <div className="flex-1 overflow-hidden">
           <PlatePatch />
         </div>
+      </div>
+      <CameraSettings tabIndex={tabIndex} setTabIndex={setTabIndex} />
+    </div>
   );
 };
 

src/features/cameras/components/CameraSettings/CameraSettings.tsx

@@ -10,7 +10,7 @@ type CameraSettingsProps = {
 
 const CameraSettings = ({ tabIndex, setTabIndex }: CameraSettingsProps) => {
   return (
-    <Card className="p-4 w-full overflow-auto md:col-span-2 md:row-span-5 md:col-start-4 md:row-start-1">
+    <Card className="p-4 w-full h-full max-h-screen ">
       <Tabs
         selectedTabClassName="bg-gray-300 text-gray-900 font-semibold border-none rounded-sm mb-1"
         className="react-tabs"

src/features/cameras/components/CameraSettings/RegionSelector.tsx

@@ -106,8 +106,9 @@ const RegionSelector = ({ regions, selectedRegionIndex, mode, cameraFeedID }: Re
   };
 
   return (
-    <div className="grid grid-cols-1 md:grid-cols-2 md:grid-rows-2 gap-4">
+    <div className="flex flex-col gap-4 max-h-[50%]">
-      <div className="p-2 border border-gray-600 rounded-lg flex flex-col">
+      <div className="flex flex-row gap-3">
+        <div className="p-2 border border-gray-600 rounded-lg flex flex-col h-50 w-full">
           <h2 className="text-2xl mb-2">Tools</h2>
           <div className="flex flex-col">
             <label
@@ -144,7 +145,8 @@ const RegionSelector = ({ regions, selectedRegionIndex, mode, cameraFeedID }: Re
             </label>
           </div>
         </div>
-      <div className="p-2 border border-gray-600 rounded-lg flex flex-col">
+
+        <div className="p-2 border border-gray-600 rounded-lg flex flex-col w-full">
           <h2 className="text-2xl mb-2">Bay Select</h2>
           <>
             {regions?.map((region, idx) => {
@@ -171,7 +173,10 @@ const RegionSelector = ({ regions, selectedRegionIndex, mode, cameraFeedID }: Re
                     />
                     <span className="text-xl">{region.name}</span>
                   </div>
-                <ColourPicker colour={region.brushColour} setColour={(c: string) => handleRegionColourChange(idx, c)} />
+                  <ColourPicker
+                    colour={region.brushColour}
+                    setColour={(c: string) => handleRegionColourChange(idx, c)}
+                  />
                   <div></div>
                 </label>
               );
@@ -186,19 +191,20 @@ const RegionSelector = ({ regions, selectedRegionIndex, mode, cameraFeedID }: Re
             </button>
           </div>
         </div>
+      </div>
 
-      <div className="p-2 border border-gray-600 rounded-lg flex flex-col md:col-span-2 h-50">
+      <div className="p-2 border border-gray-600 rounded-lg flex flex-col w-full">
-        <div className="flex flex-col">
         <h2 className="text-2xl mb-2">Actions</h2>
+        <div className="flex flex-col md:flex-row mx-auto gap-4 justify-center">
           <button
             onClick={handleSaveclick}
-            className="mt-2 px-4 py-2 border border-blue-600 rounded-md text-white bg-blue-600 w-full md:w-[40%] hover:bg-blue-700 hover:cursor-pointer"
+            className="mt-2 px-4 py-2 border border-blue-600 rounded-md text-white bg-blue-600 w-full md:w-full hover:bg-blue-700 hover:cursor-pointer"
           >
             Save Region
           </button>
           <button
             onClick={handleResetRegion}
-            className="mt-2 px-4 py-2 border border-red-600 rounded-md text-white bg-red-600 w-full md:w-[40%] hover:bg-red-700 hover:cursor-pointer"
+            className="mt-2 px-4 py-2 border border-red-600 rounded-md text-white bg-red-600 w-full md:w-full hover:bg-red-700 hover:cursor-pointer"
           >
             Reset Region
           </button>

src/features/cameras/components/PlatePatch/SightingPatch.tsx

@@ -6,9 +6,9 @@ import SightingExitTable from "./SightingExitTable";
 
 const PlatePatch = () => {
   return (
-    <Card className="p-4 w-full md:w-[95%] md:row-start-4 md:col-span-3 md:h-[190%]">
+    <Card className="p-4 w-full max-h-[600px] overflow-hidden flex flex-col">
       <CardHeader title="Entry / Exit" />
-      <Tabs defaultIndex={1}>
+      <Tabs defaultIndex={1} className="flex-1 overflow-hidden flex flex-col">
         <TabList>
           <Tab>Entry Sightings</Tab>
           <Tab>Exit Sightings</Tab>

src/features/cameras/components/Video/VideoFeedGridPainter.tsx

@@ -93,7 +93,7 @@ const VideoFeedGridPainter = () => {
       const width = window.innerWidth;
 
       const aspectRatio = BACKEND_WIDTH / BACKEND_HEIGHT;
-      const newWidth = width * 0.55;
+      const newWidth = width * 0.6;
       const newHeight = newWidth / aspectRatio;
       setStageSize({ width: newWidth, height: newHeight });
     };

src/features/dashboard/components/DashboardGrid.tsx

@@ -35,7 +35,7 @@ const DashboardGrid = () => {
   const categoryC = statusCategories?.channelC ?? [];
 
   return (
-    <div className="grid grid-cols-1 md:grid-rows-2 md:grid-cols-2">
+    <div className="grid grid-cols-1 md:grid-rows-2 md:grid-cols-2 gap-4">
       <SystemStatusCard />
       <SystemHealthCard
         startTime={startTime}
@@ -46,7 +46,7 @@ const DashboardGrid = () => {
         dateUpdatedAt={dateUpdatedAt}
         refetch={refetch}
       />
-      <div className="grid grid-cols-1 md:col-span-2 md:grid-cols-3">
+      <div className="grid grid-cols-1 md:col-span-2 md:grid-cols-3 gap-x-4">
         <CameraStatus title="Camera A" category={categoryA} isError={isError} />
         <CameraStatus title="Camera B" category={categoryB} isError={isError} />
         <CameraStatus title="Camera C" category={categoryC} isError={isError} />

src/ui/Card.tsx

@@ -10,7 +10,7 @@ const Card = ({ children, className }: CardProps) => {
   return (
     <div
       className={clsx(
-        "bg-[#253445] rounded-lg mt-4 mx-2 shadow-2xl overflow-x-hidden md:row-span-1 px-2 border border-gray-600 ",
+        "bg-[#253445] rounded-lg mt-4  shadow-2xl overflow-x-hidden md:row-span-1 px-2 border border-gray-600 ",
         className,
       )}
     >