From 7c5746cd6a19e723a80007511c8f065508f8ca86 Mon Sep 17 00:00:00 2001
From: Josh Hawkins <32435876+hawkeye217@users.noreply.github.com>
Date: Wed, 29 Oct 2025 12:33:50 -0500
Subject: [PATCH] ensure mobile buttons don't stay selected

---
 .../components/timeline/ReviewTimeline.tsx    | 20 ++++++++++---------
 1 file changed, 11 insertions(+), 9 deletions(-)

diff --git a/web/src/components/timeline/ReviewTimeline.tsx b/web/src/components/timeline/ReviewTimeline.tsx
index 9c460c2b8..8c60351ab 100644
--- a/web/src/components/timeline/ReviewTimeline.tsx
+++ b/web/src/components/timeline/ReviewTimeline.tsx
@@ -511,36 +511,38 @@ export function ReviewTimeline({
         <div
           className={`absolute z-30 flex gap-2 ${
             isMobile
-              ? "bottom-4 right-2 flex-col gap-4"
+              ? "bottom-4 right-1 flex-col gap-3"
               : "bottom-2 left-1/2 -translate-x-1/2"
           }`}
         >
           <Button
-            onClick={() => {
+            onClick={(e) => {
               const newLevel = Math.max(0, currentZoomLevelIndex - 1);
               onZoomChange(newLevel);
+              e.currentTarget.blur();
             }}
             variant="outline"
             disabled={currentZoomLevelIndex === 0}
-            className="p-3"
-            title="Zoom out"
+            className="bg-background_alt p-3 hover:bg-accent hover:text-accent-foreground active:scale-95 [@media(hover:none)]:hover:bg-background_alt"
+            type="button"
           >
-            <LuZoomOut className={isMobile ? "size-5" : "size-4"} />
+            <LuZoomOut className={cn("size-5 text-primary-variant")} />
           </Button>
           <Button
-            onClick={() => {
+            onClick={(e) => {
               const newLevel = Math.min(
                 zoomLevels.length - 1,
                 currentZoomLevelIndex + 1,
               );
               onZoomChange(newLevel);
+              e.currentTarget.blur();
             }}
             variant="outline"
             disabled={currentZoomLevelIndex === zoomLevels.length - 1}
-            className="p-3"
-            title="Zoom in"
+            className="bg-background_alt p-3 hover:bg-accent hover:text-accent-foreground active:scale-95 [@media(hover:none)]:hover:bg-background_alt"
+            type="button"
           >
-            <LuZoomIn className={isMobile ? "size-5" : "size-4"} />
+            <LuZoomIn className={cn("size-5 text-primary-variant")} />
           </Button>
         </div>
       )}