From 8679b0bcf7d9ef6a6cf8d3771a369d72b5481cb7 Mon Sep 17 00:00:00 2001 From: stroblme Date: Tue, 25 Aug 2026 17:30:37 +0200 Subject: [PATCH] Draw a wall panel at the size it was drawn for MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit A dashboard whose canvas matches the screen came out at 95% of it: the panel and view routes inset the canvas by a further 16px, on top of the margin the grid already keeps from its own edges. Two margins, one of them costing the scale. The padding now applies only to the stacked phone layout, which has no canvas to shrink. A slider's tick labels are the third row of a control that has three, and the first thing a short tile runs out of; `ticks: false` drops them and keeps the reading and the track. The house's two sliders set it. The 1024x600 preset is named for what it is rather than for a diagonal it may not have — the same resolution is sold as a seven-inch panel and as a ten-inch one. Co-Authored-By: Claude Opus 5 (1M context) Claude-Session: https://claude.ai/code/session_012n6CehUsHYYUXJ48rxaD18 --- frontend/src/components/Dashboard/DashboardView.tsx | 11 +++++++++-- frontend/src/components/Dashboard/widgets.tsx | 6 +++++- frontend/src/routes/panel.$id.tsx | 8 ++++++-- frontend/src/routes/view.$name.tsx | 6 ++++-- 4 files changed, 24 insertions(+), 7 deletions(-) diff --git a/frontend/src/components/Dashboard/DashboardView.tsx b/frontend/src/components/Dashboard/DashboardView.tsx index 4ffa6f4..c147230 100644 --- a/frontend/src/components/Dashboard/DashboardView.tsx +++ b/frontend/src/components/Dashboard/DashboardView.tsx @@ -26,9 +26,16 @@ export const COLUMN_CHOICES = [6, 8, 12, 16, 24] /** The panel a dashboard is drawn for, if the document does not say. */ export const DEFAULT_CANVAS = { width: 1920, height: 1080 } -/** Panels worth a name; anything else is typed in as two numbers. */ +/** + * Panels worth a name; anything else is typed in as two numbers. + * + * Named for what they are, not for a diagonal: 1024x600 is sold as a seven-inch + * panel and as a ten-inch one, and the dashboard is laid out in pixels either + * way. A canvas set to the screen it hangs on now draws at 1:1 — the routes + * that show a panel no longer inset it. + */ export const CANVAS_PRESETS = [ - { label: '7" panel', width: 1024, height: 600 }, + { label: "Wall panel", width: 1024, height: 600 }, { label: '10" tablet', width: 1280, height: 800 }, { label: "Full HD", width: 1920, height: 1080 }, { label: '10" tablet, portrait', width: 800, height: 1280 }, diff --git a/frontend/src/components/Dashboard/widgets.tsx b/frontend/src/components/Dashboard/widgets.tsx index d62850a..f6873fc 100644 --- a/frontend/src/components/Dashboard/widgets.tsx +++ b/frontend/src/components/Dashboard/widgets.tsx @@ -494,7 +494,11 @@ function SliderWidget({ widget, dashboard }: WidgetProps) { max={num(cfg.max, 100)} step={num(cfg.step, 1)} unit={unit} - ticks + // On by default, because a slider without them says how far along it + // is and not what that means. Off is for a short tile: they are the + // last row of a control that has three, and on a seven-inch panel + // that row is the difference between fitting and being cut off. + ticks={cfg.ticks !== false} label={widget.title || target} disabled={locked} onCommit={send} diff --git a/frontend/src/routes/panel.$id.tsx b/frontend/src/routes/panel.$id.tsx index b942ef2..912f6a9 100644 --- a/frontend/src/routes/panel.$id.tsx +++ b/frontend/src/routes/panel.$id.tsx @@ -81,9 +81,13 @@ function PanelRoute() { data-touch={root["data-touch"]} data-palette={root["data-palette"]} className={cn( - "relative h-svh w-full bg-background p-4 text-foreground", + "relative h-svh w-full bg-background text-foreground", root.className, - stacked ? "overflow-y-auto" : "overflow-hidden", + // Padding only when stacked. A canvas is already held off its own + // edges by the grid inset, and a second margin outside it costs the + // scale: a dashboard drawn for this screen would come out at 95% of + // the screen it was drawn for. + stacked ? "overflow-y-auto p-4" : "overflow-hidden", )} style={root.style} > diff --git a/frontend/src/routes/view.$name.tsx b/frontend/src/routes/view.$name.tsx index 72a419f..3425b86 100644 --- a/frontend/src/routes/view.$name.tsx +++ b/frontend/src/routes/view.$name.tsx @@ -63,9 +63,11 @@ function PanelView() { data-touch={root["data-touch"]} data-palette={root["data-palette"]} className={cn( - "h-svh w-full bg-background p-4 text-foreground", + "h-svh w-full bg-background text-foreground", root.className, - stacked ? "overflow-y-auto" : "overflow-hidden", + // See `panel.$id`: the canvas keeps its own margin, so a second one + // here only shrinks it. + stacked ? "overflow-y-auto p-4" : "overflow-hidden", )} style={root.style} >