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">
+      <div className="w-full" {...handlers}>
-        <CardHeader title={title} icon={faCamera} />
         <SnapshotContainer side={side} settingsPage={settingsPage} />
       </div>
     </Card>

src/hooks/useCameraConfig.ts

@@ -1,8 +1,8 @@
 import { useMutation, useQuery } from "@tanstack/react-query";
 import { toast } from "sonner";
-import { CAM_BASE } from "../utils/config";
+import { OUTSIDE_CAM_BASE } from "../utils/config";
 
-const base_url = `${CAM_BASE}/api`;
+const base_url = `${OUTSIDE_CAM_BASE}/api`;
 console.log(base_url);
 
 const fetchCameraSideConfig = async ({ queryKey }: { queryKey: string[] }) => {

src/pages/FrontCamera.tsx

@@ -1,25 +1,15 @@
 import CameraSettings from "../components/CameraSettings/CameraSettings";
 import OverviewVideoContainer from "../components/FrontCameraSettings/OverviewVideoContainer";
 import { Toaster } from "sonner";
-import { useNavigate } from "react-router";
-import { useSwipeable } from "react-swipeable";
 
 const FrontCamera = () => {
-  const navigate = useNavigate();
-  const handlers = useSwipeable({
-    onSwipedLeft: () => navigate("/"),
-    trackMouse: true,
-  });
-
   return (
-    <div className="mx-auto grid grid-cols-1 sm:grid-cols-1 lg:grid-cols-2 gap-4 px-2 sm:px-4 lg:px-0 w-full">
+    <div className="mx-auto flex flex-col lg:flex-row gap-2 px-1 sm:px-2 lg:px-0 w-full min-h-screen">
-      <div {...handlers}>
       <OverviewVideoContainer
         title={"Front Camera"}
-          side="CameraFront"
+        side="CameraRear"
         settingsPage={true}
       />
-      </div>
       <CameraSettings title="Front Camera Settings" side="CameraFront" />
       <Toaster />
     </div>