Draw the look's ground behind a stacked dashboard

A phone stacks a dashboard instead of drawing it on a canvas, and the canvas
was what carried the ground, so a stack had only the palette's colour. The
panel and the editor now draw the look's ground behind the stack, held still
while it scrolls. Glass's drift stops under reduced motion as it does on a
canvas.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01WgBfkm4rCmtd1T4vHWjEPx

docs/interface/dashboards.md

@@ -13,7 +13,9 @@ to a paired screen, such as a wall tablet.
 4. **Publish** when the dashboard is ready.
 
 Edits stay in a draft; paired screens show the published version. On phones,
-tiles stack in one column and dragging is disabled, but settings remain editable.
+tiles stack in one column over the dashboard's ground (its background image,
+or the Glass look's drifting colours) and dragging is disabled, but settings
+remain editable.
 In edit mode, ⌘Z / Ctrl-Z undoes an edit and ⌘⇧Z / Ctrl-Shift-Z redoes it.
 
 A widget can end up below the canvas, for example after the canvas was made

frontend/src/components/Dashboard/DashboardEditor.tsx

@@ -42,6 +42,7 @@ import { handleError } from "@/utils"
 import { DashboardPalette } from "./DashboardPalette"
 import {
   areaOf,
+  CanvasGround,
   CanvasSurface,
   canvasOf,
   columnsOf,
@@ -657,7 +658,8 @@ export function DashboardEditor({
         )}
         style={root.style}
       >
-        <div className={cn("h-full overflow-y-auto", rail && "pb-20")}>
+        <CanvasGround dashboard={draft} />
+        <div className={cn("relative h-full overflow-y-auto", rail && "pb-20")}>
           <DashboardView
             dashboard={draft}
             stacked

frontend/src/components/Dashboard/PanelSurface.tsx

@@ -2,6 +2,7 @@ import { useCallback } from "react"
 
 import type { Dashboard } from "@/components/Dashboard/DashboardView"
 import {
+  CanvasGround,
   CanvasSurface,
   DashboardView,
   isRound,
@@ -67,9 +68,14 @@ export function PanelSurface({
         // the look on: this branch mounts what `CanvasSurface` mounts for the
         // other one, touch included.
         <LookProvider dashboard={dashboard} touch={touch}>
+          {/* The look's ground, held to the screen while the stack scrolls
+              over it, as it stays put under a canvas. */}
+          <div className="pointer-events-none fixed inset-0">
+            <CanvasGround dashboard={dashboard} />
+          </div>
           {/* Padded here rather than by the route: the stack overflows this
               box, so only padding inside the overflow clears the rail. */}
-          <div className={cn(rail && "pb-24")}>
+          <div className={cn("relative", rail && "pb-24")}>
             <DashboardView dashboard={dashboard} stacked />
           </div>
           {rail ? (