diff --git a/apps/web/e2e/trace.spec.ts b/apps/web/e2e/trace.spec.ts index 97a7e85..fd177e3 100644 --- a/apps/web/e2e/trace.spec.ts +++ b/apps/web/e2e/trace.spec.ts @@ -42,6 +42,14 @@ test('the trace pane shows machine state at the cursor (X5)', async ({ page }) = await expect(facts).toContainText('#6'); const stackHeading = await page.locator('[data-testid="trace-stack"] h3').textContent(); expect(stackHeading).toMatch(/Stack \([1-9]\d*\)/); + + // Regression: a full 32-byte word must stay inside its own pane, never + // bleeding into Memory or Calldata beside it (missing `.ss-trace-panes` + // selector scoping once let long hex words render unclipped). + const stackPane = page.locator('[data-testid="trace-stack"]'); + const paneRight = (await stackPane.boundingBox())!.x + (await stackPane.boundingBox())!.width; + const wordBox = await stackPane.locator('li code').first().boundingBox(); + expect(wordBox!.x + wordBox!.width).toBeLessThanOrEqual(paneRight + 1); }); test('step modes navigate the timeline by keyboard (X6)', async ({ page }) => { diff --git a/apps/web/src/app/app.css b/apps/web/src/app/app.css index d9fda61..f6bc893 100644 --- a/apps/web/src/app/app.css +++ b/apps/web/src/app/app.css @@ -1463,13 +1463,6 @@ input[readonly] { } /* ===== Trace inspector ===== */ -.ss-trace { - border: var(--ss-border); - border-radius: var(--ss-radius); - padding: var(--ss-space-2); - margin-top: var(--ss-space-2); -} - .ss-trace-scrub { display: flex; align-items: center; @@ -1490,7 +1483,7 @@ input[readonly] { margin-top: var(--ss-space-2); } -.ss-trace h3 { +.ss-trace-panes h3 { font-family: var(--ss-font-ui); font-size: 0.72rem; letter-spacing: var(--ss-tracking-label); @@ -1499,7 +1492,7 @@ input[readonly] { margin: var(--ss-space-2) 0 var(--ss-space-1); } -.ss-trace ol { +.ss-trace-panes ol { list-style: none; margin: 0; padding: 0; @@ -1510,14 +1503,14 @@ input[readonly] { border: var(--ss-border); } -.ss-trace li { +.ss-trace-panes li { display: flex; gap: var(--ss-space-2); padding: 1px var(--ss-space-1); overflow: hidden; } -.ss-trace li code { +.ss-trace-panes li code { overflow: hidden; text-overflow: ellipsis; white-space: nowrap;