- Enhanced responsiveness and layout adjustments across various components

Reviewed-on: #20

src/features/cameras/components/CameraGrid.tsx

@@ -12,7 +12,7 @@ const CameraGrid = () => {
 
   return (
     <>
-      <div className="grid grid-cols-1 md:grid-cols-3 md:gap-4 p-4 h-screen max-h-screen">
+      <div className="grid grid-cols-1 md:grid-cols-3 md:gap-4 p-4">
         <div className="col-span-2 flex flex-col gap-4">
           <div className="">
             <VideoFeedGridPainter />

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

@@ -19,7 +19,7 @@ const CameraSettings = ({
   setIsResetModalOpen,
 }: CameraSettingsProps) => {
   return (
-    <Card className="p-4 w-full h-full max-h-screen">
+    <Card className="p-4 w-full h-full ">
       <Tabs
         selectedTabClassName="bg-gray-300 text-gray-900 font-semibold border-none rounded-sm mb-1"
         className="react-tabs"

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

@@ -137,7 +137,7 @@ const RegionSelector = ({
   };
 
   return (
-    <div className="flex flex-col gap-4 max-h-[50%]">
+    <div className="flex flex-col gap-4 h-full overflow-y-auto mt-[5%]">
       <div className="flex flex-col md:flex-row gap-3">
         <div className="p-2 border border-gray-600 rounded-lg flex flex-col h-[10%] w-full">
           <h2 className="text-2xl mb-2">Tools</h2>
@@ -174,6 +174,27 @@ const RegionSelector = ({
               />
               <span className="text-xl">Erase mode</span>
             </label>
+            <label
+              htmlFor="zoomMode"
+              className={`p-4 border rounded-lg  mb-2
+            ${mode === "zoom" ? "border-gray-400 bg-[#202b36]" : "bg-[#253445] border-gray-700"}
+            hover:bg-[#202b36] hover:cursor-pointer`}
+            >
+              <input
+                id="zoomMode"
+                type="radio"
+                onChange={handleChange}
+                checked={mode === "zoom"}
+                value="zoom"
+                className="sr-only"
+              />
+              <div className="flex flex-col space-y-3">
+                <span className="text-xl">Enlarge image</span>
+                {mode === "zoom" && (
+                  <small className={`text-gray-400 italic`}>Use mouse to digitally zoom in and out</small>
+                )}
+              </div>
+            </label>
           </div>
         </div>
 
@@ -226,22 +247,25 @@ const RegionSelector = ({
 
       <div className="p-2 border border-gray-600 rounded-lg flex flex-col w-full">
         <h2 className="text-2xl mb-2">Actions</h2>
-        <div className="flex flex-col md:flex-row mx-auto gap-4 justify-center">
+        <div className="flex flex-col gap-4 justify-center">
-          <button
+          <div className="grid grid-cols-2 gap-2">
-            onClick={handleSaveclick}
+            <button
-            className="mt-2 px-4 py-2 border border-blue-600 rounded-md text-white bg-blue-600 w-full md:w-full hover:bg-blue-700 hover:cursor-pointer"
+              onClick={handleSaveclick}
-          >
+              className="mt-2 px-4 py-2 border border-blue-600 rounded-md text-white bg-blue-600 w-full hover:bg-blue-700 hover:cursor-pointer"
-            Save Region
+            >
-          </button>
+              Save Region
-          <button
+            </button>
-            onClick={handleResetRegion}
+            <button
-            className="mt-2 px-4 py-2 border border-red-600 rounded-md text-white bg-red-600 w-full md:w-full hover:bg-red-700 hover:cursor-pointer"
+              onClick={handleResetRegion}
-          >
+              className="mt-2 px-4 py-2 border border-red-600 rounded-md text-white bg-red-600 w-full hover:bg-red-700 hover:cursor-pointer"
-            Reset Region
+            >
-          </button>
+              Reset Region
+            </button>
+          </div>
+
           <button
             onClick={openResetModal}
-            className="mt-2 px-4 py-2 border border-red-600 rounded-md text-white bg-red-600 w-full md:w-full hover:bg-red-700 hover:cursor-pointer"
+            className="mt-2 px-4 py-2 border border-red-600 rounded-md text-white bg-red-600 w-full hover:bg-red-700 hover:cursor-pointer"
           >
             Reset All
           </button>

src/features/cameras/components/CameraSettings/cameraControls/CameraControls.tsx

@@ -29,7 +29,7 @@ const CameraControls = ({ cameraFeedID }: CameraControlsProps) => {
   };
 
   return (
-    <div className="p-2 border border-gray-600 rounded-lg flex flex-col w-full">
+    <div className="p-2 border border-gray-600 rounded-lg flex flex-col w-full mt-[5%]">
       <h2 className="text-2xl mb-4">Camera {cameraFeedID}</h2>
       <div className="w-[70%] ">
         <label htmlFor="zoom">Zoom {zoomLevel} </label>

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

@@ -12,8 +12,9 @@ const SightingEntryTable = () => {
 
   if (isLoading) return <span className="text-slate-500">Loading Sighting data…</span>;
   return (
-    <div className="border border-gray-600 rounded-lg  m-2">
+    <div className="border border-gray-600 rounded-lg m-2">
-      <div className="overflow-y-auto ">
+      {/* Desktop Table */}
+      <div className="hidden md:block overflow-y-auto">
         <table className="w-full text-left text-sm">
           <thead className="bg-gray-700/50 text-gray-200 sticky top-0">
             <tr>
@@ -37,6 +38,35 @@ const SightingEntryTable = () => {
           </tbody>
         </table>
       </div>
+
+      {/* Mobile Cards */}
+      <div className="md:hidden overflow-y-auto space-y-3 p-3">
+        {readings?.map((reading: DecodeReading) => (
+          <div
+            key={reading?.id}
+            className="bg-gray-800/30 rounded-lg p-4 space-y-2 border border-gray-700 hover:border-gray-600 transition-colors"
+          >
+            <div className="flex justify-between items-start">
+              <span className="font-mono font-semibold text-blue-400 text-xl">{reading?.vrm}</span>
+              <span className="text-gray-400 text-sm">Bay {reading?.laneID}</span>
+            </div>
+            <div className="flex justify-between text-sm">
+              <span className="text-gray-400">Seen Count:</span>
+              <span className="text-gray-300 font-semibold">{reading?.seenCount}</span>
+            </div>
+            <div className="pt-2 border-t border-gray-700 space-y-1 text-xs">
+              <div className="flex justify-between">
+                <span className="text-gray-500">First Seen:</span>
+                <span className="text-gray-400">{reading?.firstSeenTimeHumane}</span>
+              </div>
+              <div className="flex justify-between">
+                <span className="text-gray-500">Last Seen:</span>
+                <span className="text-gray-400">{reading?.lastSeenTimeHumane}</span>
+              </div>
+            </div>
+          </div>
+        ))}
+      </div>
     </div>
   );
 };

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

@@ -12,8 +12,9 @@ const SightingExitTable = () => {
 
   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 ">
+      {/* Desktop Table */}
+      <div className="hidden md:block overflow-y-auto">
         <table className="w-full text-left text-sm">
           <thead className="bg-gray-700/50 text-gray-200 sticky top-0">
             <tr>
@@ -37,6 +38,35 @@ const SightingExitTable = () => {
           </tbody>
         </table>
       </div>
+
+      {/* Mobile Cards */}
+      <div className="md:hidden overflow-y-auto space-y-3 p-3">
+        {readings?.map((reading: DecodeReading) => (
+          <div
+            key={reading?.id}
+            className="bg-gray-800/30 rounded-lg p-4 space-y-2 border border-gray-700 hover:border-gray-600 transition-colors"
+          >
+            <div className="flex justify-between items-start">
+              <span className="font-mono font-semibold text-red-400 text-xl">{reading?.vrm}</span>
+              <span className="text-gray-400 text-sm">Bay {reading?.laneID}</span>
+            </div>
+            <div className="flex justify-between text-sm">
+              <span className="text-gray-400">Seen Count:</span>
+              <span className="text-gray-300 font-semibold">{reading?.seenCount}</span>
+            </div>
+            <div className="pt-2 border-t border-gray-700 space-y-1 text-xs">
+              <div className="flex justify-between">
+                <span className="text-gray-500">First Seen:</span>
+                <span className="text-gray-400">{reading?.firstSeenTimeHumane}</span>
+              </div>
+              <div className="flex justify-between">
+                <span className="text-gray-500">Last Seen:</span>
+                <span className="text-gray-400">{reading?.lastSeenTimeHumane}</span>
+              </div>
+            </div>
+          </div>
+        ))}
+      </div>
     </div>
   );
 };

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

@@ -23,6 +23,10 @@ const VideoFeedGridPainter = () => {
   const { latestBitmapRef, isloading } = useCreateVideoSnapshot();
   const [stageSize, setStageSize] = useState({ width: BACKEND_WIDTH, height: BACKEND_HEIGHT });
   const isDrawingRef = useRef(false);
+  const [scale, setScale] = useState(1);
+  const [position, setPosition] = useState({ x: 0, y: 0 });
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  const stageRef = useRef<any>(null);
 
   const currentScale = stageSize.width / BACKEND_WIDTH;
   const size = BACKEND_CELL_SIZE * currentScale;
@@ -71,14 +75,14 @@ const VideoFeedGridPainter = () => {
   };
 
   const handleStageMouseDown = (e: KonvaEventObject<MouseEvent>) => {
-    if (!regions[selectedRegionIndex]) return;
+    if (!regions[selectedRegionIndex] || mode === "zoom") return;
     isDrawingRef.current = true;
     const pos = e.target.getStage()?.getPointerPosition();
     if (pos) paintCell(pos.x, pos.y);
   };
 
   const handleStageMouseMove = (e: KonvaEventObject<MouseEvent>) => {
-    if (!isDrawingRef.current) return;
+    if (!isDrawingRef.current || mode === "zoom") return;
     if (!regions[selectedRegionIndex]) return;
     const pos = e.target.getStage()?.getPointerPosition();
     if (pos) paintCell(pos.x, pos.y);
@@ -88,6 +92,38 @@ const VideoFeedGridPainter = () => {
     isDrawingRef.current = false;
   };
 
+  const handleMouseEnter = () => {
+    if (mode !== "zoom") return;
+    setScale(2);
+  };
+  const handleMouseLeave = () => {
+    document.body.style.cursor = "default";
+    setScale(1);
+    setPosition({ x: 0, y: 0 });
+  };
+  const handleMouseMove = (e: KonvaEventObject<MouseEvent>) => {
+    if (scale === 1) return;
+
+    const stage = e.target.getStage();
+    if (!stage) return;
+
+    const pointerPosition = stage.getPointerPosition();
+    if (!pointerPosition) return;
+
+    const newX = stageSize.width / 2 - pointerPosition.x * scale;
+    const newY = stageSize.height / 2 - pointerPosition.y * scale;
+
+    const maxX = 0;
+    const minX = stageSize.width - stageSize.width * scale;
+    const maxY = 0;
+    const minY = stageSize.height - stageSize.height * scale;
+
+    setPosition({
+      x: Math.max(minX, Math.min(maxX, newX)),
+      y: Math.max(minY, Math.min(maxY, newY)),
+    });
+  };
+
   useEffect(() => {
     const handleResize = () => {
       const width = window.innerWidth;
@@ -112,48 +148,57 @@ const VideoFeedGridPainter = () => {
 
   if (image === null || isloading) return <span className="text-slate-500">Loading Video feed…</span>;
   return (
-    <div
+    <div>
-      className={`w-full md:row-span-3 md:col-span-3 ${mode === "painter" ? "hover:cursor-crosshair" : ""} ${
-        mode === "eraser" ? "hover:cursor-pointer" : ""
-      }`}
-    >
       <Stage
+        ref={stageRef}
         width={stageSize.width}
         height={stageSize.height}
         onMouseDown={handleStageMouseDown}
         onMouseMove={handleStageMouseMove}
         onMouseUp={handleStageMouseUp}
         onMouseLeave={handleStageMouseUp}
-        className="max-w-[55%]"
+        className={`max-w-[55%] md:row-span-3 md:col-span-3 ${mode === "painter" ? "hover:cursor-crosshair" : ""} ${
+          mode === "eraser" ? "hover:cursor-pointer" : ""
+        }`}
       >
-        <Layer>
+        <Layer
+          scaleX={scale}
+          scaleY={scale}
+          onMouseEnter={handleMouseEnter}
+          onMouseLeave={handleMouseLeave}
+          onMouseMove={handleMouseMove}
+          x={position.x}
+          y={position.y}
+        >
           <Image image={image} width={stageSize.width} height={stageSize.height} classname={"rounded-lg"} />
         </Layer>
 
         <Layer ref={paintLayerRef} opacity={0.6}>
-          <Shape
+          {mode === "painter" || mode === "eraser" ? (
-            sceneFunc={(ctx, shape) => {
+            <Shape
-              const cells = paintedCells;
+              sceneFunc={(ctx, shape) => {
-              if (!cells || cells.size === 0 || !paintLayerRef.current) return;
+                const cells = paintedCells;
-              cells?.forEach((cell, key) => {
+                if (!cells || cells.size === 0 || !paintLayerRef.current) return;
-                const [rowStr, colStr] = key.split("-");
+                cells?.forEach((cell, key) => {
-                const row = Number(rowStr);
+                  const [rowStr, colStr] = key.split("-");
-                const col = Number(colStr);
+                  const row = Number(rowStr);
+                  const col = Number(colStr);
 
-                const x = col * (size + gap);
+                  const x = col * (size + gap);
-                const y = row * (size + gap);
+                  const y = row * (size + gap);
 
-                ctx.beginPath();
+                  ctx.beginPath();
-                ctx.rect(x, y, size, size);
+                  ctx.rect(x, y, size, size);
-                ctx.fillStyle = cell.colour;
+                  ctx.fillStyle = cell.colour;
-                ctx.fill();
+                  ctx.fill();
-              });
+                });
 
-              ctx.fillStrokeShape(shape);
+                ctx.fillStrokeShape(shape);
-            }}
+              }}
-            width={stageSize.width}
+              width={stageSize.width}
-            height={stageSize.height}
+              height={stageSize.height}
-          />
+            />
+          ) : null}
         </Layer>
       </Stage>
     </div>

src/features/cameras/hooks/useGetVideoFeed.ts

@@ -1,7 +1,7 @@
 import { useQuery } from "@tanstack/react-query";
 import { CAMBASE } from "../../../utils/config";
 
-const getfeed = async (cameraFeedID: "A" | "B" | "C" | null) => {
+const targetDectionFeed = async (cameraFeedID: "A" | "B" | "C" | null) => {
   const response = await fetch(`${CAMBASE}/TargetDetectionColour${cameraFeedID}-preview`, {
     signal: AbortSignal.timeout(300000),
     cache: "no-store",
@@ -12,12 +12,31 @@ const getfeed = async (cameraFeedID: "A" | "B" | "C" | null) => {
   return response.blob();
 };
 
-export const useGetVideoFeed = (cameraFeedID: "A" | "B" | "C" | null) => {
+const getVideoFeed = async (cameraFeedID: "A" | "B" | "C" | null) => {
-  const videoQuery = useQuery({
+  const response = await fetch(`${CAMBASE}/Camera${cameraFeedID}-preview`, {
+    signal: AbortSignal.timeout(300000),
+    cache: "no-store",
+  });
+  if (!response.ok) {
+    throw new Error(`Cannot reach endpoint (${response.status})`);
+  }
+  return response.blob();
+};
+
+export const useGetVideoFeed = (cameraFeedID: "A" | "B" | "C" | null, mode: string) => {
+  const targetDetectionQuery = useQuery({
     queryKey: ["getfeed", cameraFeedID],
-    queryFn: () => getfeed(cameraFeedID),
+    queryFn: () => targetDectionFeed(cameraFeedID),
     refetchInterval: 500,
+    enabled: mode !== "zoom",
   });
 
-  return { videoQuery };
+  const videoFeedQuery = useQuery({
+    queryKey: ["videoQuery", cameraFeedID, mode],
+    queryFn: () => getVideoFeed(cameraFeedID),
+    refetchInterval: 500,
+    enabled: mode === "zoom",
+  });
+
+  return { targetDetectionQuery, videoFeedQuery };
 };

src/features/cameras/hooks/useGetvideoSnapshots.ts

@@ -5,11 +5,19 @@ import { useCameraFeedContext } from "../../../app/context/CameraFeedContext";
 export const useCreateVideoSnapshot = () => {
   const { state } = useCameraFeedContext();
   const cameraFeedID = state?.cameraFeedID;
+  const mode = state.modeByCamera[cameraFeedID];
   const latestBitmapRef = useRef<ImageBitmap | null>(null);
-  const { videoQuery } = useGetVideoFeed(cameraFeedID);
+  const { targetDetectionQuery, videoFeedQuery } = useGetVideoFeed(cameraFeedID, mode);
 
-  const snapShot = videoQuery?.data;
+  let snapShot = targetDetectionQuery?.data;
-  const isloading = videoQuery.isPending;
+  const isloading = targetDetectionQuery.isPending;
+
+  const videoSnapShot = videoFeedQuery?.data;
+  const isVideoLoading = videoFeedQuery.isPending;
+
+  if (isVideoLoading === false && videoSnapShot && mode === "zoom") {
+    snapShot = videoSnapShot;
+  }
 
   useEffect(() => {
     async function createBitmap() {

src/features/dashboard/components/statusGridItem/StatusGridItem.tsx

@@ -21,7 +21,7 @@ const StatusGridItem = ({ title, statusCategory }: StatusGridItemProps) => {
   return (
     <>
       <div
-        className="flex flex-col border border-gray-600 p-4 rounded-lg mr-4 hover:bg-[#233241] hover:cursor-pointer"
+        className="flex flex-col border border-gray-600 p-4 rounded-lg hover:bg-[#233241] hover:cursor-pointer"
         onClick={() => setIsOpen(true)}
       >
         <h3 className="text-lg flex flex-row items-center">

src/features/dashboard/components/systemHealth/SystemHealth.tsx

@@ -39,11 +39,11 @@ const SystemHealth = ({ startTime, uptime, statuses, isLoading, isError, dateUpd
   }
   return (
     <div className="relative h-100 md:h-75 overflow-y-auto flex flex-col gap-4">
-      <div className="p-2 border-b border-gray-600 grid grid-cols-2 justify-between">
+      <div className="p-2 border-b border-gray-600 grid grid-cols-1 md:grid-cols-2 gap-2 justify-between">
-        <div className="flex flex-col border border-gray-600 p-4 rounded-lg mr-4 hover:bg-[#233241]">
+        <div className="flex flex-col border border-gray-600 p-4 rounded-lg hover:bg-[#233241]">
           <h3 className="text-lg">Start Time</h3> <span className="text-slate-300">{startTime}</span>
         </div>
-        <div className="flex flex-col border border-gray-600 p-4 rounded-lg mr-4 hover:bg-[#233241]">
+        <div className="flex flex-col border border-gray-600 p-4 rounded-lg hover:bg-[#233241]">
           <h3 className="text-lg">Up Time</h3> <span className="text-slate-300">{uptime}</span>
         </div>
       </div>

src/features/output/components/BearerTypeFields.tsx

@@ -4,7 +4,7 @@ import type { FormTypes } from "../../../types/types";
 const BearerTypeFields = () => {
   useFormikContext<FormTypes>();
   return (
-    <div className="flex flex-row justify-between">
+    <div className="flex flex-col md:flex-row space-y-4  justify-between">
       <label htmlFor="format" className="text-xl">
         Format
       </label>

src/features/output/components/ChannelCard.tsx

@@ -10,7 +10,7 @@ const ChannelCard = () => {
   const { bearerQuery } = useGetBearerConfig(values?.format?.toLowerCase() || "json");
   const outputData = bearerQuery?.data;
   return (
-    <Card className="p-4 h-150 md:h-full">
+    <Card className="p-4 h-full">
       <CardHeader title={`Channel (${values?.format})`} />
       <ChannelFields
         errors={errors}

src/features/output/components/ChannelFields.tsx

@@ -52,7 +52,7 @@ const ChannelFields = ({ errors, touched, values, outputData, onSetFieldValue }:
     <div className="flex flex-col gap-4 p-4">
       {values.format.toLowerCase() !== "ftp" ? (
         <>
-          <div className="flex flex-row justify-between">
+          <div className="flex flex-col md:flex-row space-y-4 justify-between">
             <label htmlFor="backoffice" className="block mb-2 font-medium">
               Back Office URL
             </label>
@@ -64,7 +64,7 @@ const ChannelFields = ({ errors, touched, values, outputData, onSetFieldValue }:
               className={`p-1.5 border border-gray-400 rounded-lg w-full md:w-60`}
             />
           </div>
-          <div className="flex flex-row justify-between">
+          <div className="flex flex-col md:flex-row space-y-4 justify-between">
             <label htmlFor="username" className="block mb-2 font-medium">
               Username
             </label>
@@ -76,7 +76,7 @@ const ChannelFields = ({ errors, touched, values, outputData, onSetFieldValue }:
               className={`p-1.5 border border-gray-400 rounded-lg w-full md:w-60`}
             />
           </div>
-          <div className="flex flex-row justify-between">
+          <div className="flex flex-col md:flex-row space-y-4 justify-between">
             <label htmlFor="password">Password</label>
             <Field
               name={"password"}
@@ -86,7 +86,7 @@ const ChannelFields = ({ errors, touched, values, outputData, onSetFieldValue }:
               className={`p-1.5 border border-gray-400 rounded-lg w-full md:w-60`}
             />
           </div>
-          <div className="flex flex-row justify-between">
+          <div className="flex flex-col md:flex-row space-y-4 justify-between">
             <label htmlFor="readTimeoutSeconds">Read Timeout Seconds</label>
             <Field
               name={"readTimeoutSeconds"}
@@ -96,7 +96,7 @@ const ChannelFields = ({ errors, touched, values, outputData, onSetFieldValue }:
               className={`p-1.5 border border-gray-400  rounded-lg w-full md:w-60`}
             />
           </div>
-          <div className="flex flex-row justify-between">
+          <div className="flex flex-col md:flex-row space-y-4 justify-between">
             <label htmlFor="connectTimeoutSeconds">Connect Timeout Seconds</label>
             <Field
               name={"connectTimeoutSeconds"}
@@ -105,7 +105,7 @@ const ChannelFields = ({ errors, touched, values, outputData, onSetFieldValue }:
               className={`p-1.5 border border-gray-400 rounded-lg w-full md:w-60`}
             />
           </div>
-          <div className="flex flex-row justify-between">
+          <div className="flex flex-col md:flex-row space-y-4 justify-between">
             <label htmlFor="overviewQuality">Overview quality and scale</label>
             <Field
               name={"overviewQuality"}
@@ -118,7 +118,7 @@ const ChannelFields = ({ errors, touched, values, outputData, onSetFieldValue }:
               <option value={"LOW"}>Low</option>
             </Field>
           </div>
-          <div className="flex flex-row justify-between">
+          <div className="flex flex-col md:flex-row space-y-4 justify-between">
             <label htmlFor="cropSizeFactor">Crop Size Factor</label>
             <Field
               name={"cropSizeFactor"}
@@ -138,7 +138,7 @@ const ChannelFields = ({ errors, touched, values, outputData, onSetFieldValue }:
                 <h2 className="font-bold">{values.format} Constants</h2>
               </div>
 
-              <div className="flex flex-row justify-between">
+              <div className="flex flex-col md:flex-row space-y-4 justify-between">
                 <label htmlFor="SCID">Source ID / Camera ID</label>
                 <Field
                   name={"SCID"}
@@ -150,7 +150,7 @@ const ChannelFields = ({ errors, touched, values, outputData, onSetFieldValue }:
                   } rounded-lg w-full md:w-60`}
                 />
               </div>
-              <div className="flex flex-row justify-between">
+              <div className="flex flex-col md:flex-row space-y-4 justify-between">
                 <label htmlFor="timestampSource">Timestamp Source</label>
                 <Field
                   name={"timestampSource"}
@@ -162,7 +162,7 @@ const ChannelFields = ({ errors, touched, values, outputData, onSetFieldValue }:
                   <option value={"LOCAL"}>Local</option>
                 </Field>
               </div>
-              <div className="flex flex-row justify-between">
+              <div className="flex flex-col md:flex-row space-y-4 justify-between">
                 <label htmlFor="GPSFormat">GPS Format</label>
                 <Field
                   name={"GPSFormat"}
@@ -182,7 +182,7 @@ const ChannelFields = ({ errors, touched, values, outputData, onSetFieldValue }:
                 <div className="border-b border-gray-500 my-3">
                   <h2 className="font-bold">{values.format} Constants</h2>
                 </div>
-                <div className="flex flex-row justify-between">
+                <div className="flex flex-col md:flex-row space-y-4 justify-between">
                   <label htmlFor="FFID">Feed ID / Force ID</label>
                   <Field
                     name={"FFID"}
@@ -194,7 +194,7 @@ const ChannelFields = ({ errors, touched, values, outputData, onSetFieldValue }:
                     } rounded-lg w-full md:w-60`}
                   />
                 </div>
-                <div className="flex flex-row justify-between">
+                <div className="flex flex-col md:flex-row space-y-4 justify-between">
                   <label htmlFor="SCID">Source ID / Camera ID</label>
                   <Field
                     name={"SCID"}
@@ -206,7 +206,7 @@ const ChannelFields = ({ errors, touched, values, outputData, onSetFieldValue }:
                     } rounded-lg w-full md:w-60`}
                   />
                 </div>
-                <div className="flex flex-row justify-between">
+                <div className="flex flex-col md:flex-row space-y-4 justify-between">
                   <label htmlFor="timestampSource">Timestamp Source</label>
                   <Field
                     name={"timestampSource"}
@@ -218,7 +218,7 @@ const ChannelFields = ({ errors, touched, values, outputData, onSetFieldValue }:
                     <option value={"LOCAL"}>Local</option>
                   </Field>
                 </div>
-                <div className="flex flex-row justify-between">
+                <div className="flex flex-col md:flex-row space-y-4 justify-between">
                   <label htmlFor="GPSFormat">GPS Format</label>
                   <Field
                     name={"GPSFormat"}
@@ -235,7 +235,7 @@ const ChannelFields = ({ errors, touched, values, outputData, onSetFieldValue }:
                 <div className="border-b border-gray-500 my-3">
                   <h2 className="font-bold">{values.format} Lane ID Config</h2>
                 </div>
-                <div className="flex flex-row justify-between">
+                <div className="flex flex-col md:flex-row space-y-4 justify-between">
                   <label htmlFor="LID1">Lane ID 1 (Camera A)</label>
                   <Field
                     name={"LID1"}
@@ -247,7 +247,7 @@ const ChannelFields = ({ errors, touched, values, outputData, onSetFieldValue }:
                     } rounded-lg w-full md:w-60`}
                   />
                 </div>
-                <div className="flex flex-row justify-between">
+                <div className="flex flex-col md:flex-row space-y-4 justify-between">
                   <label htmlFor="LID2">Lane ID 2 (Camera B)</label>
                   <Field
                     name={"LID2"}
@@ -272,7 +272,10 @@ const ChannelFields = ({ errors, touched, values, outputData, onSetFieldValue }:
                   {values?.customFields?.map((_, index) => {
                     // if (!field.value) return null;
                     return (
-                      <div key={index} className="flex flex-row justify-between items-center mb-4 gap-2">
+                      <div
+                        key={index}
+                        className="flex flex-col md:flex-row space-y-4 md:space-y-0 justify-between items-center mb-4 gap-2"
+                      >
                         <Field
                           name={`customFields.${index}.label`}
                           className="p-2 border border-gray-400 rounded-lg w-full max-w-xs"
@@ -287,23 +290,25 @@ const ChannelFields = ({ errors, touched, values, outputData, onSetFieldValue }:
                       </div>
                     );
                   })}
-                  <button
+                  <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
-                    type="button"
-                    onClick={() => arrayHelpers.push({ label: "", value: "" })}
-                    className={`mr-2 border p-2 rounded-lg hover:bg-gray-700 hover:cursor-pointer ${values?.customFields && values?.customFields?.length >= 6 ? "opacity-50 cursor-not-allowed" : ""}`}
-                    disabled={values?.customFields && values?.customFields?.length >= 6}
-                  >
-                    Add Custom Field
-                  </button>
-                  {values?.customFields && values?.customFields?.length > 0 && (
                     <button
                       type="button"
-                      onClick={() => arrayHelpers.pop()}
+                      onClick={() => arrayHelpers.push({ label: "", value: "" })}
-                      className="border p-2 rounded-lg hover:bg-gray-700 hover:cursor-pointer"
+                      className={`border p-2 rounded-lg hover:bg-gray-700 hover:cursor-pointer ${values?.customFields && values?.customFields?.length >= 6 ? "opacity-50 cursor-not-allowed" : ""}`}
+                      disabled={values?.customFields && values?.customFields?.length >= 6}
                     >
-                      Remove Custom Field
+                      Add Custom Field
                     </button>
-                  )}
+                    {values?.customFields && values?.customFields?.length > 0 && (
+                      <button
+                        type="button"
+                        onClick={() => arrayHelpers.pop()}
+                        className="border p-2 rounded-lg hover:bg-gray-700 hover:cursor-pointer"
+                      >
+                        Remove Custom Field
+                      </button>
+                    )}
+                  </div>
                 </>
               )}
             </FieldArray>

src/features/output/components/OSDFields.tsx

@@ -34,7 +34,7 @@ const OSDFields = ({ isOSDLoading }: OSDFieldsProps) => {
               <OSDFieldToggle key={key} value={key} label={key.replace("include", "Include ")} />
             ))}
           </div>
-          <div className="flex flex-row justify-between">
+          <div className="flex flex-col md:flex-row space-y-4 justify-between">
             <label htmlFor="overlayPosition">Overlay Position</label>
             <Field
               as="select"
@@ -45,7 +45,7 @@ const OSDFields = ({ isOSDLoading }: OSDFieldsProps) => {
               <option value="Bottom">Bottom</option>
             </Field>
           </div>
-          <div className="flex flex-row justify-between">
+          <div className="flex flex-col md:flex-row space-y-4 justify-between">
             <label htmlFor="OSDTimestampFormat">OSD Timestamp Format</label>
             <Field
               as="select"

src/features/settings/components/SystemConfig.tsx

@@ -65,8 +65,8 @@ const SystemConfig = () => {
   return (
     <Formik initialValues={initialValues} onSubmit={handleSubmit} enableReinitialize>
       {({ values }) => (
-        <Form>
+        <Form className="flex flex-col space-y-4">
-          <div className="flex flex-row justify-between items-center mb-4">
+          <div className="flex flex-col md:flex-row space-y-4 justify-between">
             <label htmlFor="deviceName">Device Name</label>
             <Field
               name="deviceName"
@@ -76,7 +76,7 @@ const SystemConfig = () => {
               autoComplete="off"
             />
           </div>
-          <div className="flex flex-row justify-between items-center mb-4">
+          <div className="flex flex-col md:flex-row space-y-4 justify-between">
             <label htmlFor="timeZone">Timezone</label>
             <Field
               name="timeZone"
@@ -91,7 +91,7 @@ const SystemConfig = () => {
               ))}
             </Field>
           </div>
-          <div className="flex flex-row justify-between items-center mb-4">
+          <div className="flex flex-col md:flex-row space-y-4 justify-between">
             <label htmlFor="timeSource">Time Source</label>
             <Field
               name="timeSource"
@@ -106,8 +106,7 @@ const SystemConfig = () => {
               ))}
             </Field>
           </div>
-
+          <div className="flex flex-col md:flex-row space-y-4 justify-between">
-          <div className="flex flex-row justify-between items-center mb-4">
             <label htmlFor="SNTPServer">SNTP Server</label>
             <Field
               name="SNTPServer"
@@ -117,7 +116,7 @@ const SystemConfig = () => {
               autoComplete="off"
             />
           </div>
-          <div className="flex flex-row justify-between items-center mb-4">
+          <div className="flex flex-col md:flex-row space-y-4 justify-between">
             <label htmlFor="SNTPInterval">SNTP Interval</label>
             <Field
               name="SNTPInterval"
@@ -127,7 +126,7 @@ const SystemConfig = () => {
               autoComplete="off"
             />
           </div>
-          <div className="flex flex-row justify-between items-center mb-4">
+          <div className="flex flex-col md:flex-row space-y-4 justify-between">
             <label htmlFor="subnetMask">Subnet Mask</label>
             <Field
               name="subnetMask"
@@ -137,7 +136,7 @@ const SystemConfig = () => {
               autoComplete="off"
             />
           </div>
-          <div className="flex flex-row justify-between items-center mb-4">
+          <div className="flex flex-col md:flex-row space-y-4 justify-between">
             <label htmlFor="ipAddress">IP Address</label>
             <Field
               name="ipAddress"
@@ -147,7 +146,7 @@ const SystemConfig = () => {
               autoComplete="off"
             />
           </div>
-          <div className="flex flex-row justify-between items-center mb-4">
+          <div className="flex flex-col md:flex-row space-y-4 justify-between">
             <label htmlFor="gateway">Gateway</label>
             <Field
               name="gateway"
@@ -157,7 +156,7 @@ const SystemConfig = () => {
               autoComplete="off"
             />
           </div>
-          <div className="flex flex-row justify-between items-center mb-4">
+          <div className="flex flex-col md:flex-row space-y-4 justify-between">
             <label htmlFor="primaryServer">Primary DNS Server</label>
             <Field
               name="primaryServer"
@@ -167,7 +166,7 @@ const SystemConfig = () => {
               autoComplete="off"
             />
           </div>
-          <div className="flex flex-row justify-between items-center mb-4">
+          <div className="flex flex-col md:flex-row space-y-4 justify-between">
             <label htmlFor="secondaryServer">Secondary DNS Server</label>
             <Field
               name="secondaryServer"

src/ui/Header.tsx

@@ -1,15 +1,29 @@
+import { useState } from "react";
 import { Link } from "@tanstack/react-router";
 import Logo from "/MAV.svg";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faBars } from "@fortawesome/free-solid-svg-icons";
 
 const Header = () => {
+  const [isMenuOpen, setIsMenuOpen] = useState(false);
+  const toggleMenu = () => {
+    setIsMenuOpen(!isMenuOpen);
+  };
   return (
-    <header className="bg-[#253445] p-4 flex border-b border-gray-500 justify-between items-center">
+    <nav className="bg-[#253445] p-4 flex border-b border-gray-500 justify-between items-center md:flex-row flex-col">
-      <div className="w-28">
+      <div className="flex flex-row justify-between w-full items-center">
-        <Link to={"/"}>
+        <div className="w-28">
-          <img src={Logo} alt="Logo" width={150} height={150} />
+          <Link to={"/"} onClick={() => setIsMenuOpen(false)}>
-        </Link>
+            <img src={Logo} alt="Logo" width={150} height={150} />
+          </Link>
+        </div>
+
+        <div className="hover:cursor-pointer md:hidden" onClick={toggleMenu}>
+          <FontAwesomeIcon icon={faBars} />
+        </div>
       </div>
-      <div className="flex gap-4 text-lg items-center">
+
+      <div className="md:flex hidden gap-4 text-lg items-center">
         <Link
           to="/"
           className="[&.active]:font-bold [&.active]:bg-gray-700 p-2 rounded-lg flex items-center gap-2 hover:bg-gray-700"
@@ -37,7 +51,26 @@ const Header = () => {
           Settings
         </Link>
       </div>
-    </header>
+      {/* mobile menu */}
+      {isMenuOpen && (
+        <div className="md:hidden flex flex-col w-full mt-4 gap-4 text-lg items-end">
+          <Link to="/" className="" onClick={toggleMenu}>
+            {/* <FontAwesomeIcon icon={faGaugeHigh} /> */}
+            Dashboard
+          </Link>
+          <Link to="/baywatch" className="" onClick={toggleMenu}>
+            {/* <FontAwesomeIcon icon={faGaugeHigh} /> */}
+            Cameras
+          </Link>
+          <Link to="/output" className="" onClick={toggleMenu}>
+            Output
+          </Link>
+          <Link to="/settings" className="" onClick={toggleMenu}>
+            Settings
+          </Link>
+        </div>
+      )}
+    </nav>
   );
 };
 

src/ui/ModalComponent.tsx

@@ -23,6 +23,14 @@ const ModalComponent = ({ isModalOpen, children, close }: ModalComponentProps) =
         },
       }}
     >
+      <div className="flex justify-end">
+        <button
+          onClick={close}
+          className="bg-gray-700 hover:bg-gray-600 text-white font-bold py-2 px-4 rounded-lg mb-4"
+        >
+          Close
+        </button>
+      </div>
       {children}
     </Modal>
   );