started redesign on dashbaord. changed vite basename to /Mobile, currently folkstone address

src/components/CameraSettings/CameraSettings.tsx

@@ -15,7 +15,7 @@ const CameraSettings = ({ title, side }: { title: string; side: string }) => {
   console.log(updateCameraConfigError);
 
   return (
-    <Card>
+    <Card className="px-4 py-4">
       {isPending && <>Loading camera config</>}
       {isError && <>Error fetching camera config</>}
       <div className="relative flex flex-col space-y-3 h-full">

src/components/FrontCameraOverview/FrontCameraOverviewCard.tsx

@@ -1,16 +1,11 @@
 import clsx from "clsx";
 import Card from "../UI/Card";
-import CardHeader from "../UI/CardHeader";
-import { faCamera } from "@fortawesome/free-regular-svg-icons";
 import { useSwipeable } from "react-swipeable";
 import { useNavigate } from "react-router";
 import { useOverviewVideo } from "../../hooks/useOverviewVideo";
 import SightingOverview from "../SightingOverview/SightingOverview";
-import { useSightingFeedContext } from "../../context/SightingFeedContext";
 
-type CardProps = React.HTMLAttributes<HTMLDivElement>;
-
-const FrontCameraOverviewCard = ({ className }: CardProps) => {
+const FrontCameraOverviewCard = () => {
   useOverviewVideo();
   const navigate = useNavigate();
   const handlers = useSwipeable({
@@ -18,23 +13,15 @@ const FrontCameraOverviewCard = ({ className }: CardProps) => {
 
     trackMouse: true,
   });
-  const { mostRecent } = useSightingFeedContext();
 
   return (
     <Card
       className={clsx(
-        "relative min-h-[40vh] md:min-h-[60vh] h-auto",
-        className
+        "relative min-h-[40vh] md:min-h-[60vh] max-h-[80vh] lg:w-[70%] overflow-y-hidden"
       )}
     >
-      <div className="flex flex-col space-y-3 h-full" {...handlers}>
-        <CardHeader
-          title="Front Overview"
-          icon={faCamera}
-          sighting={mostRecent}
-        />
+      <div className="lg:overflow-hidden" {...handlers}>
         <SightingOverview />
-        {/* <SnapshotContainer side="TargetDetectionFront" /> */}
       </div>
     </Card>
   );

src/components/FrontCameraSettings/OverviewVideoContainer.tsx

@@ -14,7 +14,11 @@ const OverviewVideoContainer = ({
   settingsPage?: boolean;
 }) => {
   return (
-    <Card className={clsx("min-h-[40vh] md:min-h-[60vh] h-auto")}>
+    <Card
+      className={clsx(
+        "min-h-[40vh] md:min-h-[60vh] max-h-[80vh] h-auto overflow-y-hidden"
+      )}
+    >
       <div className="relative flex flex-col space-y-3 h-full">
         <CardHeader title={title} icon={faCamera} />
         <SnapshotContainer side={side} settingsPage={settingsPage} />

src/components/PlateStack/NumberPlate.tsx

@@ -4,21 +4,53 @@ import { formatNumberPlate } from "../../utils/utils";
 type NumberPlateProps = {
   vrm?: string | undefined;
   motion?: boolean;
+  size?: "xs" | "sm" | "md" | "lg";
 };
 
-const NumberPlate = ({ motion, vrm }: NumberPlateProps) => {
+const NumberPlate = ({ motion, vrm, size }: NumberPlateProps) => {
+  let options = {
+    plateWidth: "w-[14rem]",
+    textSize: "text-2xl",
+    borderWidth: "border-6",
+  };
+
+  switch (size) {
+    case "xs":
+      options = {
+        plateWidth: "w-[8rem]",
+        textSize: "text-md",
+        borderWidth: "border-4",
+      };
+      break;
+    case "sm":
+      options = {
+        plateWidth: "w-[10rem]",
+        textSize: "text-lg",
+        borderWidth: "border-4",
+      };
+      break;
+    case "lg":
+      options = {
+        plateWidth: "w-[16rem]",
+        textSize: "text-3xl",
+        borderWidth: "border-6",
+      };
+      break;
+  }
+
   return (
     <div
-      className={`relative w-[16rem] border-6 border-black rounded-xl text-nowrap
-  text-black px-6 py-2
-  ${motion ? "bg-yellow-400" : "bg-white"}
-  `}
+      className={`relative ${options.plateWidth} ${
+        options.borderWidth
+      } border-black rounded-xl text-nowrap
+        text-black px-6 py-2
+        ${motion ? "bg-yellow-400" : "bg-white"}`}
     >
       <div>
         <div className="absolute inset-y-0 left-0 bg-blue-600 w-8 flex flex-col">
           <GB />
         </div>
-        <p className="pl-4 font-extrabold text-3xl text-right">
+        <p className={`pl-4 font-extrabold ${options.textSize} text-right`}>
           {vrm && formatNumberPlate(vrm)}
         </p>
       </div>

src/components/SightingOverview/SightingOverview.tsx

@@ -1,10 +1,10 @@
 import { useCallback, useRef, useState } from "react";
 import { BLANK_IMG } from "../../utils/utils";
-import SightingWidgetDetails from "../SightingsWidget/SightingWidgetDetails";
 import { useOverviewOverlay } from "../../hooks/useOverviewOverlay";
 import { useSightingFeedContext } from "../../context/SightingFeedContext";
 import { useHiDPICanvas } from "../../hooks/useHiDPICanvas";
 import NavigationArrow from "../UI/NavigationArrow";
+import NumberPlate from "../PlateStack/NumberPlate";
 
 const SightingOverview = () => {
   const [overlayMode, setOverlayMode] = useState<0 | 1 | 2>(0);
@@ -27,42 +27,34 @@ const SightingOverview = () => {
   if (isError) return <p>An error occurred, Cannot display footage</p>;
 
   return (
-    <div className="flex flex-col">
-      <div className="grid gap-3">
-        <NavigationArrow side={side} />
-        <div className="inline-block w-full mx-auto">
-          <div className="relative aspect-[1280/800]">
-            <img
-              ref={imgRef}
-              onLoad={() => {
-                sync();
-                setOverlayMode((m) => m);
-              }}
-              src={mostRecent?.overviewUrl || BLANK_IMG}
-              alt="overview"
-              className="absolute inset-0 w-full h-full object-contain cursor-pointer z-10 "
-              onClick={onOverviewClick}
-              style={{
-                display: mostRecent?.overviewUrl ? "block" : "none",
-              }}
-            />
-            <canvas
-              ref={canvasRef}
-              className="absolute inset-0 w-full h-full object-contain z-20 pointer-events-none "
-            />
-          </div>
-        </div>
-        <div className="text-xs opacity-80">
-          Overlay:{" "}
-          {overlayMode === 0
-            ? "Off"
-            : overlayMode === 1
-            ? "Plate box"
-            : "Track + box"}{" "}
-          (click image to toggle)
+    <div className="flex flex-col md:flex-row">
+      {mostRecent && (
+        <div className="z-30 px-1 pt-2">
+          <NumberPlate vrm={mostRecent?.vrm} size="sm" />
         </div>
+      )}
+
+      <NavigationArrow side={side} />
+      <div className="w-full">
+        <img
+          ref={imgRef}
+          onLoad={() => {
+            sync();
+            setOverlayMode((m) => m);
+          }}
+          src={mostRecent?.overviewUrl || BLANK_IMG}
+          alt="overview"
+          className="absolute inset-0 object-contain cursor-pointer z-10 min-h-[100%] rounded-lg"
+          onClick={onOverviewClick}
+          style={{
+            display: mostRecent?.overviewUrl ? "block" : "none",
+          }}
+        />
+        <canvas
+          ref={canvasRef}
+          className="absolute inset-0 object-contain z-20 pointer-events-none "
+        />
       </div>
-      <SightingWidgetDetails effectiveSelected={mostRecent} />
     </div>
   );
 };

src/components/SightingsWidget/SightingWidget.tsx

@@ -32,7 +32,7 @@ type SightingHistoryProps = {
   pollMs?: number;
   autoSelectLatest?: boolean;
   title: string;
-  className: string;
+  className?: string;
 };
 
 export default function SightingHistoryWidget({
@@ -113,7 +113,12 @@ export default function SightingHistoryWidget({
   };
   return (
     <>
-      <Card className={clsx("overflow-y-auto h-100", className)}>
+      <Card
+        className={clsx(
+          "overflow-y-auto min-h-[40vh] md:min-h-[60vh] max-h-[80vh] lg:w-[40%]",
+          className
+        )}
+      >
         <CardHeader title={title} />
         <div className="flex flex-col gap-3 ">
           {/* Rows */}

src/components/UI/Card.tsx

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

src/components/UI/CardHeader.tsx

@@ -5,7 +5,7 @@ import NumberPlate from "../PlateStack/NumberPlate";
 import type { SightingType } from "../../types/types";
 
 type CameraOverviewHeaderProps = {
-  title: string;
+  title?: string;
   icon?: IconProp;
   img?: string;
   sighting?: SightingType | null;