Fix trace State pane words bleeding across Stack/Memory/Calldata columns

[halaprix]

The bug

In the Trace → State tab, long words (a stack word, a memory word, calldata) render
without clipping and bleed across the Stack / Memory / Calldata columns.

Root cause

app.css has rules meant to clip each list item's hex word to one line:

.ss-trace li code {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ss-trace ol, .ss-trace li, .ss-trace li code, and .ss-trace h3 are all
descendant selectors — they only apply to elements inside something carrying the
literal class ss-trace. Nothing in the app has that class. The v1.1 cockpit
redesign moved this panel's wrapper to .ss-probe-trace / .ss-probe-body
(ProbePane.tsx), and this CSS block was never updated to follow. The base
.ss-trace { border; padding; margin-top } rule was orphaned the same way.

So every one of these rules silently matched zero elements, and a stack/memory
word rendered at plain browser defaults for <code> — display: inline; white-space: normal; overflow: visible — which is exactly the "unclipped,
bleeding across columns" look in the report.

The fix

Retargeted the four selectors to .ss-trace-panes, the class that actually wraps
these lists in MachineStatePanes.tsx, and removed the now-fully-orphaned base
.ss-trace rule alongside it.

I checked this wasn't accidentally relied on elsewhere: ObservationList.tsx's
<ol>/<li> (the Accesses tab) use their own .ss-obs-* classes and were never
under a .ss-trace-classed ancestor either, so retargeting these four rules to
.ss-trace-panes changes nothing outside the State tab.

Verification

Confirmed with real computed styles from the dev build, not just reasoning:

	Before	After
<code> display	inline	block
white-space	normal	nowrap
overflow	visible	hidden
word width vs. pane width	overflows into siblings	contained

Screenshot after the fix — Stack / Memory / Calldata each stay in their own
column with clean single-line truncation.

Added a geometry assertion to the existing X5 trace test (trace.spec.ts) so a
word's right edge can never exceed its own pane's right edge again — this is a
regression a snapshot or a toContainText check wouldn't catch, since the text
content is unchanged; only the layout was broken.

Gate	Result
format:check, lint, typecheck	clean
test:unit	241/241
test:e2e	62/62, including the new geometry assertion
fixtures:verify	no drift
release:verify	passed
build:check	226 KB main entry

🤖 Generated with Claude Code

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
slotscope	Ready	Preview	Jul 31, 2026 12:51pm