- Enhanced responsiveness and layout adjustments across various components

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>
@@ -247,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">
-          <button
-            onClick={handleSaveclick}
-            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"
-          >
-            Save Region
-          </button>
-          <button
-            onClick={handleResetRegion}
-            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"
-          >
-            Reset Region
-          </button>
+        <div className="flex flex-col gap-4 justify-center">
+          <div className="grid grid-cols-2 gap-2">
+            <button
+              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>
+            <button
+              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>
+          </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="overflow-y-auto ">
+    <div className="border border-gray-600 rounded-lg m-2">
+      {/* 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="overflow-y-auto ">
+    <div className="border border-gray-600 rounded-lg m-2">
+      {/* 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>
   );
 };