Synced from GitHub
fix(web): scale inline code to Markdown table text#24567
Problem
Inline code in Markdown table cells rendered at the same 12px size as the surrounding text, making the monospace code look oversized. A table containing pnpm-lock.yaml reproduces the mismatch in the web renderer shared by desktop.
Change
Size inline code relative to its table cell with a table-specific 0.875em override. Paragraph inline code, fenced code blocks, and chip padding keep their existing styling.
Scope and approval
Fixes https://github.com/pingdotgg/t3code/issues/24166
GitCafe: https://git.cafe/pingdotgg/t3code/issues/24166
Triaged bug via the automated issue flow.
Verification
vp fmt --check apps/web/src/index.css and git diff --check origin/main...HEAD passed. Two independent code reviews found no defects. Independent proof audit accepted every matrix row; the affected table/control region reproduced with zero changed pixels after reload. This is a visual-only CSS change; proof uses real-app before/after captures rather than CSS-value tests.
Before: eea9895 (eea989536849e5b5049987ee24318b5a77326542). After: 1cff6be (1cff6be879da1dcd1153d8d4d2b78a429a5238cf). The complete diff is five added lines in apps/web/src/index.css. HEAD stayed checked out; baseline captures temporarily used the exact baseline CSS blob, then head CSS was restored. All other source is identical between those commits. Source provenance and exact diff. Final tree clean at head.
Rendering environment and capture integrity
Real development app and isolated task data; original fixture unchanged and supplemental table submitted through the normal composer. Completed assistant output; both user and assistant roots measured separately. No DOM content/style injection, screenshot resizing, cropping, padding, or image reconstruction. Word-wrap preference set to false in this isolated browser profile before both revisions to initialize explicit collapsed state. Sidebar and details hidden through app controls.
Linux Chromium 148 / agent-browser 0.39.2, separate profile from the initial Electron Browser panel. System default theme with light/dark media emulation, reduced motion enabled, document fonts ready, networkidle before every retained still. Two full-viewport PNGs 500 ms apart compare pixel-identically for all 18 retained states. Companion -settled.png files retain the second samples. Still pairs match fixture text, CSS/client/visual viewport, DPR, theme, timeline scroll and capture path. Each per-state JSON records UTC, root kind, lane geometry, table state/scroll, code text/parent, computed fonts/line heights/chrome and cell bounds. Automated capture validation.
| CSS viewport / client / visual viewport | DPR | Raw PNG dimensions | Assistant markdown lane |
|---|---|---|---|
| 1440×900 | 1 | 1440×900 | 728px (≥576px) |
| 390×844 | 1 | 390×844 | 358px (<576px) |
The Browser-panel export mismatch was reproduced twice: JS 1440×900 at DPR 2, exported PNG 1280×800, expected full DPR raster 2880×1800. Retrying after opening/revealing the tab did not change export size. These are diagnostic artifacts only: correlation log, raw export 1, raw export 2. Root cause remains unresolved. Under the explicit fallback authorization, both revisions were recaptured in Chromium; no mixed-pipeline comparisons are used.
Matrix coverage
| Row | Capture result | Measured result |
|---|---|---|
| S1 | Four collapsed short-table before/after pairs, both widths and themes | TH code, mixed TD code and CODE-only TD: 12→10.5px; TH/TD remain 12px; monospace, border/padding/colors retained |
| S2 | Same four pairs show paragraph and fenced YAML controls | Paragraph prose 14px, paragraph code 12px, fenced code 13px before and after |
| I1 | Wide light and narrow dark recordings for both revisions; additional settled expanded pairs | Actual clipped-cell toggle clicked; data-expanded false→true→false. Head table code 10.5px in all states. Wide header/body wrap; narrow table retains horizontal overflow |
| S3 | Wide light and narrow dark left/right before/after frames | Both path forms produce A.chat-markdown-file-link chips, not CODE; 10.32px unchanged. External label 12px unchanged. Actual CODE inside the external link changes 12→10.5px |
| I2 | Narrow recordings for both revisions scroll right and back in expanded and collapsed states | Collapsed scrollLeft 0→186→0. Expanded before 0→739→0; after 0→726→0. Hidden second column reached, toggle usable after return |
S1 / S2 — collapsed table and controls
Each row covers S1 and S2. Before is eea9895, After is 1cff6be throughout. Diff0 is absolute RGB difference amplified ×8 with zero threshold. DiffT is a magenta mask where the maximum absolute RGB channel difference is >16/255. Diffs retain original dimensions and are derived comparison images, not screenshots. Pixel counts and bounds.
| Viewport / theme | Before | After | Diff0 | DiffT |
|---|---|---|---|---|
| 1440 / light | Before S1S2-1440-light | After S1S2-1440-light | Diff0 S1S2-1440-light | DiffT S1S2-1440-light |
| 1440 / dark | Before S1S2-1440-dark | After S1S2-1440-dark | Diff0 S1S2-1440-dark | DiffT S1S2-1440-dark |
| 390 / light | Before S1S2-390-light | After S1S2-390-light | Diff0 S1S2-390-light | DiffT S1S2-390-light |
| 390 / dark | Before S1S2-390-dark | After S1S2-390-dark | Diff0 S1S2-390-dark | DiffT S1S2-390-dark |
S3 — chips and links
The narrow right frame supplements the left frame so every link/control is visible.
| State | Before | After | Diff0 | DiffT |
|---|---|---|---|---|
| S3-1440-light | Before S3-1440-light | After S3-1440-light | Diff0 S3-1440-light | DiffT S3-1440-light |
| S3-390-dark | Before S3-390-dark | After S3-390-dark | Diff0 S3-390-dark | DiffT S3-390-dark |
| S3-right-390-dark | Before S3-right-390-dark | After S3-right-390-dark | Diff0 S3-right-390-dark | DiffT S3-right-390-dark |
I1 — settled expanded frames
| State | Before | After | Diff0 | DiffT |
|---|---|---|---|---|
| I1-expanded-1440-light | Before I1-expanded-1440-light | After I1-expanded-1440-light | Diff0 I1-expanded-1440-light | DiffT I1-expanded-1440-light |
| I1-expanded-390-dark | Before I1-expanded-390-dark | After I1-expanded-390-dark | Diff0 I1-expanded-390-dark | DiffT I1-expanded-390-dark |
I1 / I2 — recordings
Raw VP8 WebM, 15fps; wide 1440×900 and narrow 390×844. No pointer overlay or injected style. Video review PNGs are unscaled decoded frames, retained in the index; the stable screenshots above provide clearer text inspection.
| Lane | Before | After | Sequence |
|---|---|---|---|
| 1440 / light | Before recording | After recording | collapsed → expanded → collapsed |
| 390 / dark | Before recording | After recording | collapsed → expanded → collapsed; right edge and return in both states |
What else changed in the pixels
Smaller code boxes change intrinsic column sizing: the short table’s ordinary second-column text moves horizontally. In the long expanded wide table, body/header wrapping and second-column placement change as available widths redistribute; chip font/chrome stay unchanged even when their position moves. The visible supplemental user prompt also uses the same global table rule, so its code and post-code ellipsis positions change. Low-amplitude Diff0 changes under the translucent composer follow the changed table content behind its blur; DiffT removes those faint changes. Paragraph and fenced controls have no diff. No unexpected new clipping was observed in the short table; long collapsed clipping and narrow expanded horizontal overflow are intentional existing behavior.
Coverage limits
Verified in Linux Chromium against the real web app; desktop shares this renderer. Windows/Electron was not exercised (cannot-verify windows-desktop). Native mobile has separate typography and is outside this CSS change. The Browser-panel export mismatch was bypassed with matched Chromium captures for both revisions.
The captured after commit is 1cff6be879da1dcd1153d8d4d2b78a429a5238cf. Final head includes a merge from main; its web source and the table override are identical to the captured revision.
Complete evidence index, fixture matrix, measurements, and reproduction scripts. No PR-only assets or scripts are committed.
Models: Claude Opus 5.5 and GPT-6.1 Sol through T3 Code (Claude Agent SDK and Codex harnesses).
Checks
1 failing · 22 successful · 16 skipped
Failing1
- Agent context budgetGitHubFailed
Added 2 commits
Synced from GitHub
Approvability
Verdict: Approved at d0b9591
Macroscope's review found this PR approvable — This is a five-line, CSS-only fix that scales inline code within chat Markdown tables without affecting fenced code blocks or unrelated Markdown styling. Its runtime scope is narrow and self-contained, with no product-default, infrastructure, schema, or static-analysis changes.
You can add or adjust custom eligibility rules. Learn more.
Synced from GitHub
No actionable comments were generated in the recent review.
External image Recent review info
External image Run configuration
- Source mode: Auto
- Repository: pingdotgg/t3code
- Branch: fix/issue-24166
- File: .coderabbit.config.ts
- Commit: d0b9591
- Layers: Repository TS config
- Review profile: CHILL
- Plan: Team
- Run ID:
05284ce9-aff7-42b5-91fe-4c658f4488e4
External image Commits
Reviewing files that changed from the base of the PR and between 909e4c948278afc2b3e1e665075fb1755a13f894 and d0b9591623fbd0b21c766aea46c0e26f6095c80a.
External image Files selected for processing: 1
apps/web/src/index.css
Included review availability: This review used your included allowance. Your plan provides up to 10 included reviews per hour; 0 remain after this review.
Walkthrough
Inline code inside chat Markdown tables now uses a font size of
0.875emrelative to the surrounding text.Changes: Markdown table code sizing
Layer / File(s) Summary Relative inline code sizing
apps/web/src/index.cssA table-scoped rule sets inline code to 0.875emof the surrounding text.Priority: External image Low
Estimated code review effort: 1 (Trivial) | ~3 minutes
Change: Bug fix · Severity of issue fixed: Low
Suggested labels:
bugfix,size:XSSuggested reviewers:
macroscopeapp,yash-singh1
Merge Risk: External image Minimal · up to d0b95
No actionable merge-blocking risk remains.
Pre-merge checks: Passed 4
Check name Status Explanation Title check Passed The title "fix(web): scale inline code to Markdown table text" matches the main change. The diff adds a 0.875em font-size override for inline code in Markdown table cells in apps/web/src/index.css, an… Description check Passed The description follows the template sections: Problem, Change, Scope and approval, and Verification. The Problem section states the symptom, the reproduction context (a table containing pnpm-lock.yam… Linked Issues check Passed Issue #24166requires smaller inline code in Markdown table cells than surrounding cell text, with relative sizing consistent with body text. The PR summary reports a.chat-markdowntable-specific `…Out of Scope Changes check Passed The supplied change summary identifies five added lines in apps/web/src/index.css. The change directly implements the cosmetic table-code sizing fix for issue#24166. The reported visual captures an…Full details: Title check
Explanation
The title "fix(web): scale inline code to Markdown table text" matches the main change. The diff adds a 0.875em font-size override for inline code in Markdown table cells in apps/web/src/index.css, and the linked issue
#24166asks for the same relative sizing. The title uses the conventional commit format and names the scope (web) and the affected element (inline code in tables). Wording is a little loose: "scale ... to Markdown table text" could be read as scaling to match table text, while the change actually sizes code relative to the cell at 0.875em.
Full details: Description check
Explanation
The description follows the template sections: Problem, Change, Scope and approval, and Verification. The Problem section states the symptom, the reproduction context (a table containing pnpm-lock.yaml in the web renderer), and the expected styling. The Change section names the 0.875em table-specific override and what stays unchanged. The Scope and approval section links issue
#24166and says the bug was triaged through the automated issue flow. The Verification section lists the commands run (vp fmt --check and git diff --check), describes before/after Chromium captures with pixel-diff results, and states coverage limits (Windows/Electron not exercised, desktop Browser-panel export mismatch unresolved). The description is long and contains some internal evidence detail, but the required information is present. One gap is that the Scope section does not include explicit maintainer approval. The template asks for a triaged issue or approval comment, and the author cites an automated triage flow instead. The author does not describe the approval comment. The template also includes a model/harness note, which the author provided at the end.
Full details: Linked Issues check
Explanation
Issue
#24166requires smaller inline code in Markdown table cells than surrounding cell text, with relative sizing consistent with body text. The PR summary reports a.chat-markdowntable-specific0.875emoverride inapps/web/src/index.css. The reported measurements show table code changing from 12px to 10.5px while table text remains 12px. The reported matrix also shows paragraph inline code, fenced code, chips, borders, padding, and colors unchanged. The supplied visual validation covers wide and narrow viewports in light and dark themes.
Full details: Out of Scope Changes check
Explanation
The supplied change summary identifies five added lines in
apps/web/src/index.css. The change directly implements the cosmetic table-code sizing fix for issue#24166. The reported visual captures and validation support that objective. No unrelated source change or unrelated behavior is identified.
Finishing Touches
🧪 Generate unit tests (beta)
- Commit to this branch
- Create a new PR
- Autofix · Keep fixing CodeRabbit findings and required CI, and resolving merge conflicts
Comment @coderabbitai help to get the list of available commands.
Note
🤖 Claude Opus 5.5 responding on behalf of Theo
Closing: this is covered by #24865, which landed. Reopen if a needed part is still missing.