From 0eb4d25fff150a8796dce570084ab4de30d7ad65 Mon Sep 17 00:00:00 2001
From: Val Alexander <bunsthedev@gmail.com>
Date: Wed, 1 Apr 2026 07:34:58 -0500
Subject: [PATCH] Widen resize hit areas for side panels

- Increase drag targets on chat and sidebar resize handles
- Soften divider borders on inline diff and sidebar panels
---
 apps/web/src/components/ChatView.tsx       | 12 ++++++++----
 apps/web/src/components/DiffPanelShell.tsx |  2 +-
 apps/web/src/components/ui/sidebar.tsx     |  6 +++---
 apps/web/src/routes/_chat.$threadId.tsx    |  4 ++--
 4 files changed, 14 insertions(+), 10 deletions(-)

diff --git a/apps/web/src/components/ChatView.tsx b/apps/web/src/components/ChatView.tsx
index 8272abe33..e769dcd06 100644
--- a/apps/web/src/components/ChatView.tsx
+++ b/apps/web/src/components/ChatView.tsx
@@ -4662,8 +4662,10 @@ export default function ChatView({ threadId }: ChatViewProps) {
               </div>
               <div
                 className={cn(
-                  "relative z-10 shrink-0 bg-border/80 transition-colors hover:bg-border",
-                  previewStacked ? "h-1.5 cursor-row-resize" : "w-1.5 cursor-col-resize",
+                  "relative z-10 shrink-0 bg-transparent touch-none select-none after:absolute after:bg-border/35 after:transition-colors hover:after:bg-border/55",
+                  previewStacked
+                    ? "h-4 cursor-row-resize after:inset-x-0 after:top-1/2 after:h-px after:-translate-y-1/2"
+                    : "w-4 cursor-col-resize after:inset-y-0 after:left-1/2 after:w-px after:-translate-x-1/2",
                 )}
                 onPointerDown={handlePreviewResizePointerDown}
                 onPointerMove={handlePreviewResizePointerMove}
@@ -5448,8 +5450,10 @@ export default function ChatView({ threadId }: ChatViewProps) {
             <>
               <div
                 className={cn(
-                  "relative z-10 shrink-0 bg-border/80 transition-colors hover:bg-border",
-                  previewStacked ? "h-1.5 cursor-row-resize" : "w-1.5 cursor-col-resize",
+                  "relative z-10 shrink-0 bg-transparent touch-none select-none after:absolute after:bg-border/35 after:transition-colors hover:after:bg-border/55",
+                  previewStacked
+                    ? "h-4 cursor-row-resize after:inset-x-0 after:top-1/2 after:h-px after:-translate-y-1/2"
+                    : "w-4 cursor-col-resize after:inset-y-0 after:left-1/2 after:w-px after:-translate-x-1/2",
                 )}
                 onPointerDown={handlePreviewResizePointerDown}
                 onPointerMove={handlePreviewResizePointerMove}
diff --git a/apps/web/src/components/DiffPanelShell.tsx b/apps/web/src/components/DiffPanelShell.tsx
index c08c53325..7e1d7f563 100644
--- a/apps/web/src/components/DiffPanelShell.tsx
+++ b/apps/web/src/components/DiffPanelShell.tsx
@@ -27,7 +27,7 @@ export function DiffPanelShell(props: {
       className={cn(
         "flex h-full min-w-0 flex-col bg-background",
         props.mode === "inline"
-          ? "w-[42vw] min-w-[360px] max-w-[560px] shrink-0 border-l border-border"
+          ? "w-[42vw] min-w-[360px] max-w-[560px] shrink-0 border-l border-border/60"
           : "w-full",
       )}
     >
diff --git a/apps/web/src/components/ui/sidebar.tsx b/apps/web/src/components/ui/sidebar.tsx
index 591bae014..34a281b78 100644
--- a/apps/web/src/components/ui/sidebar.tsx
+++ b/apps/web/src/components/ui/sidebar.tsx
@@ -618,12 +618,12 @@ function SidebarRail({
       aria-label={railLabel}
       className={cn(
         /* disable pointer events only when offcanvas sidebar is collapsed, that's when the rail sits over the native scrollbar on windows and linux. icon mode stays fully clickable. */
-        "-translate-x-1/2 group-data-[side=left]:-right-4 absolute inset-y-0 z-20 hidden w-4 transition-all ease-linear after:absolute after:inset-y-0 after:left-1/2 after:w-[2px] hover:after:bg-sidebar-border group-data-[side=right]:left-0 sm:flex [[data-collapsible=offcanvas][data-state=collapsed]_&]:pointer-events-none",
+        "-translate-x-1/2 group-data-[side=left]:-right-5 absolute inset-y-0 z-20 hidden w-6 transition-all ease-linear after:absolute after:inset-y-0 after:left-1/2 after:w-px after:-translate-x-1/2 after:bg-sidebar-border/35 hover:after:bg-sidebar-border/70 group-data-[side=right]:left-0 sm:flex [[data-collapsible=offcanvas][data-state=collapsed]_&]:pointer-events-none",
         "in-data-[side=left]:cursor-w-resize in-data-[side=right]:cursor-e-resize",
         "[[data-side=left][data-state=collapsed]_&]:cursor-e-resize [[data-side=right][data-state=collapsed]_&]:cursor-w-resize",
         "group-data-[collapsible=offcanvas]:translate-x-0 hover:group-data-[collapsible=offcanvas]:bg-sidebar group-data-[collapsible=offcanvas]:after:left-full",
-        "[[data-side=left][data-collapsible=offcanvas]_&]:-right-2",
-        "[[data-side=right][data-collapsible=offcanvas]_&]:-left-2",
+        "[[data-side=left][data-collapsible=offcanvas]_&]:-right-3",
+        "[[data-side=right][data-collapsible=offcanvas]_&]:-left-3",
         className,
       )}
       data-sidebar="rail"
diff --git a/apps/web/src/routes/_chat.$threadId.tsx b/apps/web/src/routes/_chat.$threadId.tsx
index 07661f87e..aa8945d55 100644
--- a/apps/web/src/routes/_chat.$threadId.tsx
+++ b/apps/web/src/routes/_chat.$threadId.tsx
@@ -206,7 +206,7 @@ const DiffPanelInlineSidebar = (props: {
       <Sidebar
         side="right"
         collapsible="offcanvas"
-        className="border-l border-border bg-card text-foreground"
+        className="border-l border-border/60 bg-card text-foreground"
         resizable={{
           minWidth: DIFF_INLINE_SIDEBAR_MIN_WIDTH,
           shouldAcceptWidth: shouldAcceptInlineSidebarWidth,
@@ -248,7 +248,7 @@ const CodeViewerInlineSidebar = (props: {
       <Sidebar
         side="right"
         collapsible="offcanvas"
-        className="border-l border-border bg-card text-foreground"
+        className="border-l border-border/60 bg-card text-foreground"
         resizable={{
           minWidth: CODE_VIEWER_SIDEBAR_MIN_WIDTH,
           shouldAcceptWidth: shouldAcceptInlineSidebarWidth,