One border weight, and no sliver beside the nav
The nav's right edge read as two lines because it was two things: its own border, and a sliver of the stage's background showing through a sub-pixel gap before the app's webview began. The stage rect is now rounded to whole pixels and to the same edges each time, so the app covers the stage exactly. Borders are one weight throughout and the lightest that still separates - slate-200 in light, slate-800 in dark. Nothing drawn heavier than it needs to be to read as an edge.
This commit is contained in:
+7
-1
@@ -56,7 +56,13 @@ export default function App() {
|
||||
const el = stageRef.current;
|
||||
if (!el) return;
|
||||
const r = el.getBoundingClientRect();
|
||||
void api.setStage(r.x, r.y, r.width, r.height, 0);
|
||||
/* Rounded to whole pixels, and to the same edges each time. A fractional
|
||||
left edge leaves a sliver of the stage's own background showing between
|
||||
the nav's border and the app — which reads as a second, lighter border
|
||||
line running down the whole window. */
|
||||
const x = Math.round(r.x);
|
||||
const y = Math.round(r.y);
|
||||
void api.setStage(x, y, Math.round(r.right) - x, Math.round(r.bottom) - y, 0);
|
||||
}, []);
|
||||
|
||||
useLayoutEffect(() => {
|
||||
|
||||
Reference in New Issue
Block a user