fix(frontend): Make the sidebar banner and switcher menu fit the rail - #6018
Merged
Conversation
The banner used --ag-c-F5F7FA, which the warm recolor repointed at the same value as the rail ground (#f6f5f3), so the card had no edge at all. Give it the elevated surface plus the shell hairline, the same language the rail's selected nav pill already uses. The container was also a fixed 215px centred box, so it drifted further from the nav rows the wider the resizable rail got. Make it track the rail instead.
The menu was a fixed 220px panel, so on a narrow rail it hung out over the content area and on a wide one it sat well short of the trigger. antd pins the popup root's min-width to the trigger, so w-full makes it exactly as wide as the button at any rail width; collapsed keeps a readable fixed width. box-border because preflight is off here — w-full plus a border overflowed 2px. The trigger's own px-1.5 stacked on the wrapper padding and left the avatar 6px inside the nav icon column; px-3 puts it on the column, and trimming the panel padding does the same for the menu's own rows.
dosubot
Bot
added
the
size:M
|
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 YAML (base), Organization UI (inherited) Review profile: CHILL Plan: Pro Plus Run ID: 📒 Files selected for processing (2)
🚧 Files skipped from review as they are similar to previous changes (2)
📝 WalkthroughSummary by CodeRabbit
WalkthroughThe PR updates sidebar switcher spacing and widths, expands the main sidebar footer to full width, and standardizes banner styling and container sizing. ChangesSidebar layout updates
Estimated code review effort: 2 (Simple) | ~15 minutes Mergeability Score: ⚪ Minimal · up to This PR makes localized sidebar layout and styling fixes so the banner and project switcher fit the rail across widths; no actionable merge-blocking risk remains after normal checks and review. Possibly related PRs
🚥 Pre-merge checks | ✅ 5✅ Passed checks (5 passed)
✨ Finishing Touches 💡 1🛠️ Fix failing CI checks 💡
📝 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 |
Contributor
Author
|
Fixed
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
Contributor
There was a problem hiding this comment.
Actionable comments posted: 2
ℹ️ Review info
⚙️ Run configuration
Configuration used: Repository YAML (base), Organization UI (inherited)
Review profile: CHILL
Plan: Pro Plus
Run ID: b013b071-d7e6-415e-abe4-4b147464b2c5
📒 Files selected for processing (4)
web/oss/src/components/Sidebar/components/ProjectOrgSwitcher/index.tsxweb/oss/src/components/Sidebar/scopes/mainScope.tsxweb/oss/src/components/SidebarBanners/SidebarBanner.tsxweb/oss/src/components/SidebarBanners/index.tsx
Contributor
Railway Preview Environment
Updated at 2026-08-13T17:48:58.079Z |
…button Review follow-up. The dismiss button washed itself with bg-black/5 on hover and focus, which is invisible against the elevated surface the card now uses in dark mode. Swap it for colorFillTertiary, and take the title and icon colour from colorText rather than the gray-900 scale. Also make the banner wrapper's box-border explicit. The app only gets border-box from antd's '.ant-layout *' reset, and that does not reach portalled trees, so a w-full element with padding should not rely on inheriting it.
mmabrouk
approved these changes
Aug 13, 2026
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
2 participants
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.
Context
Two problems in the sidebar rail, both from hardcoded widths and a stale colour token.
The "Star Agenta" banner had no visible edge. It painted itself with
--ag-c-F5F7FA, and the warm recolour repointed that legacy token at#f6f5f3, which is the exact value of--ag-shell-rail-bg. The card and the ground behind it were the same colour, so the card read as loose text on the rail.The project switcher menu ignored the rail entirely. It was a fixed 220px panel anchored to a trigger whose width follows the resizable rail, so on a narrow rail the menu hung out over the content area, and on a wide rail it stopped well short of the button it belongs to.
Changes
The banner card now uses
colorBgElevatedplus the--ag-shell-linehairline. That is the same "white card on warm ground" language the rail already uses for its selected nav pill, and it costs nothing in dark mode, where the old token already resolved tocolorBgElevated. Its container was a fixed 215px box centred withmx-auto, which drifted further from the nav rows the wider the rail got. It is now full width with an inset, so it tracks the rail at any size.The switcher menu takes its width from the trigger. antd pins the popup root's
min-widthto the trigger width, sow-fullon the panel makes it exactly as wide as the button, never wider. Collapsed, the trigger is icon sized, so the panel falls back to a fixed readable width.The panel also needed
box-border. Preflight is off in this repo (oss/tailwind.config.ts:443), sobox-sizingis notborder-boxby default andw-fullplus a 1px border overflowed its container by 2px.Two padding fixes put the switcher on the same column as the nav icons. The trigger's own
px-1.5was stacking on its wrapper'spx-2, landing the avatar at 14px while every nav icon sits at 20px. The menu's rows had the same problem one pixel out, from the panel padding sitting inside the card's border.Measured on the running app, rail at 302px:
Tests / notes
getBoundingClientRect()reading, checked at several rail widths to confirm nothing is pinned to one size.--ag-c-F5F7FAalready mapped tocolorBgElevatedthere, so the only difference is the added hairline.pnpm eslint --fixand prettier on the four touched files.tsc --noEmitis clean for them.What to QA
🤖 Generated with Claude Code