From fd1fb17f79e79721c5e74f1aa501eb81503d1f5c Mon Sep 17 00:00:00 2001
From: Vance Ingalls <vance@heygen.com>
Date: Fri, 10 Jul 2026 14:01:13 -0700
Subject: [PATCH] fix(studio): widen FlatSlider's click/drag hit area
 vertically
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The track's visible line was only 2px tall, and pointerdown was bound
directly to that thin element, making it hard to grab. The hit area is
now 20px tall (a wrapping div) with the visible line rendered as a
thin decorative child, centered inside it — the ratio math only reads
left/width so click accuracy is unaffected.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
---
 .../propertyPanelFlatPrimitives.test.tsx      | 27 ++++++++++++++++
 .../editor/propertyPanelFlatPrimitives.tsx    | 32 +++++++++----------
 2 files changed, 43 insertions(+), 16 deletions(-)

diff --git a/packages/studio/src/components/editor/propertyPanelFlatPrimitives.test.tsx b/packages/studio/src/components/editor/propertyPanelFlatPrimitives.test.tsx
index 1d76262bf2..dcb8dd6dd4 100644
--- a/packages/studio/src/components/editor/propertyPanelFlatPrimitives.test.tsx
+++ b/packages/studio/src/components/editor/propertyPanelFlatPrimitives.test.tsx
@@ -253,6 +253,33 @@ describe("FlatSlider", () => {
     expect(onCommit).toHaveBeenCalledWith(50);
     act(() => root.unmount());
   });
+
+  it("widens the click/drag hit area vertically beyond the thin visible line", () => {
+    const onCommit = vi.fn();
+    const { host, root } = renderInto(
+      <FlatSlider
+        label="Opacity"
+        value={50}
+        min={0}
+        max={100}
+        tier="explicitCustom"
+        displayValue="50%"
+        onCommit={onCommit}
+      />,
+    );
+    const track = host.querySelector<HTMLElement>('[data-flat-slider-track="true"]');
+    if (!track) throw new Error("expected a track element");
+    Object.defineProperty(track, "getBoundingClientRect", {
+      value: () => ({ left: 0, width: 200, top: 0, height: 20, right: 200, bottom: 20 }),
+    });
+    act(() => {
+      track.dispatchEvent(
+        new MouseEvent("pointerdown", { bubbles: true, clientX: 20, clientY: 18 }),
+      );
+    });
+    expect(onCommit).toHaveBeenCalledWith(10);
+    act(() => root.unmount());
+  });
 });
 
 describe("FlatSlider — Grade extensions", () => {
diff --git a/packages/studio/src/components/editor/propertyPanelFlatPrimitives.tsx b/packages/studio/src/components/editor/propertyPanelFlatPrimitives.tsx
index dfb2236efa..f2cdf6220b 100644
--- a/packages/studio/src/components/editor/propertyPanelFlatPrimitives.tsx
+++ b/packages/studio/src/components/editor/propertyPanelFlatPrimitives.tsx
@@ -259,27 +259,27 @@ export function FlatSlider({
         aria-label={label}
         aria-valuenow={value}
         aria-disabled={disabled}
-        className={`relative h-0.5 flex-1 rounded-full bg-panel-hover ${
-          disabled ? "cursor-not-allowed" : "cursor-pointer"
-        }`}
+        className={`relative h-5 flex-1 ${disabled ? "cursor-not-allowed" : "cursor-pointer"}`}
         onPointerDown={(e) => {
           if (disabled) return;
           commitFromClientX(e.clientX, e.currentTarget.getBoundingClientRect());
         }}
       >
-        {centerTick && (
-          <div
-            data-flat-slider-center-tick="true"
-            className="absolute left-1/2 top-[-1px] h-1 w-px -translate-x-1/2 bg-panel-text-5"
-          />
-        )}
-        {tier === "explicitCustom" && (
-          <div
-            data-flat-slider-fill="true"
-            className="absolute inset-y-0 left-0 rounded-full bg-panel-text-5"
-            style={{ width: `${clampedPct}%` }}
-          />
-        )}
+        <div className="absolute inset-x-0 top-1/2 h-0.5 -translate-y-1/2 rounded-full bg-panel-hover">
+          {centerTick && (
+            <div
+              data-flat-slider-center-tick="true"
+              className="absolute left-1/2 top-[-1px] h-1 w-px -translate-x-1/2 bg-panel-text-5"
+            />
+          )}
+          {tier === "explicitCustom" && (
+            <div
+              data-flat-slider-fill="true"
+              className="absolute inset-y-0 left-0 rounded-full bg-panel-text-5"
+              style={{ width: `${clampedPct}%` }}
+            />
+          )}
+        </div>
         <div
           data-flat-slider-knob="true"
           className={`absolute top-1/2 -translate-x-1/2 -translate-y-1/2 rounded-full ${