- improved ui for region selector and camera settings

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

@@ -2,7 +2,8 @@ import Card from "../../../../ui/Card";
 import { Tab, Tabs, TabList, TabPanel } from "react-tabs";
 import "react-tabs/style/react-tabs.css";
 import RegionSelector from "./RegionSelector";
-import type { Region } from "../../../../types/types";
+import type { PaintedCell, Region } from "../../../../types/types";
+import type { RefObject } from "react";
 
 type CameraSettingsProps = {
   regions: Region[];
@@ -13,6 +14,7 @@ type CameraSettingsProps = {
   onSelectMode: (mode: string) => void;
   setTabIndex: (tabIndex: number) => void;
   tabIndex: number;
+  paintedCells: RefObject<Map<string, PaintedCell>>;
 };
 
 const CameraSettings = ({
@@ -24,9 +26,10 @@ const CameraSettings = ({
   onSelectMode,
   tabIndex,
   setTabIndex,
+  paintedCells,
 }: CameraSettingsProps) => {
   return (
-    <Card className="p-4 max-h-screen col-span-3">
+    <Card className="p-4 col-span-3 row-span-5 col-start-3 md:col-span-3 md:row-span-5 max-h-screen overflow-auto">
       <Tabs
         selectedTabClassName="bg-gray-300 text-gray-900 font-semibold border-none rounded-sm mb-1"
         className="react-tabs"
@@ -46,6 +49,7 @@ const CameraSettings = ({
             onChangeRegionColour={onChangeRegionColour}
             mode={mode}
             onSelectMode={onSelectMode}
+            paintedCells={paintedCells}
           />
         </TabPanel>
         <TabPanel>