Skip to content

Wrap the update-log and job-output pre blocks the app shell was clipping - #5819

Merged
atomantic merged 1 commit into
mainfrom
claim/issue-5675
Sep 2, 2026
Merged

Wrap the update-log and job-output pre blocks the app shell was clipping#5819
atomantic merged 1 commit into
mainfrom
claim/issue-5675

Conversation

@atomantic

Copy link
Copy Markdown
Owner

Summary

  • Layout.jsx's root is overflow-x-hidden, so a <pre> wider than the viewport is clipped, not scrollable — the tail is unreachable with no horizontal scrollbar to find. Two <pre> openers still had no wrap or overflow class at all: the self-update log (UpdateTab.jsx) and the read-only legacy script command (JobCard.jsx). Both now match the ProcessLogLines idiom (whitespace-pre-wrap break-all), with the update log additionally capped at max-h-48 overflow-y-auto so a long log doesn't push the rest of the tab off-screen.
  • Local review caught the same defect one layer down: JobCard's two other output blocks had whitespace-pre-wrap but no break class, which only wraps at whitespace. A shell job's last output is full of unbroken paths and URLs that still ran past the clip edge, so it gets break-all. The prompt template beside it gets break-words instead — it is human-authored prose, where breaking mid-word is worse than the rare long token.
  • Layout.jsx's overflow-x-hidden is untouched, per the issue: it is deliberate, and the fix belongs in the leaf.
  • Out of scope, worth a follow-up: 33 other <pre> blocks tree-wide carry whitespace-pre-wrap with no break class. Most render prose and are fine; a mechanical sweep of the machine-output ones is separate work.

Test plan

  • client/src/components/cos/JobCard.test.jsx (new): renders a legacy script job in edit mode and asserts the command <pre> carries whitespace-pre-wrap break-all; renders a shell job with a long unbroken lastOutput and asserts break-all.
  • client/src/components/apps/tabs/UpdateTab.test.jsx: new case supplying a long space-free lastUpdateResult.log and asserting whitespace-pre-wrap, break-all, and overflow-y-auto.
  • Each new assertion was verified as a real guard by reverting the class it pins and confirming the test goes red.
  • cd client && npx vitest run src/components/cos src/components/apps/tabs — 634 passed (52 files).
  • cd client && npx biome lint --error-on-warnings src/components/cos src/components/apps/tabs — clean.
  • Acceptance grep from the issue returns no single-line results.

Closes #5675

…5675)

Layout's root is `overflow-x-hidden`, so a <pre> whose content can exceed the viewport loses its tail off the right edge with no horizontal scrollbar to recover it.

The update log and the read-only legacy script command were the last two single-line <pre> openers in the client tree carrying no wrap or overflow class at all; both now match the ProcessLogLines idiom (`whitespace-pre-wrap break-all`), with the update log additionally capped at `max-h-48 overflow-y-auto` so a long log doesn't push the rest of the tab off-screen.

JobCard's two other output blocks had `whitespace-pre-wrap` but no break class, which only wraps at whitespace — a shell job's last output is full of unbroken paths and URLs that still ran past the clip edge, so it gets `break-all` too. The prompt template beside it gets `break-words` instead: it is human-authored prose, where breaking mid-word is worse than the rare long token.
@atomantic
atomantic merged commit 0bfc79e into main Sep 2, 2026
7 checks passed
@atomantic
atomantic deleted the claim/issue-5675 branch September 2, 2026 06:56
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.

Raw process/agent output renders in unbounded pre blocks that the app shell silently clips instead of scrolling

1 participant