diff --git a/docs/engineering-notes.md b/docs/engineering-notes.md index 04fc92c..4ffed7d 100644 --- a/docs/engineering-notes.md +++ b/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 diff --git a/src/renderer/layout-geometry.ts b/src/renderer/layout-geometry.ts index 8aa43d8..4482d94 100644 --- a/src/renderer/layout-geometry.ts +++ b/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 diff --git a/src/renderer/styles/app.css b/src/renderer/styles/app.css index 8036723..4478271 100644 --- a/src/renderer/styles/app.css +++ b/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; } diff --git a/src/renderer/styles/tokens.css b/src/renderer/styles/tokens.css index b528d45..0566c2a 100644 --- a/src/renderer/styles/tokens.css +++ b/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));