Skip to content

Rebuild the Virtual Environment Runner card - #381

Merged
dovvnloading merged 1 commit into
mainfrom
ux/code-sandbox-node
Sep 1, 2026
Merged

dovvnloading merged 1 commit into
mainfrom
ux/code-sandbox-node

Conversation

@dovvnloading

Copy link
Copy Markdown
Owner

Problem

The Virtual Environment Runner card clipped its own content at every level.

  • The body is a max-height flex column, and a flex container under height pressure shrinks its children below their content size unless told not to. Every textarea and section was being compressed until it cut its own text mid-glyph: a two-row requirements box showing 1.6 rows, the prompt cut through its descenders, the terminal showing half a line.
  • Requirements, prompt, code and terminal each carried their own scroll region inside the scrolling body - up to five nested scrollbars on one 420px card.
  • The requirements manifest sat first, permanently open, above the prompt.
  • A permanent "No output yet." terminal rendered on every fresh node.
  • "Code" and "PYTHON" stacked two all-caps headers over the same pane.
  • Run was a neutral chip identical to Cancel, and kept reading "Run", merely disabled, while a run was in flight.

Change

  • flex-shrink: 0 on every body child - the mid-glyph clipping's actual cause.
  • The prompt leads. Both inputs auto-size to their content (field-sizing: content, capped, no resize handles); an input never scrolls what was just typed.
  • Requirements fold into a native <details> whose summary carries the package count. The blur/Enter commit contract is unchanged.
  • Only the two outputs scroll themselves (code 185px, terminal 150px), and the card budget (560, body 520) is spent so the common full state - code plus terminal - fits with no outer scrollbar. An outer scroll on this card is what cut through the middle of whichever pane straddled its edge.
  • The terminal renders only when a run is in flight or output exists.
  • The duplicate "Code" label is gone; the fence's own PYTHON header names the pane once. Run is the card's one filled primary and reads "Running…" while busy; Cancel is quiet with a destructive hover.
  • Unchanged: all intents, the live-stream subscription, the approval panel wiring, and the machine-output posture of the terminal (plain preformatted text, never the markdown pipeline).

Test plan

  • CodeSandboxNodeView.test.tsx: 61 pass. Two assertions updated for the deliberate changes: the busy-state label ("Running…" disabled, rather than a disabled button still reading "Run"), and the removed duplicate header (asserted as absent, with the pane's presence checked by class).
  • npm run check (schema drift, typecheck, lint, vitest, build, bundle size) against a clean checkout of this branch: 2135 pass.
  • Manual against the built bundle with the incident fixture: the prompt, folded dependencies row with count, single-header code pane and terminal all render unclipped at 147% zoom; the full card (code + terminal populated) shows no outer scrollbar; opening the dependencies disclosure auto-sizes the manifest with no inner scroll.

The card clipped its own content everywhere it could:

- The body is a max-height flex column, and a flex container under height
  pressure shrinks its children below their content size unless told not
  to. Every textarea and section was being compressed until it cut its own
  text mid-glyph: a two-row requirements box showing 1.6 rows, the prompt
  cut through its descenders, the terminal showing half a line. flex-shrink:
  0 on every body child is the actual fix.
- Requirements, prompt, code and terminal each carried their own scroll
  region inside the scrolling body - up to five nested scrollbars on one
  420px card.
- The requirements manifest sat first, permanently open, above the prompt -
  the qualifier before the question.
- A permanent "No output yet." terminal rendered on every fresh node.
- "Code" + "PYTHON" stacked two all-caps headers over the same pane.
- Run was a neutral chip identical to Cancel, and kept reading "Run",
  merely disabled, while a run was in flight.

Changes:

- flex-shrink: 0 on all body children; nothing clips mid-line again.
- The prompt leads. Both inputs auto-size to their content (field-sizing,
  capped, no resize handles) - an input never scrolls what was just typed.
- Requirements fold into a native <details> whose summary carries the
  package count; the blur/Enter commit contract is unchanged.
- Only the two outputs scroll themselves (code 185, terminal 150), and the
  card budget (560, body 520) is spent so the common full state - code plus
  terminal - fits with no outer scrollbar. An outer scroll on this card is
  what cut through the middle of whichever pane straddled its edge.
- The terminal renders only when a run is in flight or output exists.
- The duplicate "Code" label is gone; the fence's own PYTHON header names
  the pane once. The run button is the card's one filled primary and reads
  "Running…" while busy; Cancel is quiet with a destructive hover.
- The terminal keeps its deep inset; the machine-output posture (plain
  preformatted text, never the markdown pipeline) is unchanged, as are all
  intents, the stream subscription, and the approval panel wiring.

Tests: 61 pass; two assertions updated for the deliberate changes (the
busy label, the removed duplicate header).

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
@dovvnloading
dovvnloading merged commit 798fe9e into main Sep 1, 2026
4 checks passed
@dovvnloading
dovvnloading deleted the ux/code-sandbox-node branch September 1, 2026 10:03
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant