Draw a wall panel at the size it was drawn for

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.

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

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}

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

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