From 706aa41955f86eeb6fb35af0b844048e2f53a788 Mon Sep 17 00:00:00 2001
From: Adam Malczewski <github@tradam.dev>
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/TileStack.svelte | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

(limited to 'src/features/layout/ui/TileStack.svelte')

diff --git a/src/features/layout/ui/TileStack.svelte b/src/features/layout/ui/TileStack.svelte
index d2ee267..c8f8cae 100644
--- a/src/features/layout/ui/TileStack.svelte
+++ b/src/features/layout/ui/TileStack.svelte
@@ -12,7 +12,7 @@
    */
   import type { LayoutOp, Path, StackNode } 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 {
@@ -32,7 +32,7 @@
 
 <div
   class="flex h-full min-h-0 min-w-0 flex-col overflow-hidden"
-  style:outline={markerOutline(node.marker)}
+  style={markerStyle(node.marker)}
 >
   {#each node.children as child, i (i)}
     <div class="min-h-0 min-w-0" style={"flex: " + (child.grow ?? 0) + (child.grow === undefined ? " 0 auto" : " 1 0%")}>
-- 
cgit v1.2.3