fix(ui): unify tab styles and stop tab labels from shifting - #5399
Open
ux-git wants to merge 9 commits into
Open
fix(ui): unify tab styles and stop tab labels from shifting#5399ux-git wants to merge 9 commits into
ux-git wants to merge 9 commits into
Conversation
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
Contributor
|
No actionable comments were generated in the recent review. 🎉 ℹ️ Recent review info⚙️ Run configurationConfiguration used: Repository UI Review profile: CHILL Plan: Team Run ID: 📒 Files selected for processing (2)
Included review availability: Your plan provides up to 2 included reviews per hour; 1 remains after this review. Important Approval pendingCodeRabbit has no unresolved comments, but it has not reviewed the latest commit. Use the checkbox below to review the latest commit. CodeRabbit will approve the changes if it finds no blocking issues.
WalkthroughThe tab system now uses shared appearance and layout props, centralized styles, and a reusable ChangesUnified tab system
Estimated code review effort: 3 (Moderate) | ~20 minutes Merge Risk: ⚪ Minimal · up to Tabs now consistently apply their selected appearance while preserving label widths during selection. No current merge-blocking risk is identified. Sequence Diagram(s)sequenceDiagram
participant TabConsumer
participant ScrollableTabs
participant tabsSharedStyles
participant TabLabel
participant MUI_Tab
TabConsumer->>ScrollableTabs: Pass layout, appearance, labels, and badges
ScrollableTabs->>tabsSharedStyles: Request styles for appearance
ScrollableTabs->>TabLabel: Pass label, badge, and selected
TabLabel->>MUI_Tab: Render typography and badge content
ScrollableTabs->>MUI_Tab: Apply layout, indicator, and shared styles
🚥 Pre-merge checks | ✅ 5✅ Passed checks (5 passed)
✨ 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 |
… resizing Tabs picked up their look in five different places: every page that wanted flat tabs copied the same block of overrides onto the shared component, and the copies disagreed — some cleared the ripple radius, others rounded it to 8px, while the tabs underneath stayed fully rounded. Selecting a tab also swapped its typography class, and the heavier text measured wider, so the neighbouring tabs shifted. The two looks are now one prop on the shared component. `chip` keeps the fully rounded pill the date and period selectors use, `plain` gives the page section tabs a 4px background on hover and while pressed, and both come from a single style module. The five copies of the override block are gone. The label renders both typographic states stacked in one grid cell, so a tab always reserves the width of its selected state and nothing moves when the weight changes. It measures whatever the label happens to be, so translations of any length keep working without a fixed width.
The badge next to a tab label was passed in as a custom node built by each call site, which nested block elements inside a typography and shifted the label 12px to the right whenever the count was zero. The badge is now an option of the shared tab label, so every tab renders it the same way.
Three pages repeated the same breakpoint check to pick the MUI tab variant. They now state what they want with a layout prop and the component resolves the breakpoint, next to the unused tabs count prop that has been dropped.
The indicator was requested by every plain tab row and by none of the chip ones, so it now follows the appearance instead of being asked for twice, and the tab height that no page ever set became a constant. The segmented switcher reads its font from the global classes rather than repeating them.
ux-git
force-pushed
the
fix/unified-tab-styles
branch
from
September 4, 2026 01:04
dfc050b to
309f6d5
Compare
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
This comment was marked as resolved.
This comment was marked as resolved.
Sorry, something went wrong.
The component accepted an appearance but always drew the plain one, so a caller asking for chips got plain tabs. It passes the prop through now, and defaults to plain, which is what every caller renders today.
The shared styles carried a default of their own, so a component that forgot to pass the appearance still got one, which is how the plain tabs came to ignore the prop in the first place. The helper asks for it now. Both components keep the appearance they render today: plain for the tabs, chip for the scrollable ones, which is what most of their callers rely on.
|
Tick the box to add this pull request to the merge queue (same as
|
![devin-ai-integration[bot]](https://avatars.githubusercontent.com/in/811515?s=60&v=4){kind=small}
This comment was marked as resolved.
This comment was marked as resolved.
Sorry, something went wrong.
Only text labels are duplicated to reserve their bold width; a component label would run its effects twice and repeat its ids.
|
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.
Description
Tabs were styled by each page instead of by the tab component, so the same control looked different depending on where it was used, and the selected tab changed size and pushed its neighbours around.
Five pages each carried their own copy of the tab overrides, and the copies had drifted apart: the press ripple was rounded in three of them and square in the other two, while the component underneath stayed fully rounded. The tab styling now lives in one place and the components expose the choice as a prop:
appearance—chip(fully rounded, for the date and period selectors) orplain(4px, for tabs that switch a page section). Hover, ripple and the selected background all follow it, so a variant can no longer disagree with itself.layout—autoorstretch. Three pages repeated the same breakpoint check to pick the MUI variant; the component now resolves it.badge— the counter next to a label. It used to be a node each page assembled, which nested a<div>inside a<p>and, because of a transform left behind when the badge stopped fading out at zero, pushed the label 12px to the right whenever the count was0.Selecting a tab swapped
body-regularforh4. The two have different metrics, so the tab was remeasured and the row shifted. Both typographies are now stacked in the same grid cell, which reserves the width of the bolder one without a fixed width, so any translation and any label length still behaves.indicatorMode,minHeight,variantand the unusedtabsCountOnScreenwere removed from the props: the first repeatedappearance, and no page ever set the others.Verified in the app at 1440px and 375px on the weekly schedules, publisher records, service year, meeting attendance, applications, speakers catalog, midweek meeting and congregation settings pages. Tab widths are identical before and after selection, the label stays centred, and no page scrolls horizontally.
Type of change
Checklist: