fix(jcode-ui): stop file-viewer line numbers wrapping vertically - #144
Conversation
`.jcode-file-table td` (specificity 0-1-1) overrode `.jcode-file-lineno` (0-1-0), so `white-space: pre-wrap` + `word-break: break-all` won and multi-digit line numbers wrapped one digit per line (e.g. 22 rendered as two stacked 2s). Raise the selector to `.jcode-file-table td.jcode-file-lineno` (0-2-1), add explicit `word-break: normal`, and comment why the specificity is required.
|
Warning Review limit reached
Next review available in: 33 minutes Enable usage-based reviews in Billing to review now. Otherwise, wait until the next included review is available. How can I continue?After more reviews become available, a review can be triggered using the To avoid repeated limits, reduce automatic review volume by pausing incremental auto-reviews earlier, using label-based review opt-in, excluding WIP or generated PR titles, or requesting reviews manually when the PR is ready. If your team needs uninterrupted high-volume reviews, an organization admin can enable usage-based reviews. How do review limits work?CodeRabbit enforces per-developer PR review limits for each organization. Most developers receive the normal plan review availability. For paid Pro and Pro+ PR reviews, CodeRabbit uses adaptive limits for sustained high-volume activity. When a developer's recent PR review activity reaches the 95th percentile or higher among CodeRabbit users, additional reviews become available more gradually as earlier reviews age out of the rolling window. Please refer docs for additional details. Review details⚙️ Run configurationConfiguration used: defaults Review profile: CHILL Plan: Pro Run ID: 📒 Files selected for processing (1)
✨ Finishing Touches🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
cnjack
left a comment
cnjack
left a comment
There was a problem hiding this comment.
Overall Risk
Low
Top Findings
None.
Reviewed as a senior-staff-level pass (correctness, reliability, security, performance, concurrency, data integrity, API compatibility, observability, test coverage). This is a single, self-contained CSS specificity fix:
- Root cause correctly diagnosed:
.jcode-file-table td(specificity 0-1-1, setswhite-space: pre-wrap; word-break: break-all) was beating.jcode-file-lineno(0-1-0), causing multi-digit line numbers to wrap character-by-character. - Fix raises specificity to
.jcode-file-table td.jcode-file-lineno(0-2-1) and adds an explicitword-break: normalas a defensive backstop — both changes are necessary and sufficient. - Verified against the actual markup (
packages/jcode-ui/src/toolRenderers/fileViewer.tsx:31):<td className="jcode-file-lineno">is a descendant oftable.jcode-file-table, so the new selector matches correctly. - No other source defines or duplicates this rule (single CSS source, no committed build artifacts), so there's no missed call site.
- Sibling
.jcode-file-textcolumn intentionally keepsword-break: break-allfor wrapping long code lines — correctly unaffected by this change. - The PR description already discloses that
site/(npm-pinned tojcode-ui@^0.4.1) won't pick up this fix until a version bump/publish — an accurate, non-hidden caveat. - Web CI (type-check/build) passed; Go CI is unrelated to this CSS-only change.
No correctness, security, concurrency, or data-integrity concerns apply to a static CSS rule change.
Generated by Claude Code
1 participant
问题
文件查看器（
read/write工具渲染）中，两位数及以上的行号被纵向拆开显示（如22显示为上下两个2）。根因
CSS 特异性冲突：
.jcode-file-table tdwhite-space: pre-wrap; word-break: break-all.jcode-file-linenowhite-space: nowrap; width: 1px行号列依赖
width: 1px+nowrap做收缩适应，但nowrap因特异性低而失效，word-break: break-all允许任意字符间断行，导致行号逐字符折行。修复
.jcode-file-table td.jcode-file-lineno（特异性 0-2-1）word-break: normal防御回归验证
pnpm build通过，dist/styles.css中确认规则为white-space:nowrap; word-break:normalweb/通过 workspace 软链引用，重建后即可看到效果注：
site/走 npm registry（^0.4.1），需要后续 bump0.4.2+ publish 才能拿到此修复。