More messing about, and learning how it all works. Added time to header. Changed some padding. Changed video to preview not target detection. Added TODO list.

src/components/SightingsWidget/SightingWidgetDetails.tsx

@@ -9,6 +9,14 @@ const SightingWidgetDetails = ({
 }: SightingWidgetDetailsProps) => {
   return (
     <div className="grid grid-cols-2 md:grid-cols-4 gap-2 text-sm">
+      <div>
+        VRM:{" "}
+        <span className="opacity-90">{effectiveSelected?.vrm ?? "—"}</span>
+      </div>
+      <div>
+        Timestamp:{" "}
+        <span className="opacity-90">{effectiveSelected?.timeStamp ?? "—"}</span>
+      </div>
       <div>
         Make:{" "}
         <span className="opacity-90">{effectiveSelected?.make ?? "—"}</span>
@@ -17,6 +25,16 @@ const SightingWidgetDetails = ({
         Model:{" "}
         <span className="opacity-90">{effectiveSelected?.model ?? "—"}</span>
       </div>
+      <div>
+        Country:{" "}
+        <span className="opacity-90">{effectiveSelected?.countryCode ?? "—"}</span>
+      </div>
+      <div>
+        Seen:{" "}
+        <span className="opacity-90">
+          {effectiveSelected?.seenCount ?? "—"}
+        </span>
+      </div>
       <div>
         Colour:{" "}
         <span className="opacity-90">{effectiveSelected?.color ?? "—"}</span>
@@ -43,40 +61,8 @@ const SightingWidgetDetails = ({
           {effectiveSelected?.overviewSize ?? "—"}
         </span>
       </div>
-      <div>
-        Motion:{" "}
-        <span className="opacity-90">{effectiveSelected?.motion ?? "—"}</span>
-      </div>
-      <div>
-        Seen:{" "}
-        <span className="opacity-90">
-          {effectiveSelected?.seenCount ?? "—"}
-        </span>
-      </div>
-      <div>
-        Location:{" "}
-        <span className="opacity-90">
-          {effectiveSelected?.locationName ?? "—"}
-        </span>
-      </div>
-      <div>
-        Lane:{" "}
-        <span className="opacity-90">{effectiveSelected?.laneID ?? "—"}</span>
-      </div>
-      <div>
-        Radar:{" "}
-        <span className="opacity-90">
-          {effectiveSelected?.radarSpeed ?? "—"}
-        </span>
-      </div>
-      <div>
-        Track:{" "}
-        <span className="opacity-90">
-          {effectiveSelected?.trackSpeed ?? "—"}
-        </span>
-      </div>
       {effectiveSelected?.detailsUrl ? (
-        <div className="col-span-full">
+        <div className="col-span-half">
           <a
             href={effectiveSelected.detailsUrl}
             target="_blank"