From 706aa41955f86eeb6fb35af0b844048e2f53a788 Mon Sep 17 00:00:00 2001 From: Adam Malczewski Date: Sun, 6 Sep 2026 16:00:12 +0900 Subject: fix(layout): draw diagnostic tile markers inset + frame the sidebar viewport, not its scrolled content MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Two renderer bugs made the diagnostic layout plugin's borders useless: 1. Borders went past the panels and were invisible at screen edges: CSS outlines draw OUTSIDE the border box by default, and tiles span their containers edge-to-edge, so the 4px ring overflowed the visible area and was clipped. The outline is now inset (outline-offset: -4px) so it draws inside the tile's box. 2. The green side border scrolled with the sidebar: the marker was drawn on the TilePanels root, which is the SCROLLED CONTENT of the split's collapsible child. The marker now lives on the split's scroll-viewport div — the sidebar's fixed, opaquely-painted frame: its box never moves (only its contents scroll), and its own outline is never clipped by its overflow. (The aside behind it can't carry the marker — the scroll viewport's bg-base-100 paints over an outline drawn on the aside.) markerStyle() centralizes the full declaration (outline + inset offset) and returns undefined for unmarked/unknown markers, so unmarked trees still render with zero outline CSS (pinned by the existing tests). Paint layering verified with a headless-Chromium screenshot of a probe page reproducing the exact DOM + computed styles. --- src/features/layout/ui/TileLeaf.svelte | 4 ++-- src/features/layout/ui/TilePanels.svelte | 16 +++++++++++-- src/features/layout/ui/TileRoot.test.ts | 28 +++++++++++++++++++++- src/features/layout/ui/TileSplit.svelte | 40 ++++++++++++++++++++++++++++---- src/features/layout/ui/TileStack.svelte | 4 ++-- 5 files changed, 80 insertions(+), 12 deletions(-) (limited to 'src/features/layout/ui') diff --git a/src/features/layout/ui/TileLeaf.svelte b/src/features/layout/ui/TileLeaf.svelte index 2d4a91b..0fd6430 100644 --- a/src/features/layout/ui/TileLeaf.svelte +++ b/src/features/layout/ui/TileLeaf.svelte @@ -11,7 +11,7 @@ */ import type { TileMarker } from "@dispatch/layout-contract"; import { viewRegistry, type RegisteredView } from "../logic/registry"; - import { markerOutline } from "../logic/marker"; + import { MARKER_OUTLINE_OFFSET, markerOutline } from "../logic/marker"; import FallbackTile from "./FallbackTile.svelte"; let { @@ -38,7 +38,7 @@ {/snippet} {#if outline !== undefined} -
{@render content()}
+
{@render content()}
{:else} {@render content()} {/if} diff --git a/src/features/layout/ui/TilePanels.svelte b/src/features/layout/ui/TilePanels.svelte index 877ce2e..78dd7d1 100644 --- a/src/features/layout/ui/TilePanels.svelte +++ b/src/features/layout/ui/TilePanels.svelte @@ -9,7 +9,7 @@ import type { LayoutOp, PanelsNode, Path } from "@dispatch/layout-contract"; import { viewRegistry } from "../logic/registry"; import { addPanelOp, firstPanelView, removePanelOp, swapPanelOp } from "../logic/panels-edit"; - import { markerOutline } from "../logic/marker"; + import { markerStyle } from "../logic/marker"; import TileLeaf from "./TileLeaf.svelte"; let { @@ -17,11 +17,20 @@ path, ports, onEdit, + renderMarker = false, }: { node: PanelsNode; path: Path; ports?: unknown; onEdit: (ops: readonly LayoutOp[]) => void; + /** + * Whether to draw the node's diagnostic marker on this root. Default NO: + * a panels node is the scrolled CONTENT of a split's collapsible child, + * so an outline here wraps the full scrollable region and scrolls with + * it — the split draws the marker on the aside (the fixed viewport) + * instead. Pass `true` only for a panels node used outside a split. + */ + renderMarker?: boolean; } = $props(); // Panel-eligible views only (decision 5): chat/composer/message-queue never @@ -30,7 +39,10 @@ const addView = $derived(firstPanelView(panelViews)); -
+
{#each node.panels as panel, idx (idx)}
diff --git a/src/features/layout/ui/TileRoot.test.ts b/src/features/layout/ui/TileRoot.test.ts index ace280a..2f95854 100644 --- a/src/features/layout/ui/TileRoot.test.ts +++ b/src/features/layout/ui/TileRoot.test.ts @@ -245,8 +245,34 @@ describe("TileRoot", () => { }); const stack = container.querySelector("[data-testid='fixture-a']")?.closest(".flex-col"); expect(stack?.getAttribute("style")).toContain("outline: 4px solid red"); + // The SIDE marker frames the SCROLL CONTAINER — the sidebar's fixed, + // opaquely-painted viewport (the aside's bg is transparent; this div's + // bg-base-100 would cover an outline drawn on the aside). The panels + // root is its SCROLLED content, so an outline there would wrap the + // whole scrollable region and scroll along with it. + const viewport = container.querySelector("[data-testid='sidebar-scroll-viewport']"); + expect(viewport?.getAttribute("style")).toContain("outline: 4px solid green"); + }); + + it("outlines are INSET so they draw inside the tile's box (never clipped at screen edges)", () => { + // Tiles span their containers edge-to-edge, so a default (outside) + // outline overflows the visible area and is clipped away — the offset + // pulls the ring inside the box. Pin it on both marked tiles. + const { container } = render(TileRoot, { + props: { tree: markedTestTree(), collapse: createCollapseStore({ viewportWidth: 1024 }) }, + }); + const stack = container.querySelector("[data-testid='fixture-a']")?.closest(".flex-col"); + expect(stack?.getAttribute("style")).toContain("outline-offset: -4px"); + const viewport = container.querySelector("[data-testid='sidebar-scroll-viewport']"); + expect(viewport?.getAttribute("style")).toContain("outline-offset: -4px"); + }); + + it("the panels CONTENT carries no outline (it scrolls — the marker must not scroll with it)", () => { + const { container } = render(TileRoot, { + props: { tree: markedTestTree(), collapse: createCollapseStore({ viewportWidth: 1024 }) }, + }); const panels = container.querySelector("[data-testid='fixture-b']")?.closest(".gap-2"); - expect(panels?.getAttribute("style")).toContain("outline: 4px solid green"); + expect(panels?.getAttribute("style") ?? "").not.toContain("outline"); }); it("an unmarked tree draws NO outlines (trees without the field render exactly as before)", () => { diff --git a/src/features/layout/ui/TileSplit.svelte b/src/features/layout/ui/TileSplit.svelte index b41f9fc..b526ccd 100644 --- a/src/features/layout/ui/TileSplit.svelte +++ b/src/features/layout/ui/TileSplit.svelte @@ -6,9 +6,9 @@ * in-flow push vs `max-lg:absolute` overlay with a backdrop. Collapse state * is chrome (per-node-id), owned by the injected collapse store. */ - import type { LayoutOp, Path, SplitNode } from "@dispatch/layout-contract"; + import type { LayoutOp, Path, SplitNode, TileMarker } from "@dispatch/layout-contract"; import type { CollapseStore } from "../logic/collapse"; - import { markerOutline } from "../logic/marker"; + import { markerStyle } from "../logic/marker"; import TileNode from "./TileNode.svelte"; let { @@ -36,10 +36,31 @@ const key = keyOf(i, id); return state.openByNode[key] ?? state.defaultOpen; } + + /** + * The scroll container's inline style: the fixed sidebar width + slide + * transform + any diagnostic marker (inset) — none when unmarked. + * + * The marker goes on THIS div, not the aside: the inner div paints an + * OPAQUE full-height background (bg-base-100) that would cover an outline + * drawn on the aside. This div's own box never moves — only its contents + * scroll — and overflow-y-auto clips descendants, never an element's own + * outline, so the marker frames exactly the visible sidebar. + */ + function scrollViewportStyle( + basis: number | undefined, + open: boolean, + marker: TileMarker | undefined, + ): string { + const parts = [`width: ${basis ?? 320}px`, `transform: translateX(${open ? "0" : "100%"})`]; + const markerCss = markerStyle(marker); + if (markerCss !== undefined) parts.push(markerCss); + return parts.join("; "); + } {#if node.dir === "col"} -
+
{#each node.children as child, i (i)} {@const key = keyOf(i, child.node.id)}
{:else} -
+
{#each node.children as child, i (i)} {@const key = keyOf(i, child.node.id)} {#if child.collapsible} {@const open = isOpen(i, child.node.id)} +