redesigned camera settings page, left the minimum height at 100%, open to change

src/components/CameraOverview/SnapshotContainer.tsx

@@ -16,9 +16,14 @@ export const SnapshotContainer = ({
   if (isPending) return <>Loading...</>;
 
   return (
-    <div className="relative w-full aspect-video">
+    <div className="flex flex-col md:flex-row">
       <NavigationArrow side={side} settingsPage={settingsPage} />
-      <canvas ref={canvasRef} className="w-full h-full object-contain block" />
+      <div className="w-full">
+        <canvas
+          ref={canvasRef}
+          className="absolute inset-0 object-contain min-h-[100%] z-20"
+        />
+      </div>
     </div>
   );
 };

src/components/CameraSettings/CameraSettingFields.tsx

@@ -53,7 +53,7 @@ const CameraSettingFields = ({
       enableReinitialize
     >
       {({ errors, touched }) => (
-        <Form className="flex flex-col space-y-4 p-2">
+        <Form className="flex flex-col space-y-6 p-2">
           <div className="flex flex-col space-y-2 relative">
             <label htmlFor="friendlyName">Name</label>
             {touched.friendlyName && errors.friendlyName && (

src/components/CameraSettings/CameraSettings.tsx

@@ -15,10 +15,10 @@ const CameraSettings = ({ title, side }: { title: string; side: string }) => {
   console.log(updateCameraConfigError);
 
   return (
-    <Card className="px-4 py-4">
+    <Card className="overflow-hidden min-h-[40vh] md:min-h-[60vh] max-h-[80vh] lg:w-[40%] p-4">
       {isPending && <>Loading camera config</>}
       {isError && <>Error fetching camera config</>}
-      <div className="relative flex flex-col space-y-3 h-full">
+      <div className="relative flex flex-col space-y-3">
         <CardHeader title={title} icon={faWrench} />
         <CameraSettingFields
           initialData={data}

src/components/FrontCameraOverview/FrontCameraOverviewCard.tsx

@@ -10,7 +10,6 @@ const FrontCameraOverviewCard = () => {
   const navigate = useNavigate();
   const handlers = useSwipeable({
     onSwipedRight: () => navigate("/front-camera-settings"),
-
     trackMouse: true,
   });
 
@@ -20,7 +19,7 @@ const FrontCameraOverviewCard = () => {
         "relative min-h-[40vh] md:min-h-[60vh] max-h-[80vh] lg:w-[70%] overflow-y-hidden"
       )}
     >
-      <div className="lg:overflow-hidden" {...handlers}>
+      <div className="w-full" {...handlers}>
         <SightingOverview />
       </div>
     </Card>

src/components/FrontCameraSettings/OverviewVideoContainer.tsx

@@ -1,11 +1,10 @@
 import clsx from "clsx";
 import { SnapshotContainer } from "../CameraOverview/SnapshotContainer";
-import { faCamera } from "@fortawesome/free-regular-svg-icons";
 import Card from "../UI/Card";
-import CardHeader from "../UI/CardHeader";
+import { useNavigate } from "react-router";
+import { useSwipeable } from "react-swipeable";
 
 const OverviewVideoContainer = ({
-  title,
   side,
   settingsPage,
 }: {
@@ -13,14 +12,18 @@ const OverviewVideoContainer = ({
   side: string;
   settingsPage?: boolean;
 }) => {
+  const navigate = useNavigate();
+  const handlers = useSwipeable({
+    onSwipedLeft: () => navigate("/"),
+    trackMouse: true,
+  });
   return (
     <Card
       className={clsx(
-        "min-h-[40vh] md:min-h-[60vh] max-h-[80vh] h-auto overflow-y-hidden"
+        "relative min-h-[40vh] md:min-h-[60vh] max-h-[80vh] lg:w-[70%] overflow-y-hidden"
       )}
     >
-      <div className="relative flex flex-col space-y-3 h-full">
-        <CardHeader title={title} icon={faCamera} />
+      <div className="w-full" {...handlers}>
         <SnapshotContainer side={side} settingsPage={settingsPage} />
       </div>
     </Card>