Fix right-panel gaps and jumps when resizing

apps/app/src/components/secondary-panel/ThreadSecondaryPanel.tsx

@@ -4,6 +4,7 @@ import {
   type FocusEvent,
   type PointerEvent as ReactPointerEvent,
   type ReactNode,
+  type RefObject,
   type TransitionEvent,
   useCallback,
   useContext,
@@ -27,7 +28,6 @@ import {
 import { cn } from "@bb/shared-ui/lib/utils";
 import {
   PANEL_COLLAPSE_TRANSITION_CLASS,
-  PANEL_RESIZE_HIT_AREA_MARGINS,
   PANEL_RESIZE_HANDLE_LAYER_CLASS,
   PANEL_RESIZE_HIT_TARGET_CLASS,
 } from "./panelTransitionTokens";
@@ -67,10 +67,7 @@ import {
   useDiffFilesCollapseControls,
 } from "./git-diff/diffFilesStore";
 import { buildGitDiffIdentity } from "./git-diff/gitDiffPanelHelpers";
-import {
-  type SecondaryPanelDraggingHandler,
-  useSecondaryPanelResize,
-} from "./useSecondaryPanelResize";
+import { useSecondaryPanelResize } from "./useSecondaryPanelResize";
 import { threadSecondaryPanelResizingAtom } from "./threadSecondaryPanelAtoms";
 import { GitDiffToolbar } from "./GitDiffToolbar";
 import { GitDiffTabContent } from "./ThreadSecondaryPanelTabContent";
@@ -275,26 +272,16 @@ function ThreadSecondaryPanelContent({
     handleSecondaryPanelWidthChange,
   } = useResponsiveGitDiffPanelDisplay({ isSecondaryPanelOpen: isOpen });
   const {
-    handleSecondaryPanelDragging: handleResizeDragging,
     handleSecondaryPanelResize,
-    handleSecondaryPanelResizePointerDownCapture,
+    resizeHitTargetRef,
     persistedWidthPercent,
     secondaryPanelRef: panelRef,
     secondaryResizablePanelRef: resizablePanelRef,
   } = useSecondaryPanelResize({
     isSecondaryPanelOpen: isOpen,
     onPanelWidthChange: handleSecondaryPanelWidthChange,
+    onResizeStart: handleSecondaryPanelResizeStart,
   });
-  const handleSecondaryPanelDragging: SecondaryPanelDraggingHandler =
-    useCallback(
-      (isDragging) => {
-        if (isDragging) {
-          handleSecondaryPanelResizeStart();
-        }
-        handleResizeDragging(isDragging);
-      },
-      [handleResizeDragging, handleSecondaryPanelResizeStart],
-    );
   const hasPanelExpandedRef = useRef(false);
   useLayoutEffect(() => {
     hasPanelExpandedRef.current = false;
@@ -1029,8 +1016,7 @@ function ThreadSecondaryPanelContent({
         isOpen={isOpen}
         isConversationCollapsed={isConversationCollapsed}
         matchesSplitDividers={hostLayout !== null}
-        onDragging={handleSecondaryPanelDragging}
-        onPointerDown={handleSecondaryPanelResizePointerDownCapture}
+        hitTargetRef={resizeHitTargetRef}
       />
       <Panel
         ref={resizablePanelRef}
@@ -1153,26 +1139,22 @@ interface SecondaryPanelResizeHandleProps {
   isOpen: boolean;
   isConversationCollapsed: boolean;
   matchesSplitDividers: boolean;
-  onDragging: SecondaryPanelDraggingHandler;
-  onPointerDown: (event: PointerEvent) => void;
+  hitTargetRef: RefObject<HTMLSpanElement | null>;
 }
 
 function SecondaryPanelResizeHandle({
   isOpen,
   isConversationCollapsed,
   matchesSplitDividers,
-  onDragging,
-  onPointerDown,
+  hitTargetRef,
 }: SecondaryPanelResizeHandleProps) {
   const isResizing = useAtomValue(threadSecondaryPanelResizingAtom);
   return (
     <PanelResizeHandle
       id="thread-detail-secondary-panel-handle"
       disabled={!isOpen || isConversationCollapsed}
-      onDragging={onDragging}
-      onPointerDownCapture={(event) => onPointerDown(event.nativeEvent)}
       data-panel-resize-snap-handle=""
-      hitAreaMargins={PANEL_RESIZE_HIT_AREA_MARGINS}
+      hitAreaMargins={{ coarse: 0, fine: 0 }}
       className={cn(
         "group relative shrink-0 overflow-visible transition-[width,opacity,background-color]",
         PANEL_RESIZE_HANDLE_LAYER_CLASS,
@@ -1198,6 +1180,7 @@ function SecondaryPanelResizeHandle({
     >
       <span
         aria-hidden
+        ref={hitTargetRef}
         data-panel-resize-hit-target=""
         className={PANEL_RESIZE_HIT_TARGET_CLASS}
       />

apps/app/src/components/secondary-panel/panelTransitionTokens.ts

@@ -38,9 +38,7 @@ export function usePanelCollapseTransitionsReady(
   return !enabled || readyKey === resetKey;
 }
 
-export const PANEL_RESIZE_HIT_AREA_MARGINS = { coarse: 15, fine: 8 };
-
 export const PANEL_RESIZE_HANDLE_LAYER_CLASS = "z-[25]";
 
 export const PANEL_RESIZE_HIT_TARGET_CLASS =
-  "absolute inset-y-0 left-1/2 z-10 w-3 -translate-x-1/2 touch-none cursor-col-resize bg-transparent";
+  "absolute inset-y-0 left-1/2 z-10 w-4 -translate-x-1/2 touch-none cursor-col-resize pointer-coarse:w-8 bg-transparent";