- general fixes across the app

- minor fixes
- code clean up and improvements

src/features/cameras/components/CameraGrid.tsx

@@ -9,12 +9,12 @@ const CameraGrid = () => {
   const [tabIndex, setTabIndex] = useState(0);
 
   return (
-    <div className="grid grid-cols-1 md:grid-cols-3 gap-4 p-4 h-screen max-h-screen overflow-hidden">
+    <div className="grid grid-cols-1 md:grid-cols-3 md:gap-4 p-4 h-screen max-h-screen">
       <div className="col-span-2 flex flex-col gap-4">
-        <div className="shrink-0">
+        <div className="">
           <VideoFeedGridPainter />
         </div>
-        <div className="flex-1 overflow-hidden">
+        <div className="overflow-hidden">
           <PlatePatch />
         </div>
       </div>

src/features/cameras/components/CameraSettings/CameraPanel.tsx

@@ -39,7 +39,6 @@ const CameraPanel = ({ tabIndex }: CameraPanelProps) => {
         <Tab>Target Detection</Tab>
         <Tab>Camera Controls</Tab>
       </TabList>
-
       <TabPanel>
         <RegionSelector
           regions={regions}

src/features/cameras/components/CameraSettings/RegionSelector.tsx

@@ -107,7 +107,7 @@ const RegionSelector = ({ regions, selectedRegionIndex, mode, cameraFeedID }: Re
 
   return (
     <div className="flex flex-col gap-4 max-h-[50%]">
-      <div className="flex flex-row gap-3">
+      <div className="flex flex-col md:flex-row gap-3">
         <div className="p-2 border border-gray-600 rounded-lg flex flex-col h-50 w-full">
           <h2 className="text-2xl mb-2">Tools</h2>
           <div className="flex flex-col">

src/features/cameras/components/PlatePatch/SightingEntryTable.tsx

@@ -12,7 +12,7 @@ const SightingEntryTable = () => {
 
   if (isLoading) return <span className="text-slate-500">Loading Sighting data…</span>;
   return (
-    <div className="border border-gray-600 rounded-lg overflow-hidden m-2">
+    <div className="border border-gray-600 rounded-lg  m-2">
       <div className="overflow-y-auto ">
         <table className="w-full text-left text-sm">
           <thead className="bg-gray-700/50 text-gray-200 sticky top-0">

src/features/cameras/components/PlatePatch/SightingPatch.tsx

@@ -6,9 +6,9 @@ import SightingExitTable from "./SightingExitTable";
 
 const PlatePatch = () => {
   return (
-    <Card className="p-4 w-full max-h-[600px] overflow-hidden flex flex-col">
+    <Card className="p-4 w-full max-h-[600px] flex flex-col md:w-[95%]">
       <CardHeader title="Entry / Exit" />
-      <Tabs defaultIndex={1} className="flex-1 overflow-hidden flex flex-col">
+      <Tabs defaultIndex={1} className="flex-1 flex flex-col">
         <TabList>
           <Tab>Entry Sightings</Tab>
           <Tab>Exit Sightings</Tab>

src/features/cameras/components/Video/VideoFeedGridPainter.tsx

@@ -93,9 +93,16 @@ const VideoFeedGridPainter = () => {
       const width = window.innerWidth;
 
       const aspectRatio = BACKEND_WIDTH / BACKEND_HEIGHT;
+      console.log(window.innerWidth);
+      if (width < 768) {
+        const newWidth = width * 0.8;
+        const newHeight = newWidth / aspectRatio;
+        setStageSize({ width: newWidth, height: newHeight });
+      } else {
         const newWidth = width * 0.6;
         const newHeight = newWidth / aspectRatio;
         setStageSize({ width: newWidth, height: newHeight });
+      }
     };
 
     handleResize();

src/features/cameras/hooks/useGetVideoFeed.ts

@@ -2,7 +2,7 @@ import { useQuery } from "@tanstack/react-query";
 import { CAMBASE } from "../../../utils/config";
 
 const getfeed = async (cameraFeedID: "A" | "B" | "C" | null) => {
-  const response = await fetch(`${CAMBASE}TargetDetectionColour${cameraFeedID}-preview`, {
+  const response = await fetch(`${CAMBASE}/TargetDetectionColour${cameraFeedID}-preview`, {
     signal: AbortSignal.timeout(300000),
     cache: "no-store",
   });

src/features/output/components/OSDFields.tsx

@@ -2,6 +2,7 @@ import { Field, useFormikContext } from "formik";
 import { useOSDConfig } from "../hooks/useOSDConfig";
 import OSDFieldToggle from "./OSDFieldToggle";
 import type { OSDConfigFields } from "../../../types/types";
+import { toast } from "sonner";
 
 type OSDFieldsProps = {
   isOSDLoading: boolean;
@@ -15,7 +16,9 @@ const OSDFields = ({ isOSDLoading }: OSDFieldsProps) => {
 
   const handleSubmit = async (values: OSDConfigFields) => {
     const result = await osdMutation.mutateAsync(values);
-    console.log(result);
+    if (result?.id) {
+      toast.success("OSD Config updated successfully");
+    }
   };
 
   if (isOSDLoading) {

src/features/output/components/OutputForms.tsx

@@ -24,7 +24,7 @@ const OutputForms = () => {
   const includeCameraName = osdQuery?.data?.propIncludeCameraName?.value.toLowerCase() === "true";
   const overlayPosition = osdQuery?.data?.propOverlayPosition?.value;
   const OSDTimestampFormat = osdQuery?.data?.propTimestampFormat?.value;
-  console.log(includeVRM);
+
   const format = dispatcherQuery?.data?.propFormat?.value;
   const { optionalConstantsQuery, optionalConstantsMutation } = useOptionalConstants(format?.toLowerCase());
   const FFID = optionalConstantsQuery?.data?.propFeedIdentifier?.value;

src/features/output/hooks/useOSDConfig.ts

@@ -26,7 +26,6 @@ const postOSDConfig = async (data: OSDConfigFields) => {
     fields: fields,
   };
 
-  console.log(osdConfigPayload);
   const response = await fetch(`${CAMBASE}/api/update-config`, {
     method: "POST",
     body: JSON.stringify(osdConfigPayload),