Skip to content

fix(#3640): adjust alignment for work side menu badge (both component and text)#3758

Open
mxsoco wants to merge 1 commit intodevfrom
mxsoco/3640-work-side-menu-badge
Open

fix(#3640): adjust alignment for work side menu badge (both component and text)#3758
mxsoco wants to merge 1 commit intodevfrom
mxsoco/3640-work-side-menu-badge

Conversation

@mxsoco
Copy link
Copy Markdown
Collaborator

@mxsoco mxsoco commented Apr 2, 2026

Before (the change)

image

After (the change)

Added a 1px margin to the top of goa-badge to center text more. Additionally, adjusted .menu-item items to be center aligned.

image image

Steps needed to test

  • Make sure text within the badge is centered vertically (on both primary and secondary items).
  • Ensure the single menu item components are also center aligned.

@mxsoco mxsoco requested review from chrisolsen and twjeffery April 2, 2026 22:10
@mxsoco mxsoco linked an issue Apr 2, 2026 that may be closed by this pull request
@mxsoco mxsoco force-pushed the mxsoco/3640-work-side-menu-badge branch 2 times, most recently from f101f00 to 705f203 Compare April 7, 2026 16:38
@mxsoco mxsoco force-pushed the mxsoco/3640-work-side-menu-badge branch 2 times, most recently from 35d12ba to 582bee2 Compare April 8, 2026 17:55
Copy link
Copy Markdown
Collaborator

@bdfranck bdfranck left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Let's adjust the badge with a margin to preserve alignment for multi-line labels.

@chrisolsen chrisolsen requested a review from bdfranck April 9, 2026 18:32
@netlify
Copy link
Copy Markdown

netlify bot commented Apr 10, 2026

Deploy Preview for benji-docs-previews ready!

Name Link
🔨 Latest commit b1130e8
🔍 Latest deploy log https://app.netlify.com/projects/benji-docs-previews/deploys/69d9147cfbb6da0008cd311b
😎 Deploy Preview https://deploy-preview-3758--benji-docs-previews.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify project configuration.

@mxsoco mxsoco force-pushed the mxsoco/3640-work-side-menu-badge branch from 79754b3 to b1130e8 Compare April 10, 2026 15:17
Copy link
Copy Markdown
Collaborator

@bdfranck bdfranck left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I looked at the latest changes...

  • ✅ I see a badge is aligned when the label is one line
Image
  • ✅ I see a badge is top aligned when the label is multiple lines
Image

Looks good to me! 👍

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

WorkSideMenuItem: Badge text not vertically centered

3 participants