From 77cb7c137b1012195151bb418a42f057d5f5a1ea Mon Sep 17 00:00:00 2001
From: Ryan Gregg <github@ryangregg.com>
Date: Sat, 14 Mar 2026 05:41:55 +0000
Subject: [PATCH] Replace inline styles with Tailwind classes in drag overlay

Use Tailwind utility classes for static properties (positioning,
z-index, cursor, pointer-events) and keep inline styles only for
dynamic values (drag rectangle dimensions).

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 web/src/views/live/LiveCameraView.tsx | 20 +++-----------------
 1 file changed, 3 insertions(+), 17 deletions(-)

diff --git a/web/src/views/live/LiveCameraView.tsx b/web/src/views/live/LiveCameraView.tsx
index 3a956f4b8..5b145d932 100644
--- a/web/src/views/live/LiveCameraView.tsx
+++ b/web/src/views/live/LiveCameraView.tsx
@@ -753,15 +753,15 @@ export default function LiveCameraView({
               }}
             >
               <div
-                className={`flex flex-col items-center justify-center ${growClassName}`}
+                className={`relative flex flex-col items-center justify-center ${growClassName}`}
                 ref={clickOverlayRef}
                 style={{
                   aspectRatio: constrainedAspectRatio,
-                  position: "relative",
                 }}
               >
                 {clickOverlay && (
                   <div
+                    className="absolute inset-0 z-40 cursor-crosshair select-none"
                     onMouseDown={handleOverlayMouseDown}
                     onMouseMove={handleOverlayMouseMove}
                     onMouseUp={handleOverlayMouseUp}
@@ -769,30 +769,16 @@ export default function LiveCameraView({
                     onTouchMove={handleOverlayMouseMove}
                     onTouchEnd={handleOverlayMouseUp}
                     onDragStart={(e) => e.preventDefault()}
-                    style={{
-                      position: "absolute",
-                      top: 0,
-                      left: 0,
-                      width: "100%",
-                      height: "100%",
-                      zIndex: 40,
-                      cursor: "crosshair",
-                      userSelect: "none",
-                    }}
                   />
                 )}
                 {isDragging && dragRect && clickOverlay && (
                   <div
+                    className="pointer-events-none absolute z-50 border-2 border-blue-500/80 bg-blue-500/15"
                     style={{
-                      position: "absolute",
                       left: dragRect.left,
                       top: dragRect.top,
                       width: dragRect.width,
                       height: dragRect.height,
-                      border: "2px solid rgba(59, 130, 246, 0.8)",
-                      backgroundColor: "rgba(59, 130, 246, 0.15)",
-                      pointerEvents: "none",
-                      zIndex: 50,
                     }}
                   />
                 )}