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

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>
   );
 };