Synced from GitHub
fix(web): PR links in expanded tables no longer break mid-number#24163
Problem
In an expanded Markdown table on a wide chat lane, a PR link chip such as #363 can break in the middle of its number, so #36 and 3 end up on two lines. Repro: render a table whose first column holds short PR links and whose other columns hold long prose, then expand it on a lane at least 36rem wide.
Change
MarkdownExternalLink puts a <wbr> after every character of the link text so that long URLs can wrap. Those break opportunities bring the link's min-content width down to a single character. Under @container chat-lane (min-width: 36rem) (#20878), the expanded table uses min-width: 0, so the first column can shrink to that width and the chip splits. overflow-wrap: break-word on td is not the cause, because it doesn't change min-content.
The fix is one rule inside that same container block: hide wbr in expanded table cells. The longest word then sets the column width, which is what the table's wrapping rules intend. Long link text in a cell still wraps through the existing overflow-wrap: break-word. Links outside tables are unchanged.
apps/web/src/index.css: +6/−0.
Scope and approval
Closes #24146
This is a small, focused CSS fix for a visible layout bug. It touches only the existing wide-lane expanded-table rules and adds no new behavior or settings.
Verification
Tested in the web dev app with system Chrome (headless, 1600×1000 at 2x), using a fake empty project and one seeded assistant message holding the table. No provider was called. Lane width 736px, table data-expanded="true".
| Column 1 width | Chip lines | Chip height | |
|---|---|---|---|
Before (main) | 71px | #36 / 3 | 35px |
| After | 74px | #363 | 15px |
I also checked a static page with a very long URL and a long unbreakable word in column 1. On a 720px lane the table still did not overflow horizontally, and the column capped at the cell's max-width: 24rem.
Before (light): 24146-once-tablo
After (light): 24146-sonra-tablo
Before (dark): 24146-once-tablo-koyu
After (dark): 24146-sonra-tablo-koyu
Checks:
vp fmt --check apps/web/src/index.css: passes.vp run --filter @t3tools/web typecheck: exit 0.vp run check:changed: passes (format, typecheck).
There's no unit test because this is a CSS-only layout change, and node tests don't cover layout.
Not checked:
- Safari and Firefox.
- A
thcell containing a link, since onlytdwas exercised. - Mobile.
Claude Sonnet 5.5 (xhigh) via T3 Code.
Checks
24 successful · 9 skipped
Added 1 commit
- fix(web): PR links in expanded tables no longer break mid-numberb8e7bcd
Synced from GitHub
Approvability
Verdict: Approved at b8e7bcd
Macroscope's review found this PR approvable — Adds a narrowly scoped CSS rule that prevents character-level wrapping of external links in expanded Markdown tables while preserving existing behavior elsewhere. The change is isolated to presentation and does not affect data processing, configuration, or product defaults.
You can add or adjust custom eligibility rules. Learn more.
Synced from GitHub
No actionable comments were generated in the recent review. 🎉
ℹ️ Recent review info
⚙️ Run configuration
- Source mode: Auto
- Repository: pingdotgg/t3code
- Branch: main
- File: .coderabbit.config.ts
- Commit: 66ee628
- Layers: Repository TS config
- Review profile: CHILL
- Plan: Advanced
- Run ID:
3f725315-2462-4641-bc5c-edecb7038748
📥 Commits
Reviewing files that changed from the base of the PR and between 66ee628e0875b2b735b199f42e6151e347833637 and b8e7bcd01be2075e489f77263cda8af1c0a020a3.
📒 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; 9 remain after this review.
📝 Walkthrough
Expanded chat Markdown tables now hide
<wbr>elements in header and data cells.Changes: Expanded table wrapping
Layer / File(s) Summary Hide break opportunities
apps/web/src/index.cssExpanded chat Markdown table headers and data cells hide <wbr>elements.Priority: ⬇️ Low
Estimated code review effort: 1 (Trivial) | ~3 minutes
Change: Bug fix · Severity of issue fixed: Low
Suggested reviewers:
yash-singh1
Merge Risk: ⚪ Minimal · up to b8e7b
No actionable merge-blocking risk remains.
Pre-merge checks: Passed 4
Check name Status Explanation Title check Passed The title clearly and concisely describes the CSS fix that prevents PR links in expanded tables from breaking mid-number. Description check Passed The description covers the problem, cause, change, scope, linked issue, verification results, screenshots, and known limitations. It provides sufficient detail for review. Linked Issues check Passed Issue #24146is the active direct linked issue. The supplied PR evidence shows a rule inapps/web/src/index.csswithin the wide expanded-table container that hideswbrelements inthandtdce…Out of Scope Changes check Passed The supplied change summary contains only six added CSS lines in apps/web/src/index.css. The rule targets expanded Markdown table cells in the existingchat-lane (min-width: 36rem)scope. The chan…Full details: Linked Issues check
Explanation
Issue
#24146is the active direct linked issue. The supplied PR evidence shows a rule inapps/web/src/index.csswithin the wide expanded-table container that hideswbrelements inthandtdcells. This removes character-level break opportunities for PR link text. The reported 736px verification changed#363from two lines to one line. The existingoverflow-wrap: break-wordremains available for long cell text. The reported format and typecheck checks passed. No issue requirement for an automated layout test is stated.
Full details: Out of Scope Changes check
Explanation
The supplied change summary contains only six added CSS lines in
apps/web/src/index.css. The rule targets expanded Markdown table cells in the existingchat-lane (min-width: 36rem)scope. The change directly addresses issue#24146and does not add unrelated behavior, settings, or files.
✨ Finishing Touches
🧪 Generate unit tests (beta)
- 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.