fix(studio): widen FlatSlider's click/drag hit area vertically

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>

Author: vanceingalls

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", () => {

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 ${