feat: redesign the Compare tab to match the devtools mockup

Author: vishnuv688

packages/app/src/components/workbench/compare.ts

@@ -293,11 +293,11 @@ export class DevtoolsCompare extends Element {
             <div class="error-banner-message">${errorMessage}</div>
           </div>`
         : nothing}
+      <div class="cmp-colhead">
+        <div class="col-header">${this.swapped ? 'Latest' : 'Baseline'}</div>
+        <div class="col-header">${this.swapped ? 'Baseline' : 'Latest'}</div>
+      </div>
       <div class="cmp-body">
-        <div class="cmp-colhead">
-          <div class="col-header">${this.swapped ? 'Latest' : 'Baseline'}</div>
-          <div class="col-header">${this.swapped ? 'Baseline' : 'Latest'}</div>
-        </div>
         <div class="cmp-rows">
           ${visiblePairs.map((pair) =>
             this.#renderPair(pair, leftCommands, rightCommands, firstDivergent)

packages/app/src/components/workbench/compare/styles.ts

@@ -129,24 +129,22 @@ export const compareStyles = css`
   }
 
   /* ── Diff body ── */
-  .cmp-body {
-    flex: 1 1 auto;
-    min-height: 0;
-    overflow: auto;
-    padding: 12px 14px;
-  }
+  /* Header sits OUTSIDE the scroll container so rows can't scroll above it. */
   .cmp-colhead {
+    flex: none;
     display: grid;
     grid-template-columns: 1fr 1fr;
     gap: 12px;
-    position: sticky;
-    top: 0;
-    z-index: 2;
-    margin-bottom: 6px;
-    padding: 2px 0 8px;
+    padding: 10px 14px 8px;
     background: var(--vscode-editor-background);
     border-bottom: 1px solid var(--vscode-panel-border);
   }
+  .cmp-body {
+    flex: 1 1 auto;
+    min-height: 0;
+    overflow: auto;
+    padding: 12px 14px;
+  }
   .col-header {
     font-size: 11px;
     font-weight: 700;

packages/app/src/core/core.css

@@ -46,19 +46,20 @@ button[data-draggable-id]::after {
     height 0.12s;
   pointer-events: none;
 }
+/* The handle is positioned at `position - 3px` (see DragController), so the
+   real pane boundary is 3px in. Place the line there — centering it (50%)
+   leaves it ~2px off the boundary, creating a gap where it meets a border. */
 button[data-draggable-id].cursor-col-resize::after {
   top: 0;
   bottom: 0;
-  left: 50%;
+  left: 3px;
   width: 1px;
-  transform: translateX(-50%);
 }
 button[data-draggable-id].cursor-row-resize::after {
   left: 0;
   right: 0;
-  top: 50%;
+  top: 3px;
   height: 1px;
-  transform: translateY(-50%);
 }
 button[data-draggable-id]:hover::after,
 button[data-draggable-id][data-dragging='dragging']::after {