style(quick-pane): use top padding as drag target

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/,

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

ui/src/quick-pane/quick-pane.css

@@ -48,38 +48,20 @@ body {
 }
 
 .quick-pane-drag-region {
-  position: relative;
+  position: absolute;
-  display: grid;
+  z-index: 1;
-  height: 24px;
+  top: 0;
-  flex: 0 0 24px;
+  right: 0;
-  place-items: center;
+  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;