Give a dashboard the panel's own size, and put the dots on its grid

A dashboard now carries the canvas it is drawn for (canvas_width /
canvas_height, presets plus two numbers in the settings panel). Editor and
wall panel render that surface at its true pixel size and scale it to fit,
so a side panel opening changes only the scale — never the arrangement
being made. With the width and column count known the dot pitch is exact,
(width + gap) / columns by row height + gap, so a dot sits where every
widget corner snaps. The wall panel shows no dots.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01H7LwYgJfpkbLCTeiAf8U4A

frontend/src/routes/view.$name.tsx

@@ -2,7 +2,10 @@ import { useQuery } from "@tanstack/react-query"
 import { createFileRoute, redirect } from "@tanstack/react-router"
 
 import type { Dashboard } from "@/components/Dashboard/DashboardView"
-import { DashboardView } from "@/components/Dashboard/DashboardView"
+import {
+  CanvasSurface,
+  DashboardView,
+} from "@/components/Dashboard/DashboardView"
 import { dashboardQueryOptions } from "@/components/Dashboard/queries"
 import { useFlowSocket } from "@/components/Flow/useFlowSocket"
 import { isLoggedIn } from "@/hooks/useAuth"
@@ -30,8 +33,14 @@ function PanelView() {
   const { data: dashboard } = useQuery(dashboardQueryOptions(name))
 
   return (
-    <main className="dot-canvas min-h-svh w-full overflow-y-auto p-4">
-      {dashboard ? <DashboardView dashboard={dashboard as Dashboard} /> : null}
+    <main className="h-svh w-full overflow-hidden p-4">
+      {dashboard ? (
+        // The panel's own surface, scaled to whatever screen it landed on. No
+        // dots: nothing is being arranged here.
+        <CanvasSurface dashboard={dashboard as Dashboard}>
+          {() => <DashboardView dashboard={dashboard as Dashboard} />}
+        </CanvasSurface>
+      ) : null}
     </main>
   )
 }