refactor(web): Button consumers outside the composer stop restyling it - #13208
Merged
Merged
Conversation
juliusmarminge
added this pull request to stack #13194
September 23, 2026 04:08
github-actions
Bot
added
vouch:trusted
![macroscopeapp[bot]](https://avatars.githubusercontent.com/in/900172?s=60&v=4){kind=small}
| type="button" | ||
| aria-label="Dismiss provider update notice" | ||
| className="relative z-[1] mr-1 [--control-icon-color:currentColor] rounded-md text-inherit opacity-70 hover:bg-transparent hover:opacity-100" | ||
| className="relative z-[1] mr-1 flex size-5 shrink-0 cursor-pointer items-center justify-center rounded-md opacity-70 outline-none hover:opacity-100 focus-visible:opacity-100 focus-visible:ring-2 focus-visible:ring-ring" |
Contributor
There was a problem hiding this comment.
🟡 Medium sidebar/SidebarProviderUpdatePill.tsx:197
On coarse-pointer devices, the dismiss control now has only a size-5 (20px) hit target, so dismissing the notification is substantially harder than with the removed Button, which provided a 44px pointer-coarse target via after:min-h-11/after:min-w-11. Restore an equivalent coarse-pointer hit area on this native button.
🚀 Reply "fix it for me" or copy this AI Prompt for your agent:
In file @apps/web/src/components/sidebar/SidebarProviderUpdatePill.tsx around line 197:
On coarse-pointer devices, the dismiss control now has only a `size-5` (20px) hit target, so dismissing the notification is substantially harder than with the removed `Button`, which provided a 44px `pointer-coarse` target via `after:min-h-11`/`after:min-w-11`. Restore an equivalent coarse-pointer hit area on this native button.
| <Button | ||
| size="icon-micro" | ||
| variant="ghost" | ||
| <button |
Contributor
There was a problem hiding this comment.
Shared primitives over custom controls: this styled raw <button> rebuilds a control; use Button from components/ui/button instead.
Posted via Macroscope — UI Consistency
Contributor
Thread transfer impact✅ Thread transfer remains within every enforced ceiling.
Baseline: unavailable · PR result: Scenario and decoded snapshot size10 historical turns, 5 command tools per turn, 878.9 KiB retained MCP result per historical turn, and a 1.05 MiB retained result in the measured turn.
Updated in place by a trusted workflow. PR artifacts are strictly validated and never executed. |
Contributor
ApprovabilityVerdict: Would Approve Macroscope's review found this PR approvable — This is a broad but low-risk web UI refactor that centralizes existing Button/Input styling without changing application logic, schemas, workflows, or sensitive paths. An unresolved Medium finding notes that the provider-update dismiss control lost its coarse-pointer hit area, which remains a separate issue to resolve before merging. Not approved because:
Adjust the Minimum Blocking Severity for this repo — including turning it Off — in Settings. You can add or adjust custom eligibility rules. Learn more. |
|
Navigate logical layers of code changes, visualize relationships, and explore their blast radius. No actionable comments were generated in the recent review. 🎉 ℹ️ Recent review info⚙️ Run configurationConfiguration used: Repository: pingdotgg/t3code/.coderabbit.yaml Review profile: CHILL Plan: Team Run ID: 📒 Files selected for processing (1)
🚧 Files skipped from review as they are similar to previous changes (1)
Limit details: You’ve used all 10 included reviews currently available. 📝 WalkthroughWalkthroughThis pull request updates button variants, spacing, and interaction styling across web application controls. It also changes shared button and number-input styles, moves some visibility rules to wrappers, and lowers the restyle lint ceiling. ChangesWeb control styling
Priority: ⬇️ Low Estimated code review effort: 3 (Moderate) | ~20 minutes Change: Refactor Merge Risk: ⚪ Minimal · up to The inspected controls remain usable as intended, with no concrete issue requiring a fix before merge. Proceed after normal checks. 🚥 Pre-merge checks | ✅ 4 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (4 passed)
✨ Finishing Touches 💡 1📝 Generate docstrings 💡
🧪 Generate unit tests (beta)
Comment |
Clears the 149 shadcn/no-restyle findings on Button outside the chat composer. No new variant, size, or prop. Two existing Button styles change. Changes to components/ui/button.tsx: - glass is now a pill (rounded-full). All three Button consumers (Scroll to end, Cite selection, PR review trigger) forced rounded-full, so the variant owns it. - The base now styles aria-disabled like disabled (opacity-64, not-allowed cursor). This is a generic state for a disabled control that still hosts an explanation popover, and it replaces the hand-rolled copy on the git quick action. Drift, moved onto existing variants and sizes (the visible change is accepted): - Text-colour tweaks (text-muted-foreground, hover:text-foreground, the sidebar muted tokens, text-muted-foreground/60, font-normal) become ghost-muted: server update icon and batch action, Add environment, message copy (ghost), Show full message, PR sort toggles, settings and thread search clear, accent-colour Clear, PR edit pencil. - Toggle-state tints become variant switches, secondary when pressed: device-toolbar aspect lock, markdown table expand and code wrap. This deletes the chat-markdown-chrome-action CSS. - Setup Required chips become warning-outline + micro. - Padding and size tweaks drop to the size's own padding: ps-[8.5px], ps/pe/gap on the palette submit, px-1, and px-0/px overrides on the header script actions. Multiline dialog and onboarding rows use sm-multiline. - Hover and background tweaks are deleted: diff collapse, reset zoom, PR code collapse, context meter, script icon picker, media navigation bg-white/10 and rounded-full. White-on-image snapshot buttons use the existing overlay variant. - Diff-type colour moves from the Button to its chevron icon. Restructured: - Reveal on row hover (opacity-0 group-hover:opacity-100) is the row's behaviour, so it moves to a plain wrapper span: diff comment delete, project actions edit, script menu edit, PullRequestEditButton. - The sticky device-toolbar close backing, the colour-picker footer divider, and the monospace on the when-clause label move to plain elements. - The provider update pill dismiss was not a Button (it inherits the pill's tone colour and has no surface of its own), so it is now a plain button. Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
juliusmarminge
force-pushed
the
restyle/stack-button-rest
branch
from
September 23, 2026 04:27
4204200 to
327992a
Compare
cursor Bot
pushed a commit
to aaditagrawal/t3code
that referenced
this pull request
Sep 23, 2026
pingdotgg#13208) Co-authored-by: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
cursor Bot
pushed a commit
to aaditagrawal/t3code
that referenced
this pull request
Sep 23, 2026
pingdotgg#13208) Co-authored-by: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
github-actions Bot
added a commit
to omarcresp/t3code-flake
that referenced
this pull request
Sep 23, 2026
## What's Changed * hatch/variant functions by @juliusmarminge in pingdotgg/t3code#13191 * refactor(web): context chips render through one ContextChip component by @juliusmarminge in pingdotgg/t3code#13192 * refactor(web): ui components drop their secondary className props by @juliusmarminge in pingdotgg/t3code#13193 * refactor(web): menu triggers and items stop restyling ui/menu by @juliusmarminge in pingdotgg/t3code#13205 * refactor(web): field controls stop restyling Input, Select, Combobox and Command by @juliusmarminge in pingdotgg/t3code#13206 * refactor(web): app code stops restyling sidebar, popover, table and misc ui exports by @juliusmarminge in pingdotgg/t3code#13207 * refactor(web): Button consumers outside the composer stop restyling it by @juliusmarminge in pingdotgg/t3code#13208 * refactor(web): composer controls own their look instead of restyling ui components by @juliusmarminge in pingdotgg/t3code#13209 * chore(web): no-restyle fails lint, and the ceiling gate goes by @juliusmarminge in pingdotgg/t3code#13210 * fix(mobile): recover from screen render errors by @juliusmarminge in pingdotgg/t3code#13197 * feat(web): navigate back and forward with mod+[ and mod+] by @juliusmarminge in pingdotgg/t3code#13212 * fix(web): sort title matches by recent activity by @Yash-Singh1 in pingdotgg/t3code#13219 * test(desktop): remove redundant keyring module-load test by @t3-code[bot] in pingdotgg/t3code#13220 **Full Changelog**: pingdotgg/t3code@v0.0.43-nightly.20260923.2135...v0.0.43-nightly.20260923.2150 Upstream release: https://github.com/pingdotgg/t3code/releases/tag/v0.0.43-nightly.20260923.2150
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
1 participant
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.
Buttons outside the composer stop restyling
Button. Two generic changes land inui/button.tsx:glassis round. All three consumers forcedrounded-full: Scroll to end, Cite selection, and the PR review trigger.aria-disabledlooks likedisabled. This is for a disabled action that still explains itself in a popover (the git quick action).Consumers:
ghost-muted: the server update and environment actions, Copy message, Show full message, the PR sort toggles (now 12px), the sidebar search clears, and the accent colour Clear. Some become medium weight.secondary: the device toolbar ratio lock, and table expand and code wrap in chat.chat-markdown-chrome-actionCSS is deleted. Chat code-block and table buttons no longer follow the code-block colour tokens, so under a custom theme they use the regular muted colours.warning-outline micro, at 11px.sm-multilinefor the default-branch dialog and onboarding rows. The provider update pill's dismiss X is a plain button, because it takes the pill's colour.Input(generic): number inputs hide the browser spin buttons, replacing the device toolbar's call-site selectors. The theme hex field is left-aligned.no-restylefindings: 250 → 101.No screenshots yet: these changes are verified by lint, typecheck and tests only.
Claude Opus 5.5 via Claude Code.
🤖 Generated with Claude Code
Summary by CodeRabbit