From a180ac9a2c3f5d9a5369b4048aa2287fcc6d4ffe Mon Sep 17 00:00:00 2001
From: Alex Blank <alexblank@fastmail.com>
Date: Fri, 28 Aug 2026 14:23:28 +0200
Subject: [PATCH] style(quick-pane): use top padding as drag target

---
 test/quick-pane-ui.test.js       |  2 +-
 ui/src/quick-pane/QuickPane.tsx  |  4 +---
 ui/src/quick-pane/quick-pane.css | 30 ++++++------------------------
 3 files changed, 8 insertions(+), 28 deletions(-)

diff --git a/test/quick-pane-ui.test.js b/test/quick-pane-ui.test.js
index 6f15c7c..4adb3bb 100644
--- a/test/quick-pane-ui.test.js
+++ b/test/quick-pane-ui.test.js
@@ -322,7 +322,7 @@ test("Quick Pane uses native dimensions and request-first compact layout", async
     stylesheet,
     /\.quick-pane-composer[\s\S]*?height: 120px[\s\S]*?min-height: 110px[\s\S]*?max-height: 130px/,
   );
-  assert.match(stylesheet, /\.quick-pane-drag-region[\s\S]*?height: 24px/);
+  assert.match(stylesheet, /\.quick-pane-drag-region[\s\S]*?position:\s*absolute[\s\S]*?height:\s*10px[\s\S]*?cursor:\s*grab/);
   assert.match(
     stylesheet,
     /\.quick-pane-composer-actions[\s\S]*?position: absolute/,
diff --git a/ui/src/quick-pane/QuickPane.tsx b/ui/src/quick-pane/QuickPane.tsx
index 0c763b4..86e645a 100644
--- a/ui/src/quick-pane/QuickPane.tsx
+++ b/ui/src/quick-pane/QuickPane.tsx
@@ -1143,9 +1143,7 @@ export default function QuickPane() {
             .startDragging()
             .catch(() => undefined)
         }
-      >
-        <span className="quick-pane-drag-grip" />
-      </div>
+      />
       <header className="quick-pane-toolbar">
         <div className="quick-pane-primary-controls">
           <ModelSelector
diff --git a/ui/src/quick-pane/quick-pane.css b/ui/src/quick-pane/quick-pane.css
index c89eb52..0efa57b 100644
--- a/ui/src/quick-pane/quick-pane.css
+++ b/ui/src/quick-pane/quick-pane.css
@@ -48,38 +48,20 @@ body {
 }
 
 .quick-pane-drag-region {
-  position: relative;
-  display: grid;
-  height: 24px;
-  flex: 0 0 24px;
-  place-items: center;
+  position: absolute;
+  z-index: 1;
+  top: 0;
+  right: 0;
+  left: 0;
+  height: 10px;
   cursor: grab;
   touch-action: none;
-  border-bottom: 1px solid #70522f;
-  background: linear-gradient(
-    90deg,
-    transparent,
-    rgba(240, 163, 71, 0.14),
-    transparent
-  );
 }
 
 .quick-pane-drag-region:active {
   cursor: grabbing;
 }
 
-.quick-pane-drag-grip {
-  width: 44px;
-  height: 5px;
-  border-radius: 999px;
-  background: repeating-linear-gradient(
-    90deg,
-    #f0a347 0 4px,
-    transparent 4px 7px
-  );
-  box-shadow: 0 0 8px rgba(240, 163, 71, 0.45);
-}
-
 .quick-pane-toolbar {
   flex: 0 0 auto;
   flex-wrap: nowrap;