Repository navigation
fix(web): usage limit banner no longer flickers between one and two rows - #26071
MatthewFeroz wants to merge 1 commit into
Conversation
github-actions
Bot
added
vouch:trusted
![macroscopeapp[bot]](https://avatars.githubusercontent.com/in/900172?s=60&v=4){kind=small}
ApprovabilityVerdict: Approved at Macroscope's review found this PR approvable — This is a narrowly scoped fix to an existing usage-limit banner's responsive layout, reserving space for the optional info button so action wrapping no longer flickers. The default behavior for other NoticeText callers remains unchanged, with no product-default or static-analysis configuration changes. You can add or adjust custom eligibility rules. Learn more. |
|
No actionable comments were generated in the recent review.
 |
| Layer / File(s) | Summary |
|---|---|
NoticeText wrapper layout apps/web/src/components/chat/ComposerBannerStack.tsx |
NoticeText uses slotClassName for its wrapper. The description notice provides a growing flex slot with a minimum width and gap. The title notice retains the default wrapper styling. |
Priority:
Estimated code review effort: 2 (Simple) | ~8 minutes
Change: Bug fix
Possibly related PRs
- pingdotgg/t3code#25401: Introduced the
ComposerBannerStackrendering structure that this change extends.
Suggested reviewers: macodev00
Merge Risk: 
c53d2
-
The layout change is limited to the usage-limit banner and preserves existing behavior for other callers.
Pre-merge checks: 
-
Check name Status Explanation Title check The title names the actual fix: the usage limit banner no longer flickers between one and two rows. It matches the change, which gives the description text and info button a shared slot with a fixed m… Description check The description follows the template's main sections: Problem, Change, Scope and approval, and Verification. The Problem section gives the expected behavior and the reproduction steps. The Change sect… Linked Issues check Check skipped because no linked issues were found for this pull request. Out of Scope Changes check Check skipped because no linked issues were found for this pull request. Full details: Title check
-
Explanation
The title names the actual fix: the usage limit banner no longer flickers between one and two rows. It matches the change, which gives the description text and info button a shared slot with a fixed minimum width in NoticeCard. The title uses the conventional commit form and avoids vague terms. It is specific and fits the changeset.
Full details: Description check
-
Explanation
The description follows the template's main sections: Problem, Change, Scope and approval, and Verification. The Problem section gives the expected behavior and the reproduction steps. The Change section explains the fix in NoticeCard and the new slotClassName prop. The Scope section calls the fix small and focused, and it links the related PR
#22974. The Verification section lists measured before and after results, the lint and tsc checks, and the untested areas. It also includes before and after images. Two gaps remain. The Scope section does not state a maintainer-approved issue or discussion, and it does not explain why a prior issue is not needed beyond calling the fix obvious. The Verification section relies on a forced banner, which the author discloses. The description is mostly complete, so the check passes.
-
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.
Problem
When you hit a usage limit, the "Usage limit reached" banner above the composer flickers between one and two rows at some chat widths. In a 535px window it switches about 130 times a second, and the composer jumps with it.
The description's info button shows only while "Resets 5:08 PM" is cut off. At these widths the button is what pushes "Cancel auto-resume" and "Snooze until reset" onto a second row. On two rows the text fits, so the button goes away, the actions move back up, the text is cut off again, and the cycle repeats.
This is the same loop as #22974, which I found after writing this fix. It happens without a floating preview open, just in a narrow window. I tested #22974 too, and it also stops the flicker. It does that by keeping the button shown until the banner gets wider than where the button first appeared. That leaves an info button next to text that is fully visible (see the comparison below). This PR is an alternative, and I'm happy for you to pick either one.
Change
In
NoticeCard, the description text and its info button now share one slot with a fixed minimum width: one button's width (min-w-7,sm:min-w-6, matching the icon column). Because the slot reserves that space whether or not the button is shown, showing or hiding the button no longer changes where the actions wrap.NoticeTexttakes an optionalslotClassName. It defaults tocontents, so other callers likeThreadNoware unchanged.Scope and approval
Small, focused fix for an obvious rendering bug in one component. No product behavior or defaults change. Related: #22974 fixes the same problem in a different way.
Verification
I reproduced the flicker in a dev client on current
main, using a copy of real data. That data had no thread stopped at a limit, and the banner depends on live provider state, so I temporarily forced the real banner onto a thread. The override was not committed. Checked in headless Chromium at 60fps by stepping the window from 380px to 760px in 2px steps, counting how often the info button appears or disappears, and checking whether it overlaps the actions:main: also 0 toggles across the same range.vp linton the changed file andtsc --noEmitinapps/webpass.Before (535px window; the banner keeps switching between one row with "R…" and two rows with the info button):
After (same width; it settles on two rows with the full text):
This PR (left) vs #22974 (right) at the same width:
Not checked: Safari and Firefox, the desktop app, and a real thread stopped at a usage limit (the banner was forced, as described above).
Opus 5.5 via Claude Code in T3 Code.