From fd55d9cba1a2f29a8b0448cac8cdaad56d9d9f8e Mon Sep 17 00:00:00 2001
From: Josh Hawkins <32435876+hawkeye217@users.noreply.github.com>
Date: Wed, 26 Nov 2025 06:45:16 -0600
Subject: [PATCH] small spacing tweaks for tablets

---
 web/src/views/settings/MasksAndZonesView.tsx |  6 +++++-
 web/src/views/settings/MotionTunerView.tsx   |  9 ++++++++-
 web/src/views/settings/TriggerView.tsx       | 10 ++++++++--
 3 files changed, 21 insertions(+), 4 deletions(-)

diff --git a/web/src/views/settings/MasksAndZonesView.tsx b/web/src/views/settings/MasksAndZonesView.tsx
index efeaa9be0..833d3887a 100644
--- a/web/src/views/settings/MasksAndZonesView.tsx
+++ b/web/src/views/settings/MasksAndZonesView.tsx
@@ -35,6 +35,7 @@ import { useTranslation } from "react-i18next";
 
 import { useDocDomain } from "@/hooks/use-doc-domain";
 import { getTranslatedLabel } from "@/utils/i18n";
+import { cn } from "@/lib/utils";
 
 type MasksAndZoneViewProps = {
   selectedCamera: string;
@@ -697,7 +698,10 @@ export default function MasksAndZonesView({
           </div>
           <div
             ref={containerRef}
-            className="flex max-h-[50%] md:mr-3 md:h-dvh md:max-h-full md:w-7/12 md:grow"
+            className={cn(
+              "flex max-h-[50%] md:h-dvh md:max-h-full md:w-7/12 md:grow",
+              isDesktop && "md:mr-3",
+            )}
           >
             <div className="mx-auto flex size-full flex-row justify-center">
               {cameraConfig &&
diff --git a/web/src/views/settings/MotionTunerView.tsx b/web/src/views/settings/MotionTunerView.tsx
index 1cdaa54f1..4bcd9cdc5 100644
--- a/web/src/views/settings/MotionTunerView.tsx
+++ b/web/src/views/settings/MotionTunerView.tsx
@@ -23,6 +23,8 @@ import { LuExternalLink } from "react-icons/lu";
 import { StatusBarMessagesContext } from "@/context/statusbar-provider";
 import { Trans, useTranslation } from "react-i18next";
 import { useDocDomain } from "@/hooks/use-doc-domain";
+import { cn } from "@/lib/utils";
+import { isDesktop } from "react-device-detect";
 
 type MotionTunerViewProps = {
   selectedCamera: string;
@@ -325,7 +327,12 @@ export default function MotionTunerView({
       </div>
 
       {cameraConfig ? (
-        <div className="flex max-h-[70%] md:mr-3 md:h-dvh md:max-h-full md:w-7/12 md:grow">
+        <div
+          className={cn(
+            "flex max-h-[70%] md:h-dvh md:max-h-full md:w-7/12 md:grow",
+            isDesktop && "md:mr-3",
+          )}
+        >
           <div className="size-full min-h-10">
             <AutoUpdatingCameraImage
               camera={cameraConfig.name}
diff --git a/web/src/views/settings/TriggerView.tsx b/web/src/views/settings/TriggerView.tsx
index a0e19f5b2..7448a210b 100644
--- a/web/src/views/settings/TriggerView.tsx
+++ b/web/src/views/settings/TriggerView.tsx
@@ -43,6 +43,7 @@ import { useTriggers } from "@/api/ws";
 import { useCameraFriendlyName } from "@/hooks/use-camera-friendly-name";
 import { CiCircleAlert } from "react-icons/ci";
 import { useDocDomain } from "@/hooks/use-doc-domain";
+import { isDesktop } from "react-device-detect";
 
 type ConfigSetBody = {
   requires_restart: number;
@@ -440,7 +441,12 @@ export default function TriggerView({
   return (
     <div className="flex size-full flex-col md:flex-row">
       <Toaster position="top-center" closeButton={true} />
-      <div className="scrollbar-container order-last mb-2 mt-2 flex h-full w-full flex-col overflow-y-auto pb-2 md:order-none md:mr-3 md:mt-0">
+      <div
+        className={cn(
+          "scrollbar-container order-last mb-2 mt-2 flex h-full w-full flex-col overflow-y-auto pb-2",
+          isDesktop && "order-none mr-3 mt-0",
+        )}
+      >
         {!isSemanticSearchEnabled ? (
           <div className="mb-5 flex flex-row items-center justify-between gap-2">
             <div className="flex flex-col items-start">
@@ -651,7 +657,7 @@ export default function TriggerView({
               </div>
 
               {/* Desktop Table View */}
-              <div className="scrollbar-container hidden flex-1 overflow-hidden rounded-lg border border-border bg-background_alt md:mr-3 md:block">
+              <div className="scrollbar-container hidden flex-1 overflow-hidden rounded-lg border border-border bg-background_alt md:block">
                 <div className="h-full overflow-auto">
                   <Table>
                     <TableHeader className="sticky top-0 bg-muted/50">