UN-3334 [FIX] Fix profile dropdown menu items alignment by muhammad-ali-e · Pull Request #1861 · Zipstack/unstract

muhammad-ali-e · 2026-03-16T05:14:34Z

What

Fixed profile dropdown menu items being center-aligned instead of left-aligned
Added justify-content: flex-start to .logout-button class
Added left-alignment rule for .ant-dropdown-menu-title-content to cover plugin-rendered menu items

Why

Ant Design upgraded from ~5.5 to 5.13 (via caret ^5.5.1 range), which introduced justify-content: center on Button type="text" with higher specificity
This caused profile dropdown menu items to appear center/right-aligned

How

Added explicit justify-content: flex-start on .logout-button to override antd's justify-content: center
Added .ant-dropdown-menu-title-content rule with text-align: left; width: 100% to ensure plugin components that don't use the logout-button class are also left-aligned

Can this PR break any existing features?

No. This is a CSS-only change scoped to the profile dropdown menu. The justify-content: flex-start is the browser default for flex containers, so this explicitly restores expected behavior that antd 5.13 overrode.

Database Migrations

None

Env Config

None

Related Issues or PRs

UN-3334

Dependencies Versions

None (root cause is antd ^5.5.1 resolving to 5.13.2)

Notes on Testing

Deploy to cloud environment and verify profile dropdown items are left-aligned

Checklist

I have added an appropriate PR title and description
I have read and understood the Contribution Guidelines
My code follows the style guidelines of this project
I have performed a self-review of my code
New and existing unit tests pass locally with my changes
I have checked my code and corrected any misspellings

…of left-aligned Ant Design 5.13 Button type="text" introduced justify-content: center, overriding the default flex-start alignment in the profile dropdown menu. Add explicit justify-content: flex-start to .logout-button and ensure plugin-rendered menu items are also left-aligned via .ant-dropdown-menu-title-content. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

coderabbitai · 2026-03-16T05:15:24Z

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: 77ede6a7-7b5f-45f2-8d13-cef130b901a7

📥 Commits

Reviewing files that changed from the base of the PR and between 182a022 and 9bc7ca7.

📒 Files selected for processing (1)

frontend/src/components/navigations/top-nav-bar/TopNavBar.css

Summary by CodeRabbit

Style
- Improved alignment and layout of the logout control for more consistent spacing and visual balance.
- Refined the user profile menu dropdown so menu items are left-aligned and evenly spaced, improving readability and interaction consistency across account-related controls.

Walkthrough

CSS adjustments for the top navigation bar: .logout-button now uses justify-content: flex-start; added .user-profile-menu > .ant-dropdown-menu-item > .ant-dropdown-menu-title-content rules to left-align text, set full width, and use a flex layout with left justification.

Changes

Cohort / File(s)	Summary
Navigation Styling `frontend/src/components/navigations/top-nav-bar/TopNavBar.css`	Added `justify-content: flex-start` to `.logout-button`; added `.user-profile-menu > .ant-dropdown-menu-item > .ant-dropdown-menu-title-content` selector with `text-align: left`, `width: 100%`, `display: flex`, and `justify-content: flex-start`.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

🚥 Pre-merge checks | ✅ 3

✅ Passed checks (3 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title clearly summarizes the main change: fixing the alignment of profile dropdown menu items to be left-aligned.
Description check	✅ Passed	The description comprehensively covers all required template sections including What, Why, How, impact assessment, and related issue details.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

🧪 Generate unit tests (beta)

Create PR with unit tests
Post copyable unit tests in a comment
Commit unit tests in branch fix/UN-3334-FIX_profile_dropdown_alignment

📝 Coding Plan

Generate coding plan for human review comments

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.

❤️ Share

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

Tip

You can customize the tone of the review comments and chat replies.

Configure the tone_instructions setting to customize the tone of the review comments and chat replies. For example, you can set the tone to Act like a strict teacher, Act like a pirate and more.

greptile-apps · 2026-03-16T05:16:21Z

Greptile Summary

This is a CSS-only fix that restores left-alignment in the profile dropdown menu, which regressed when the antd dependency (pinned as ^5.5.1) resolved to version 5.13.2 — a version that added justify-content: center with higher specificity to Button type="text" elements.

Key changes:

Added justify-content: flex-start to .logout-button to directly override the antd 5.13 centering for menu items using the existing button class.
Added a new .user-profile-menu > .ant-dropdown-menu-item > .ant-dropdown-menu-title-content rule with text-align: left, width: 100%, display: flex, and justify-content: flex-start to handle plugin-rendered menu items (e.g. UnstractPricingMenuLink) that do not carry the .logout-button class.
Both changes are tightly scoped to .user-profile-menu, minimising any risk of unintended side-effects.
The fix correctly addresses the concern raised in previous review: the .ant-dropdown-menu-title-content rule now includes display: flex; justify-content: flex-start, not just text-align: left, ensuring alignment is restored even for flex-based children inside the wrapper <span>.

Confidence Score: 5/5

This PR is safe to merge — it is a CSS-only change scoped entirely to the profile dropdown menu.
The change is minimal (two CSS additions) and explicitly restores browser-default flex behaviour that antd 5.13 overrode. justify-content: flex-start is the flex default, so this cannot regress any other layout. The rule for .ant-dropdown-menu-title-content is tightly scoped with the direct-child combinator (>), reducing blast radius. No JS, routing, or API logic is touched.
No files require special attention.

Important Files Changed

Filename	Overview
frontend/src/components/navigations/top-nav-bar/TopNavBar.css	Two targeted CSS additions to fix profile dropdown left-alignment regression caused by antd 5.13 adding `justify-content: center` to `Button type="text"`; changes are correctly scoped to `.user-profile-menu` and now include both `display: flex` and `justify-content: flex-start` on `.ant-dropdown-menu-title-content` to handle plugin-rendered items.

Flowchart

%%{init: {'theme': 'neutral'}}%%
flowchart TD
    A[antd 5.5.1 resolves to 5.13.2] --> B[ant-btn-text gains justify-content center with higher specificity]
    B --> C{Menu item type?}
    C --> D[logout-button Button - Profile / Custom Plans / Login]
    C --> E[Plugin-rendered label - no logout-button class]
    D --> F[Fix: add justify-content flex-start to logout-button]
    E --> G[Fix: add display flex and justify-content flex-start to ant-dropdown-menu-title-content]
    F --> H[Items render left-aligned]
    G --> H

_{Last reviewed commit: 9bc7ca7}

frontend/src/components/navigations/top-nav-bar/TopNavBar.css

Address review feedback: text-align alone won't override justify-content on flex children. Making the wrapper itself a flex container with justify-content: flex-start ensures plugin items using antd Button are also left-aligned. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

athul-rs · 2026-03-16T05:49:37Z

@muhammad-ali-e Please resolve the lint errors

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

github-actions · 2026-03-16T06:04:28Z

Frontend Lint Report (Biome)

✅ All checks passed! No linting or formatting issues found.

sonarqubecloud · 2026-03-16T06:05:14Z

Quality Gate passed

Issues
0 New issues
0 Accepted issues

Measures
0 Security Hotspots
0.0% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarQube Cloud

greptile-apps bot reviewed Mar 16, 2026

View reviewed changes

frontend/src/components/navigations/top-nav-bar/TopNavBar.css Outdated Show resolved Hide resolved

muhammad-ali-e and others added 2 commits March 16, 2026 10:48

Merge branch 'main' into fix/UN-3334-FIX_profile_dropdown_alignment

763fbac

muhammad-ali-e requested review from athul-rs and vishnuszipstack March 16, 2026 05:45

vishnuszipstack approved these changes Mar 16, 2026

View reviewed changes

athul-rs approved these changes Mar 16, 2026

View reviewed changes

UN-3334 [FIX] Fix biome CSS formatting for TopNavBar selector

9bc7ca7

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

chandrasekharan-zipstack merged commit 1423385 into main Mar 16, 2026
8 checks passed

chandrasekharan-zipstack deleted the fix/UN-3334-FIX_profile_dropdown_alignment branch March 16, 2026 06:51

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

UN-3334 [FIX] Fix profile dropdown menu items alignment#1861

UN-3334 [FIX] Fix profile dropdown menu items alignment#1861
chandrasekharan-zipstack merged 4 commits intomainfrom
fix/UN-3334-FIX_profile_dropdown_alignment

muhammad-ali-e commented Mar 16, 2026 •

edited by atlassian bot

Loading

Uh oh!

coderabbitai bot commented Mar 16, 2026 •

edited

Loading

Uh oh!

greptile-apps bot commented Mar 16, 2026 •

edited

Loading

Uh oh!

Uh oh!

athul-rs commented Mar 16, 2026

Uh oh!

github-actions bot commented Mar 16, 2026

Uh oh!

sonarqubecloud bot commented Mar 16, 2026

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

Conversation

muhammad-ali-e commented Mar 16, 2026 • edited by atlassian bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

What

Why

How

Can this PR break any existing features?

Database Migrations

Env Config

Related Issues or PRs

Dependencies Versions

Notes on Testing

Checklist

Uh oh!

coderabbitai bot commented Mar 16, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary by CodeRabbit

Walkthrough

Changes

Estimated code review effort

Uh oh!

greptile-apps bot commented Mar 16, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Greptile Summary

Confidence Score: 5/5

Important Files Changed

Flowchart

Uh oh!

Uh oh!

athul-rs commented Mar 16, 2026

Uh oh!

github-actions bot commented Mar 16, 2026

Frontend Lint Report (Biome)

Uh oh!

sonarqubecloud bot commented Mar 16, 2026

Quality Gate passed

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

muhammad-ali-e commented Mar 16, 2026 •

edited by atlassian bot

Loading

coderabbitai bot commented Mar 16, 2026 •

edited

Loading

greptile-apps bot commented Mar 16, 2026 •

edited

Loading