From b3e158bd019d5abd90a443fbd49dea0603a84cd6 Mon Sep 17 00:00:00 2001
From: Josh Hawkins <32435876+hawkeye217@users.noreply.github.com>
Date: Wed, 29 Oct 2025 14:52:14 -0500
Subject: [PATCH] mobile landscape

---
 .../overlay/detail/AnnotationOffsetSlider.tsx | 24 ++++++++++++++++---
 1 file changed, 21 insertions(+), 3 deletions(-)

diff --git a/web/src/components/overlay/detail/AnnotationOffsetSlider.tsx b/web/src/components/overlay/detail/AnnotationOffsetSlider.tsx
index 14f389d8a..05749b8ec 100644
--- a/web/src/components/overlay/detail/AnnotationOffsetSlider.tsx
+++ b/web/src/components/overlay/detail/AnnotationOffsetSlider.tsx
@@ -9,6 +9,7 @@ import { toast } from "sonner";
 import { Trans, useTranslation } from "react-i18next";
 import { LuInfo } from "react-icons/lu";
 import { cn } from "@/lib/utils";
+import { isMobile } from "react-device-detect";
 
 type Props = {
   className?: string;
@@ -67,8 +68,20 @@ export default function AnnotationOffsetSlider({ className }: Props) {
   }, [annotationOffset, camera, mutate, t]);
 
   return (
-    <div className={cn("flex flex-col gap-0.5 landscape:gap-3", className)}>
-      <div className="flex items-center gap-3 landscape:flex-col landscape:items-start landscape:gap-4">
+    <div
+      className={cn(
+        "flex flex-col gap-0.5",
+        isMobile && "landscape:gap-3",
+        className,
+      )}
+    >
+      <div
+        className={cn(
+          "flex items-center gap-3",
+          isMobile &&
+            "landscape:flex-col landscape:items-start landscape:gap-4",
+        )}
+      >
         <div className="flex flex-row gap-2 text-sm">
           {t("trackingDetails.annotationSettings.offset.label")}:
           <span className="text-primary-variant">{annotationOffset}</span>
@@ -93,7 +106,12 @@ export default function AnnotationOffsetSlider({ className }: Props) {
           </Button>
         </div>
       </div>
-      <div className="flex items-center gap-2 text-xs text-muted-foreground landscape:flex-col landscape:items-start">
+      <div
+        className={cn(
+          "flex items-center gap-2 text-xs text-muted-foreground",
+          isMobile && "landscape:flex-col landscape:items-start",
+        )}
+      >
         <Trans ns="views/explore">
           trackingDetails.annotationSettings.offset.millisecondsToOffset
         </Trans>