Adjust GlobalNav width from 176px to 240px #3925

devin-ai-integration · 2025-10-29T06:21:34Z

Issue

resolve: https://github.com/route06/liam-internal/issues/5966

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

Updated BaseGlobalNav.module.css: Changed hover width from 11rem (176px) to 15rem (240px)
Updated GlobalNav.module.css: Changed menu open width from 11rem (176px) to 15rem (240px)

Review Checklist

Verify the new width looks good in the UI (both hover and menu open states)
Test responsive behavior on different screen sizes
Confirm that longer project names and labels display properly without truncation
Check that the increased width doesn't cause layout issues

Link to Devin run: https://app.devin.ai/sessions/ae5ef3bf92244f85be9bc1c11b6829af
Requested by: [email protected] ([email protected])

Co-Authored-By: [email protected] <[email protected]>

devin-ai-integration · 2025-10-29T06:21:38Z

🤖 Devin AI Engineer

I'll be helping with this pull request! Here's what you should know:

✅ I will automatically:

Address comments on this PR that start with 'DevinAI' or '@devin'.
Look at CI failures and help fix them

Note: I can only respond to comments from users who have write access to this repository.

⚙️ Control Options:

Disable automatic comment and CI monitoring

giselles-ai · 2025-10-29T06:21:39Z

Finished running flow.

Step	Status	Updated(UTC)
1	✅	Oct 29, 2025 6:21am
2	✅	Oct 29, 2025 6:23am
3	✅	Oct 29, 2025 6:23am

vercel · 2025-10-29T06:21:43Z

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Preview	Comments	Updated (UTC)
liam-app	Ready	Preview	Comment	Oct 31, 2025 9:29am
liam-assets	Ready	Preview	Comment	Oct 31, 2025 9:29am
liam-storybook	Ready	Preview	Comment	Oct 31, 2025 9:29am

2 Skipped Deployments

Project	Deployment	Preview	Comments	Updated (UTC)
liam-docs	Ignored	Preview		Oct 31, 2025 9:29am
liam-erd-sample	Skipped		Comment	Oct 31, 2025 9:29am

supabase · 2025-10-29T06:21:48Z

Updates to Preview Branch (devin/1761718819-adjust-globalnav-width) ↗︎

Deployments	Status	Updated
Database	✅	Fri, 31 Oct 2025 09:26:37 UTC
Services	✅	Fri, 31 Oct 2025 09:26:37 UTC
APIs	✅	Fri, 31 Oct 2025 09:26:37 UTC

Tasks are run on every commit but only new migration files are pushed.
Close and reopen this PR if you want to apply changes from existing seed or migration files.

Tasks	Status	Updated
Configurations	✅	Fri, 31 Oct 2025 09:26:38 UTC
Migrations	✅	Fri, 31 Oct 2025 09:26:39 UTC
Seeding	✅	Fri, 31 Oct 2025 09:26:39 UTC
Edge Functions	✅	Fri, 31 Oct 2025 09:26:39 UTC

View logs for this Workflow Run ↗︎.
Learn more about Supabase for Git ↗︎.

coderabbitai · 2025-10-29T06:22:01Z

Important

Review skipped

Bot user detected.

To trigger a single review, invoke the @coderabbitai review command.

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

giselles-ai · 2025-10-29T06:23:31Z

Check changeset necessity

Status: REQUIRED

Reason:

Affects a target package: @liam-hq/ui (BaseGlobalNav.module.css change within frontend/packages/ui)
User-facing behavioral change: GlobalNav width increases from 176px (11rem) to 240px (15rem) in hover state, altering layout/appearance for consumers of the UI package
Not a test/tooling/refactor-only change; it directly impacts rendered UI
Changes to @liam-hq/app are in the ignore list and do not require a changeset, but the @liam-hq/ui change does

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

Co-Authored-By: [email protected] <[email protected]>

…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

Copilot

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.

junkisai

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.

NoritakaIkeda · 2025-10-31T06:06:51Z

@junkisai
Yeah, left alignment does look a bit off with a background, doesn't it? 👀
I'll give it a try!

NoritakaIkeda · 2025-10-31T09:21:47Z

@claude
#3925 (review)
Please add the implementation according to this comment.

claude · 2025-10-31T09:21:54Z

Claude finished @NoritakaIkeda's task —— View job

✅ Center-aligned GlobalNav button content

Successfully 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 Made

Added justify-content: center to the expanded .item state in Item.module.css. This centers the icon and label horizontally within all navigation items (including the "New Project" button) when the GlobalNav is expanded, creating better visual balance with the background color.

Modified file:

frontend/apps/app/components/CommonLayout/GlobalNav/Item.module.css

Technical details:

When the GlobalNav is hovered or menu is open, the .item class now includes justify-content: center
This applies to all navigation items for consistent center alignment
The change complements the increased width from 176px to 240px

All lint and format checks passed! ✅

Commit: 96eeaae9 - feat(app): Center-align GlobalNav button content

Job Run | Branch: devin/1761718819-adjust-globalnav-width

claude · 2025-10-31T09:22:24Z

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

Read and understand the review comment feedback
Examine current Item.module.css styling
Implement center-alignment for button content
Run formatting and linting
Commit and push changes

Implementation Summary

Added justify-content: center to the .item class when the GlobalNav is expanded (on hover or when menu is open). This centers the icon and label inside the button, addressing @junkisai's feedback about the right padding feeling too wide due to the contrast between the background color and the short label text.

Changes Made:

Modified frontend/apps/app/components/CommonLayout/GlobalNav/Item.module.css
Added justify-content: center; to the expanded .item state
Committed and pushed to branch devin/1761718819-adjust-globalnav-width

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]>

feat: adjust GlobalNav width from 176px to 240px

444d8cb

Co-Authored-By: [email protected] <[email protected]>

vercel bot deployed to Preview – liam-erd-sample October 29, 2025 06:22 View deployment

vercel bot deployed to Preview – liam-assets October 29, 2025 06:22 View deployment

vercel bot deployed to Preview – liam-storybook October 29, 2025 06:22 View deployment

vercel bot deployed to Preview – liam-docs October 29, 2025 06:23 View deployment

vercel bot deployed to Preview – liam-app October 29, 2025 06:26 View deployment

devin-ai-integration bot assigned NoritakaIkeda Oct 29, 2025

chore: add changeset for GlobalNav width adjustment

b6f31e6

Co-Authored-By: [email protected] <[email protected]>

vercel bot deployed to Preview – liam-storybook October 29, 2025 06:30 View deployment

vercel bot deployed to Preview – liam-assets October 29, 2025 06:30 View deployment

vercel bot deployed to Preview – liam-erd-sample October 29, 2025 06:31 View deployment

vercel bot deployed to Preview – liam-app October 29, 2025 06:35 View deployment

vercel bot deployed to Preview – liam-storybook October 30, 2025 09:47 View deployment

vercel bot deployed to Preview – liam-assets October 30, 2025 09:48 View deployment

vercel bot deployed to Preview – liam-erd-sample October 30, 2025 09:48 View deployment

vercel bot deployed to Preview – liam-app October 30, 2025 09:51 View deployment

Merge branch 'main' into devin/1761718819-adjust-globalnav-width

d4779ec

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

vercel bot deployed to Preview – liam-storybook October 30, 2025 09:54 View deployment

vercel bot deployed to Preview – liam-assets October 30, 2025 09:55 View deployment

vercel bot deployed to Preview – liam-erd-sample October 30, 2025 09:56 View deployment

vercel bot deployed to Preview – liam-docs October 30, 2025 09:57 View deployment

vercel bot deployed to Preview – liam-app October 30, 2025 10:01 View deployment

NoritakaIkeda marked this pull request as ready for review October 30, 2025 10:02

NoritakaIkeda requested a review from a team as a code owner October 30, 2025 10:02

NoritakaIkeda requested review from MH4GF, NoritakaIkeda, Copilot, junkisai and sasamuku and removed request for a team October 30, 2025 10:02

Copilot AI reviewed Oct 30, 2025

View reviewed changes

junkisai reviewed Oct 31, 2025

View reviewed changes

NoritakaIkeda marked this pull request as draft October 31, 2025 06:06

vercel bot temporarily deployed to Preview – liam-erd-sample October 31, 2025 09:25 Inactive

vercel bot deployed to Preview – liam-assets October 31, 2025 09:25 View deployment

vercel bot deployed to Preview – liam-storybook October 31, 2025 09:26 View deployment

vercel bot deployed to Preview – liam-app October 31, 2025 09:29 View deployment

Adjust GlobalNav width from 176px to 240px #3925

Are you sure you want to change the base?

Adjust GlobalNav width from 176px to 240px #3925

Conversation

devin-ai-integration bot commented Oct 29, 2025 • edited by NoritakaIkeda Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Issue

Why is this change needed?

Changes

Review Checklist

Uh oh!

devin-ai-integration bot commented Oct 29, 2025

🤖 Devin AI Engineer

Uh oh!

giselles-ai bot commented Oct 29, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

vercel bot commented Oct 29, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

supabase bot commented Oct 29, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

coderabbitai bot commented Oct 29, 2025

Review skipped

Uh oh!

giselles-ai bot commented Oct 29, 2025

Check changeset necessity

Reason:

Changeset (copy & paste):

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull Request Overview

Reviewed Changes

Uh oh!

junkisai left a comment

Choose a reason for hiding this comment

Uh oh!

NoritakaIkeda commented Oct 31, 2025

Uh oh!

NoritakaIkeda commented Oct 31, 2025

Uh oh!

claude bot commented Oct 31, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

✅ Center-aligned GlobalNav button content

Changes Made

Uh oh!

claude bot commented Oct 31, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Implementing center-alignment for GlobalNav button content ✅

Tasks

Implementation Summary

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

devin-ai-integration bot commented Oct 29, 2025 •

edited by NoritakaIkeda

Loading

giselles-ai bot commented Oct 29, 2025 •

edited

Loading

vercel bot commented Oct 29, 2025 •

edited

Loading

supabase bot commented Oct 29, 2025 •

edited

Loading

claude bot commented Oct 31, 2025 •

edited

Loading

claude bot commented Oct 31, 2025 •

edited

Loading