feat(chat): prose code blocks get room — T3, and the plan is complete - #79
Merged
Conversation
docs/CHAT-TYPOGRAPHY.md D5, the last slice. `pre` padding 9px 11px -> 12px 14px, with the
block's vertical margin joining D3's em rhythm so raising the prose size opens it too.
THE PART D5 DID NOT ANTICIPATE: `pre` is a GLOBAL selector in this stylesheet, and it draws
four different things — the empty state's ASCII logo, the MCP approval card's command
block, the terminal output pane, and the prose code block the decision is actually about.
Only the logo has no padding override of its own, so widening bare `pre` would have quietly
moved it. Scoped to `.msg .body pre`, which is the same distinction T2 had to make between
`.msg` and `.msg .body` — the same mistake waiting in a new place.
Gated to reading width, like D3. Measured against develop:
sidebar (420px) editor (1200px)
prose pre padding 9px 11px unchanged 12px 14px
prose pre margin 8px unchanged 14px (1em at prose size)
ASCII logo / terminal / inline unchanged unchanged
Inline code is deliberately untouched. D5 says keep it theme-driven — no `color`, ever — and
its tight 1px 5px padding is correct rather than an oversight: vertical padding on an inline
box does not grow the line box, so a roomier span overlaps the line above it. "Code surfaces
get room" is a statement about blocks, not spans, and both halves are now guarded.
Guards, each bypass-verified by reverting the fix:
- the rule removed; bare `pre` widened (which moves the ASCII logo)
- the margin reverting to an absolute, leaving D3's rhythm
- inline code starting to set a colour; inline padding grown
- the rule moved outside the width gate, so the sidebar changes too
One test message corrected while bypassing: an assertion claimed to prove the rule was
inside the gate when it only catches a second ungated copy declared earlier. Membership in
the gate block is what actually proves it; the message now says so.
32 tests in webviewCss, 33 suites green.
Contributor
There was a problem hiding this comment.
Pull request overview
This PR completes the T3/D5 “code surfaces” slice of docs/CHAT-TYPOGRAPHY.md by increasing prose code block padding and switching its vertical spacing to the same em-based rhythm used elsewhere—while keeping other <pre> usages (empty-state ASCII logo, MCP approval card blocks, terminal panes) unchanged.
Changes:
- Scoped the larger code-block padding/margin to
.msg .body preand gated it to@media (min-width: 760px)to preserve sidebar density. - Added CSS-invariant tests guarding against accidental global
prewidening and against inline-code starting to set a hard-codedcoloror changing its padding. - Updated
docs/CHAT-TYPOGRAPHY.mdto reflect the shipped behavior and the scoping/gating rationale.
Reviewed changes
Copilot reviewed 3 out of 3 changed files in this pull request and generated no comments.
| File | Description |
|---|---|
| extensions/levelcode-ai/media/chat.html | Applies the gated, scoped .msg .body pre padding/margin change without altering the global pre baseline. |
| extensions/levelcode-ai/test/webviewCss.test.js | Adds invariants ensuring prose code blocks get room only where intended and inline code remains theme-driven. |
| docs/CHAT-TYPOGRAPHY.md | Documents the shipped T3/D5 outcome, including why the rule must be scoped and width-gated. |
💡 Add a code-review agent skill or configure MCP servers for context-aware, tailored reviews. Learn more in the docs.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
D5, the last slice of
docs/CHAT-TYPOGRAPHY.md.prepadding9px 11px→12px 14px, with the block's vertical margin joining D3's em rhythm so raising the prose size opens it too.The part D5 didn't anticipate
preis a global selector in this stylesheet, and it draws four different things:<pre>.lc-ascii.tl-ask .mcpargs.tl-cmd .termout<pre><code>Only the logo has no override, so widening bare
prewould have quietly moved it. Scoped to.msg .body pre— the same distinction T2 had to make between.msgand.msg .body, which is to say the same mistake waiting in a new place.Gated to reading width, like D3
Measured against
develop:prepadding9px 11px— unchanged12px 14pxpremargin8px— unchanged14px(1em at the shipped prose size)A 380px sidebar is deliberately dense, and six more pixels a side is content width it doesn't have.
Inline code is deliberately untouched
D5 says keep it theme-driven — no
color, ever, because the red/orange in dark themes comes from the theme and hard-coding one fights every theme rather than fixing anything.Its tight
padding: 1px 5pxis also correct rather than an oversight: vertical padding on an inline box doesn't grow the line box, so a roomier inline span overlaps the line above it. "Code surfaces get room" is a statement about blocks, not spans. Both halves are now guarded, since both are the kind of thing added while tidying.Guards
Each bypass-verified by reverting the fix:
prewidened — moves the ASCII logoOne test message corrected while bypassing. An assertion claimed to prove the rule was inside the gate, when it only catches a second, ungated copy declared earlier in the file — membership in the gate block is what actually proves it. The message now says what it checks.
With this, every slice of
CHAT-TYPOGRAPHY.mdhas shipped: T1 (measure) → T2+T5 (type scale + escape hatch) → T4 (speaker treatment) → T6 (side) → T7 (shell column) → T3 (code surfaces). Two of those — D8 and D9 — weren't in the original decomposition; both came from looking at the reference again after shipping, which is the argument for slices small enough to look at.32 tests in
webviewCss, 33 suites green.