From a7fe925fdf60eb7f24718aab878e47795eca51c8 Mon Sep 17 00:00:00 2001
From: stroblme <stroblme@posteo.de>
Date: Thu, 15 Oct 2026 16:08:53 +0200
Subject: [PATCH] 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                          | 4 +++-
 frontend/src/components/Dashboard/DashboardEditor.tsx | 4 +++-
 frontend/src/components/Dashboard/PanelSurface.tsx    | 8 +++++++-
 3 files changed, 13 insertions(+), 3 deletions(-)

diff --git a/docs/interface/dashboards.md b/docs/interface/dashboards.md
index 775a847..bb159e4 100644
--- a/docs/interface/dashboards.md
+++ b/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
diff --git a/frontend/src/components/Dashboard/DashboardEditor.tsx b/frontend/src/components/Dashboard/DashboardEditor.tsx
index 8a3acb4..28a3d17 100644
--- a/frontend/src/components/Dashboard/DashboardEditor.tsx
+++ b/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
diff --git a/frontend/src/components/Dashboard/PanelSurface.tsx b/frontend/src/components/Dashboard/PanelSurface.tsx
index c3c4a2a..39677f6 100644
--- a/frontend/src/components/Dashboard/PanelSurface.tsx
+++ b/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 ? (