deepseek-harness/examples/desktop/docs/layout-overlap-audit.md

Layout overlap audit — machine scan

Auto-generated by scripts/layout-overlap-scan.mjs. Re-run any time.

Interpretation (top-line)

1. Orphan floating overlays are the biggest source of visible-page damage: .fork-compare-drawer / .playground-compare-drawer / .devtools-drawer remain visible after a fixture or button opens them. On every subsequent pane switch the drawer sits on top, hiding the actual pane. The fix is a tab-switch hook that hides these [hidden] on switchTo(). Task-list #104 tracks this.

2. True per-pane overlap count is small once the orphan overlays are treated as one root cause: rubrics #cancel × interact-card (only reproducible because the fixture-seeded chat state bleeds through the orphan drawer's frame), tracing <th> × devtools-drawer. All three HIGH overlap findings collapse onto the same tab-switch bug.

3. Overflow findings are legitimate density issues at 800px:

   • .bench-table row body overflows by 66–92px because column widths are hardcoded; needs a min-width breakpoint.
   • .plugins-create-zone .create-card icon-then-title-then-desc column overflows the fixed narrow card at 800px.
   • #rubrics-catalog cards overflow horizontally at 800px.
   • .header-lead .page-title truncates by 12px on Bench narrow.

4. CSS static SUSPECT count is dominated by drawer slide-in transform: translateX(0) sites and the two negative-margin glue-together lines in .tool-row + .tool-result-row and .partial-tool-row. Both negative-margins are 4-8px, well below the 18px payload-controls hack tier; still called out for review.

---

Generated: 2026-07-18T14:36:33.663Z Widths: 1512 / 1100 / 800px, height 900 Panes visited: 14 × 3 widths = 42 scans Fixtures seeded before chat re-visit: 1.1-trace-full, 2.3-toolcall-delta-stream, 2.5-compact-before-after, 2.6-subagent-inline-trace, 2.2-reasoning-interleaved Exclusion: known payload-controls -18px hack (in-fix); decorative pseudo-elements listed in scan script.

Summary

Severity	Overlap	Overflow
HIGH	0	0
MEDIUM	0	0
LOW	1	0

Orphan floating overlays (drawers left open when they should be closed): 39

Orphan floating overlays

Body-level drawers found visible on panes that don't own them. Each is a position: absolute/fixed overlay that a fixture or button opens but never closes on tab-switch — it covers the current pane's content until dismissed manually.

• pane hub — .fork-compare-drawer (widths 800/1100/1512px)
• pane hub — .playground-compare-drawer (widths 800/1100/1512px)
• pane bench — .fork-compare-drawer (widths 800/1100/1512px)
• pane bench — .playground-compare-drawer (widths 800/1100/1512px)
• pane bench — .devtools-drawer (widths 800/1100/1512px)
• pane rubrics — .fork-compare-drawer (widths 800/1100/1512px)
• pane rubrics — .playground-compare-drawer (widths 800/1100/1512px)
• pane rubrics — .devtools-drawer (widths 800/1100/1512px)
• pane runtimes — .fork-compare-drawer (widths 800/1100/1512px)
• pane runtimes — .playground-compare-drawer (widths 800/1100/1512px)
• pane runtimes — .devtools-drawer (widths 800/1100/1512px)
• pane mission — .fork-compare-drawer (widths 800/1100/1512px)
• pane mission — .playground-compare-drawer (widths 800/1100/1512px)
• pane mission — .devtools-drawer (widths 800/1100/1512px)
• pane growth — .fork-compare-drawer (widths 800/1100/1512px)
• pane growth — .playground-compare-drawer (widths 800/1100/1512px)
• pane growth — .devtools-drawer (widths 800/1100/1512px)
• pane prs — .fork-compare-drawer (widths 800/1100/1512px)
• pane prs — .playground-compare-drawer (widths 800/1100/1512px)
• pane prs — .devtools-drawer (widths 800/1100/1512px)
• pane settings — .fork-compare-drawer (widths 800/1100/1512px)
• pane settings — .playground-compare-drawer (widths 800/1100/1512px)
• pane settings — .devtools-drawer (widths 800/1100/1512px)
• pane chat — .fork-compare-drawer (widths 800/1100/1512px)
• pane chat — .playground-compare-drawer (widths 800/1100/1512px)
• pane chat — .devtools-drawer (widths 800/1100/1512px)
• pane tree — .fork-compare-drawer (widths 800/1100px)
• pane tree — .playground-compare-drawer (widths 800/1100px)
• pane tree — .devtools-drawer (widths 800/1100px)
• pane context — .fork-compare-drawer (widths 800/1100px)
• pane context — .playground-compare-drawer (widths 800/1100px)
• pane context — .devtools-drawer (widths 800/1100px)
• pane tracing — .fork-compare-drawer (widths 800/1100px)
• pane tracing — .playground-compare-drawer (widths 800/1100px)
• pane tracing — .devtools-drawer (widths 800/1100px)
• pane plugins — .fork-compare-drawer (widths 800/1100px)
• pane plugins — .playground-compare-drawer (widths 800/1100px)
• pane plugins — .devtools-drawer (widths 800/1100px)
• pane hub — .devtools-drawer (widths 800/1100px)

Overlap findings (real z-order intrusion, text > 20% covered)

pane: tracing

• LOW @ 1100px — table.tracing-page-table > thead > tr > th.tracing-page-th.num:nth-of-type(6) × aside.devtools-drawer:nth-of-type(2) > div.devtools-search-row:nth-of-type(4) > label.devtools-autoscroll > input (89% intersection)
  • A text: “P99 Latency”
  • shot: docs/layout-audit-shots/w1100-tracing-38.png

Overflow findings (scrollWidth > clientWidth, overflow:visible)

None.

Track 1 — CSS static suspects

Grep of src/renderer/style.css for the layout mechanisms that can pull an element off its own cell onto another's: negative margin, position: absolute (without a scoped stacking context), float, transform: translate with non-trivial offsets. SAFE = decorative pseudo-element / accepted idiom; SUSPECT = worth eyeballing; KNOWN-IN-FIX = the payload-controls -18px hack in the in-flight fix.

Risk	Count
SUSPECT	15
KNOWN-IN-FIX	0
SAFE	52

SUSPECT sites

• style.css:289 (absolute) — .msg .fork-here
  • rule: position: absolute; top: 6px; right: 8px;
• style.css:612 (translate) — .layout-toast.show
  • rule: .layout-toast.show { opacity: 1; transform: translateY(0); }
• style.css:1230 (absolute) — .playground-stream .bubble-error
  • rule: /* Compare drawer sits above the playground stream (position:absolute). */
• style.css:1502 (translate) — .tool-json-drawer.open
  • rule: .tool-json-drawer.open { transform: translateX(0); }
• style.css:2631 (translate) — .quickchat-scrim.quickchat-open .quickchat-card
  • rule: .quickchat-scrim.quickchat-open .quickchat-card { transform: translateY(0); }
• style.css:3020 (absolute) — .debug-popover .debug
  • rule: position: absolute;
• style.css:4152 (absolute) — .tree-preview-timeline-empty
  • rule: position: absolute;
• style.css:5198 (absolute) — .card.steer .steer-dismiss
  • rule: position: absolute; top: 6px; right: 8px;
• style.css:6600 (negative-margin) — .assistant-turn > .turn-body > .tool-row + .tool-result-row
  • rule: margin-top: -4px; /* pulls result up under call */
• style.css:6730 (negative-margin) — .turn-child.tool-row.partial-tool-row
  • rule: margin-left: -8px; /* keep the row's baseline aligned with sealed rows */
• style.css:7797 (translate) — .rubric-detail-drawer.open
  • rule: .rubric-detail-drawer.open { transform: translateX(0); }
• style.css:7881 (translate) — .annotation-drawer.open
  • rule: .annotation-drawer.open { transform: translateX(0); }
• style.css:8172 (translate) — .export-drawer.open
  • rule: .export-drawer.open { transform: translateX(0); }
• style.css:10488 (negative-margin) — ``
  • rule: * margin-top:-18px + float:right hack that overlapped when text grew. */
• style.css:10488 (float) — ``
  • rule: * margin-top:-18px + float:right hack that overlapped when text grew. */

KNOWN-IN-FIX sites (excluded from DOM scan)

None.