style(studio): keep StudioRightPanel under the 600 line cap

This commit is contained in:
Miguel Angel Simon Sierra
2026-07-28 16:44:43 +02:00
parent 4e74eefddd
commit bb24d0037a
@@ -446,8 +446,7 @@ export function StudioRightPanel({
return (
<>
{/* Vertical resize divider: 3px visible seam, 13px pointer-capture zone via
the absolutely-positioned inner hit area. */}
{/* Vertical resize divider: 3px visible seam, 13px hit zone via the inner div. */}
<div
role="separator"
aria-label="Resize inspector panel"
@@ -467,11 +466,9 @@ export function StudioRightPanel({
adjustPanelWidth("right", delta);
}}
>
{/* Expanded hit zone, deliberately asymmetric: 8px into the preview pane's
p-2 stage gutter (the only dead space here), the 3px seam, then 2px
into the inspector card. It stops at 13px rather than the 24px WCAG 2.2
(2.5.8) target because the next pixel on either side is live: the
preview stage on the left, the inspector's own controls on the right. */}
{/* Asymmetric hit zone: 8px into the preview's p-2 gutter (the only dead
space), the 3px seam, 2px into the card. Stops short of the 24px WCAG
2.5.8 target because the next pixel each way is live. */}
<div className="absolute inset-y-0 -left-[8px] w-[13px]" />
{/* Visible hairline */}
<div className="absolute top-1/2 left-0 h-[52px] w-[3px] -translate-y-1/2 bg-white/12 transition-colors group-hover:bg-white/18 group-active:bg-white/24" />