fix(landing): square the bordered edge on accent callouts - #1206
Conversation
Three landing callouts set `rounded-lg` together with `border-l-2`, so the 2px accent border was dragged around an 8px corner radius with no adjacent border to continue into. The result is a bar that tapers and detaches at both ends instead of reading as a flush accent rule. Squares the bordered edge with `rounded-r-lg`, which is the idiom already used correctly elsewhere in the codebase — Toc.tsx (`border-l-2 rounded-r`) and HomeSectionFallbacks.tsx (`rounded-r-md border-l-2`). A box should never carry a border on one side while rounding that side's corners. Audited the rest of the codebase for the same pattern: every other radius + single-side-border pairing is either already squared on the bordered edge, or joins two adjacent surfaces (`rounded-t-*` with `border-b-0`), or is the spinner idiom (`rounded-full border-b-2`). These three were the only violations. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
|
No actionable comments were generated in the recent review. 🎉 ℹ️ Recent review info⚙️ Run configurationConfiguration used: defaults Review profile: CHILL Plan: Pro Plus Run ID: 📒 Files selected for processing (3)
Included review availability: Your plan provides up to 4 included reviews per hour; 2 remain after this review. 📝 WalkthroughWalkthroughThree landing-page callout panels now use ChangesLanding callout styling
Estimated code review effort: 1 (Trivial) | ~2 minutes Merge Risk: ⚪ Minimal · up to The change squares the bordered edge on three landing-page callouts without altering application behavior, interfaces, data, permissions, dependencies, or deployment behavior; no actionable merge-blocking risk remains after normal checks and review. Suggested reviewers: 🚥 Pre-merge checks | ✅ 4 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (4 passed)
✨ Finishing Touches 💡 1📝 Generate docstrings 💡
🧪 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 |
Deploying with
|
| Status | Name | Latest Commit | Preview URL | Updated (UTC) |
|---|---|---|---|---|
| ✅ Deployment successful! View logs |
tanstack-com | 39ca6b9 | Commit Preview URL Branch Preview URL |
Aug 28 2026, 10:06 PM |
1 participant
Three landing callouts set
rounded-lgtogether withborder-l-2, so the 2px accent border was dragged around an 8px corner radius with no adjacent border to continue into. The bar tapers and detaches at both ends instead of reading as a flush accent rule.Confirmed on the live build:
The fix
rounded-lg→rounded-r-lg. The bordered edge goes square, the bar sits flush, the outer corners stay rounded.This is the idiom the codebase already uses correctly in two places, so it matches house style rather than introducing a new one:
Toc.tsx—border-l-2 rounded-rHomeSectionFallbacks.tsx—rounded-r-md border-l-2Scope
All three instances of the pattern, not just the one that was reported — they share the same accent token and fixing one would have left two identical siblings wrong:
landing/StartLanding.tsx:203landing/RouterLanding.tsx:332landing/ConfigLanding.tsx:245I audited every
rounded-*+border-{l,r,t,b}-Npairing in the repo. Everything else is legitimate — already squared on the bordered edge, joining two adjacent surfaces (rounded-t-*withborder-b-0, as in the markdown tabs andProductDrawer), or the spinner idiom (rounded-full border-b-2). These three were the only violations.Verification
pnpm testgreen: 0 type errors, 0 lint warnings, 466 tests.Not verified visually — the preview pane was bound to another worktree at the time. The change is a deterministic radius swap with in-repo precedent.
Summary by CodeRabbit