Merge pull request #2142 from heygen-com/studio-flat-12-slider-hit-area

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

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,14 +259,13 @@ export function FlatSlider({
         aria-label={label}
         aria-valuenow={value}
         aria-disabled={disabled}
-        className={`relative h-0.5 flex-1 rounded-full bg-panel-hover ${
+        className={`relative h-5 flex-1 ${disabled ? "cursor-not-allowed" : "cursor-pointer"}`}
-          disabled ? "cursor-not-allowed" : "cursor-pointer"
-        }`}
         onPointerDown={(e) => {
           if (disabled) return;
           commitFromClientX(e.clientX, e.currentTarget.getBoundingClientRect());
         }}
       >
+        <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"
@@ -280,6 +279,7 @@ export function FlatSlider({
               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 ${