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

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>