fix: prevent resize handle from covering scrollbar (#359)

* fix: prevent resize handle touch area from covering scrollbar (#354)

The ResizeHandle touch target extended 8px in both directions (-inset-x-2),
overlapping the 6px scrollbar on the adjacent content area. Users could see
the scrollbar but couldn't grab it because the resize handle intercepted clicks.

Add a `side` prop so the touch area only extends outward (away from the scroll
container) — left handles extend left, right handles extend right.

Closes #354

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

* fix: remove transform/opacity from global transition to fix choppy scroll

The global `*` rule applied 150ms transitions on transform and opacity to
every DOM element. During scroll, the compositor fights these transitions
on sticky headers, annotation highlights, and layer compositing — causing
visible choppiness.

Narrowed to color, background-color, border-color, box-shadow only. These
handle theme switching and hover states without affecting scroll performance.
Components needing transform/opacity transitions already declare their own
via Tailwind classes (205 usages across 45 files).

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

---------

Co-authored-by: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

Author: backnotprop

packages/editor/App.tsx

@@ -1236,7 +1236,7 @@ const App: React.FC = () => {
                 onFetchVersions={planDiff.fetchVersions}
                 onFetchProjectPlans={planDiff.fetchProjectPlans}
               />
-              <ResizeHandle {...tocResize.handleProps} className="hidden lg:block" />
+              <ResizeHandle {...tocResize.handleProps} className="hidden lg:block" side="left" />
             </>
           )}
 
@@ -1323,7 +1323,7 @@ const App: React.FC = () => {
           </main>
 
           {/* Resize Handle */}
-          {isPanelOpen && <ResizeHandle {...panelResize.handleProps} className="hidden md:block" />}
+          {isPanelOpen && <ResizeHandle {...panelResize.handleProps} className="hidden md:block" side="right" />}
 
           {/* Annotation Panel */}
           <AnnotationPanel

packages/review-editor/App.tsx

@@ -878,7 +878,7 @@ const ReviewApp: React.FC = () => {
                 onSelectSearchMatch={handleSelectSearchMatch}
                 onStepSearchMatch={stepSearchMatch}
               />
-              <ResizeHandle {...fileTreeResize.handleProps} />
+              <ResizeHandle {...fileTreeResize.handleProps} side="left" />
             </>
           )}
 
@@ -970,7 +970,7 @@ const ReviewApp: React.FC = () => {
           </main>
 
           {/* Resize Handle */}
-          {isPanelOpen && <ResizeHandle {...panelResize.handleProps} />}
+          {isPanelOpen && <ResizeHandle {...panelResize.handleProps} side="right" />}
 
           {/* Annotations panel */}
           <ReviewPanel

packages/ui/components/ResizeHandle.tsx

@@ -3,6 +3,8 @@ import type { ResizeHandleProps as BaseProps } from '../hooks/useResizablePanel'
 
 interface Props extends BaseProps {
   className?: string;
+  /** Which side of the content the handle is on — extends touch area away from content */
+  side?: 'left' | 'right';
 }
 
 export const ResizeHandle: React.FC<Props> = ({
@@ -11,6 +13,7 @@ export const ResizeHandle: React.FC<Props> = ({
   onTouchStart,
   onDoubleClick,
   className,
+  side,
 }) => (
   <div
     className={`relative w-1 cursor-col-resize flex-shrink-0 group${className ? ` ${className}` : ''}`}
@@ -19,9 +22,13 @@ export const ResizeHandle: React.FC<Props> = ({
     <div className={`absolute inset-y-0 inset-x-0 transition-colors ${
       isDragging ? 'bg-primary/50' : 'group-hover:bg-border'
     }`} />
-    {/* Wider touch area */}
+    {/* Wider touch area — extends outward from content to avoid covering scrollbar */}
     <div
-      className="absolute inset-y-0 -inset-x-2"
+      className={`absolute inset-y-0 ${
+        side === 'left' ? 'right-0 -left-2' :
+        side === 'right' ? 'left-0 -right-2' :
+        '-inset-x-2'
+      }`}
       onMouseDown={onMouseDown}
       onTouchStart={onTouchStart}
       onDoubleClick={onDoubleClick}

packages/ui/theme.css

@@ -101,9 +101,11 @@ body {
   background: oklch(from var(--primary) l c h / 0.3);
 }
 
-/* Smooth transitions */
+/* Smooth transitions for theme switching and hover states.
+   Only color properties — transform/opacity are handled per-component
+   to avoid interfering with scroll compositing. */
 * {
-  transition-property: color, background-color, border-color, box-shadow, opacity, transform;
+  transition-property: color, background-color, border-color, box-shadow;
   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
   transition-duration: 150ms;
 }