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} >