Adjust GlobalNav width from 176px to 240px #3925
Conversation
🤖 Devin AI EngineerI'll be helping with this pull request! Here's what you should know: ✅ I will automatically:
Note: I can only respond to comments from users who have write access to this repository. ⚙️ Control Options:
|
|
Finished running flow.
|
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
|
Updates to Preview Branch (devin/1761718819-adjust-globalnav-width) ↗︎
Tasks are run on every commit but only new migration files are pushed.
View logs for this Workflow Run ↗︎. |
|
Important Review skippedBot user detected. To trigger a single review, invoke the You can disable this status message by setting the Comment |
Check changeset necessityStatus: REQUIRED Reason:
Changeset (copy & paste):---
"@liam-hq/ui": minor
---
- ♻️ Increase GlobalNav width from 176px to 240px in BaseGlobalNav for improved usability
- Update hover width to 15rem (from 11rem); downstream layouts may expand accordingly |
…ed changeset - Add flex layout with min-width: 0 to enable proper text truncation in Item component - Add margin-left: auto to SessionFilterDropdown icon for proper alignment - Set explicit width for dropdown content (15rem instead of min-width) - Remove published changeset file 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <[email protected]>
Resolved conflicts in Item.module.css by combining changes: - Added align-items: center from main - Preserved flex: 1 and min-width: 0 for text overflow handling
NoritakaIkeda
requested review from
MH4GF,
NoritakaIkeda,
junkisai and
sasamuku
There was a problem hiding this comment.
Pull Request Overview
This PR increases the GlobalNav width from 176px (11rem) to 240px (15rem) to improve usability and accommodate more navigation content. The change aligns with modern design patterns observed in other agent services like VS Code and GitHub.
- Increased GlobalNav width from 11rem to 15rem across hover and menu open states
- Updated dropdown content width to match the new navigation width
- Enhanced label layout with flexbox properties for better text handling
Reviewed Changes
Copilot reviewed 4 out of 4 changed files in this pull request and generated no comments.
| File | Description |
|---|---|
| BaseGlobalNav.module.css | Updated hover state width from 11rem to 15rem |
| GlobalNav.module.css | Updated menu open state width from 11rem to 15rem |
| SessionFilterDropdown.module.css | Changed dropdown width to 15rem and added margin-left auto for icon |
| Item.module.css | Added flex properties to labelArea and label for better text overflow handling |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
There was a problem hiding this comment.
I can’t quite put it into words, but the right padding of the “New Project” button feels too wide. 👀
Because the background color makes the button’s width noticeable while the label itself is short, I think that contrast might be causing the discomfort. 💭
I’d like to see how it looks if the icon and label inside are center-aligned.
FYI. Like the image of v0.
|
@junkisai |
|
@claude |
|
Claude finished @NoritakaIkeda's task —— View job ✅ Center-aligned GlobalNav button contentSuccessfully addressed @junkisai's feedback about center-aligning the icon and label in the "New Project" button to reduce the visual discomfort from the wide right padding. Changes MadeAdded Modified file:
Technical details:
All lint and format checks passed! ✅ Commit: 96eeaae9 - feat(app): Center-align GlobalNav button content |
|
Claude finished @NoritakaIkeda's task —— View job Implementing center-alignment for GlobalNav button content ✅Successfully implemented the center-alignment for the "New Project" button as requested in the review comment. Tasks
Implementation SummaryAdded Changes Made:
The button content will now be centered (similar to the v0 design reference), providing better visual balance when the GlobalNav is expanded. Job Run • Branch: devin/1761718819-adjust-globalnav-width • Commit: 96eeaae |
Add justify-content: center to GlobalNav item when expanded to address feedback about right padding feeling too wide. This centers the icon and label within the button, improving the visual balance. Co-authored-by: IkedaNoritaka <[email protected]>
- Add grid layout with proper alignment to button container - Add labelArea that shows on hover with centered text alignment - Apply clsx to combine Item and NewSessionButton label styles 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <[email protected]>
- Add iconContainer styling to hide icon when GlobalNav expands - Apply clsx to iconContainer for proper style composition 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <[email protected]>
- Remove unnecessary justify-content and text-align from label styles - Remove redundant styles.label reference from span - Simplify span content to single line 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <[email protected]>
|
@junkisai
|
Issue
Why is this change needed?
The current GlobalNav width of 176px (11rem) has become too narrow as more buttons and information need to be displayed. Based on analysis of other modern agent services (VS Code, Cursor, Windsurf, GitHub, Linear, Notion), which commonly use 230-250px for their sidebars, this PR increases the GlobalNav width to 240px (15rem) for better usability.
This makes the title easier to read and also makes it easier to include information such as status.
Changes
BaseGlobalNav.module.css: Changed hover width from 11rem (176px) to 15rem (240px)Review Checklist
Link to Devin run: https://app.devin.ai/sessions/ae5ef3bf92244f85be9bc1c11b6829af
Requested by: [email protected] ([email protected])