Skip to content

Sweep the remaining pre blocks that wrap at whitespace but not on unbroken tokens #5820

Description

@atomantic

ProblemLayout.jsx's root is w-full max-w-full overflow-x-hidden, so anything wider than the viewport is clipped, not scrollable. whitespace-pre-wrap alone only wraps at whitespace — it does nothing for an unbroken token (a long path, a URL, a base64 blob, a stack frame). 33 <pre> blocks in client/src carry whitespace-pre-wrap with no break-all / break-words, so machine output containing one long token still runs past the clip edge with no scrollbar to recover it.

#5675 (PR #5819) fixed the two <pre> openers that had no wrap class at all, plus the two inside JobCard.jsx that the review pass caught. This issue is the remaining sweep.

Enumerate them

grep -rn '<pre' client/src --include='*.jsx' | grep -v test \
  | grep 'whitespace-pre-wrap' | grep -vE 'break-all|break-words'

Plan

  1. Walk the list and classify each block by what it renders:
    • Machine output (logs, command output, JSON dumps, stack traces, model responses, raw API payloads) → add break-all, matching client/src/components/ui/ProcessLogLines.jsx:29, the canonical renderer.
    • Human-authored prose (prompt templates, treatments, bios, user stories, wiki bodies) → add break-words instead. Breaking mid-word is worse than the rare long token in prose.
      Precedent for the split is client/src/components/cos/JobCard.jsx after Raw process/agent output renders in unbounded pre blocks that the app shell silently clips instead of scrolling #5675: job.lastOutput takes break-all, job.promptTemplate takes break-words.
  2. Leave Layout.jsx's overflow-x-hidden alone — it is deliberate (it stops one wide child from giving the whole app a horizontal scrollbar). The fix belongs in the leaf.
  3. Do not add overflow-x-auto as the fix. A horizontal scroller inside a card is worse on touch, and a wrapped block keeps every character reachable at 360px.

Tests — this is a wide mechanical sweep; per-block render tests would be duplication of the same product outcome. Add one source-scanning guard test instead (e.g. client/src/preWrapClasses.test.js) that runs the grep above over tracked .jsx files and fails when a non-test <pre> opener has whitespace-pre-wrap without a break-* class. That uniquely catches the whole class of regression, including blocks added later.

Acceptance criteria

  • The grep above returns no results.
  • The guard test fails when a break-* class is removed from any <pre> (verify with a bypass probe).

Out of scopeLayout.jsx's overflow-x-hidden, <code> spans, and <pre> blocks that legitimately want horizontal scrolling (none identified so far).

Metadata

Metadata

Assignees

Labels

effort:lowEffort: lowmodel:lightModel size: lightplanTracked by /do:replanuxProposed from a UX/design audit

Projects

No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions