style: the panels and the sidebar share one bottom line above the canvas bar

docs/engineering-notes.md

@@ -226,7 +226,9 @@ against the bar's lower edge.
 
 **The horizontal scrollbar touched the pane outlines.** A 5px bar inside a 6px bottom
 inset can't help but touch. Widened only the canvas's bottom inset to 12px to give the
-bar its own room (`CANVAS_BOTTOM`).
+bar its own room (`CANVAS_BOTTOM`). When the bar later thinned to 3px the inset stayed,
+and the 4px above the bar became 6px over 3px below — a gap that read as a gap. The
+inset is 10px now: 4px clear above, 3px of bar, 3px of floor, as the proportions were.
 
 **A failed pointer capture killed the drag.** Capture is only a convenience so events
 keep coming when the cursor leaves the window, but the exception propagated and the drag

src/renderer/layout-geometry.ts

@@ -13,9 +13,11 @@ export const CANVAS_EDGE = 6
 
 /**
  * Deeper along the bottom: the scrollbar runs there and would otherwise sit on
- * the pane outline. Leaves clearance above and below the bar.
+ * the pane outline. Sized with the bar: 3px of bar over 3px of floor, and 4px
+ * clear of the outline above — the same clearance the 5px bar had in 12px.
+ * Mirrored by the --edge-bottom token, which the sidebar shares.
  */
-export const CANVAS_BOTTOM = 12
+export const CANVAS_BOTTOM = 10
 
 export interface Rect {
   readonly x: number

src/renderer/styles/app.css

@@ -280,7 +280,8 @@ body {
   display: flex;
   flex-direction: column;
   min-width: 0;
-  margin: var(--edge) 0;
+  /* Its bottom sits on the panes' bottom line, above the canvas bar's floor. */
+  margin: var(--edge) 0 var(--edge-bottom);
   overflow: hidden;
 }
 

src/renderer/styles/tokens.css

@@ -80,6 +80,8 @@
   --radius-dot: 2px;
   --gap: 6px;
   --edge: 6px;
+  /* The floor under the panels: the canvas bar runs there. Mirrors CANVAS_BOTTOM. */
+  --edge-bottom: 10px;
   --hit: 12px;
   /* Every control in the title bar. Grows with the text it sits beside. */
   --ctl-h: calc(26px * var(--ui-scale));