fix(nav-menu): modify the misalignment issue of dropdown content

[James-9696]

PR

问题：菜单内容溢出错位

修改后：

PR Checklist

Please check if your PR fulfills the following requirements:

• The commit message follows our Commit Message Guidelines
• Tests for the changes have been added (for bug fixes / features)
• Docs have been added / updated (for bug fixes / features)

PR Type

What kind of change does this PR introduce?

• Bugfix
• Feature
• Code style update (formatting, local variables)
• Refactoring (no functional changes, no api changes)
• Build related changes
• CI related changes
• Documentation content changes
• Other... Please describe:

What is the current behavior?

Issue Number: N/A

What is the new behavior?

Does this PR introduce a breaking change?

• Yes
• No

Other information

Summary by CodeRabbit

• Style
  • Updated navigation menu styling to improve text display. Sub-menu items now truncate with an ellipsis when text exceeds available space, displaying content in a single line for better visual consistency.

[coderabbitai]

Walkthrough

Updated CSS styling in the navigation menu sub-items to implement single-line text truncation with ellipsis, replacing white-space: normal with display: inline-block, fixed width, overflow handling, and text truncation properties.

Changes

Cohort / File(s)	Summary
Navigation Menu Styling packages/theme/src/nav-menu/index.less	Modified > span, > a within .sub-item to enforce single-line text truncation using display: inline-block, width: 100px, overflow: hidden, text-overflow: ellipsis, and white-space: nowrap, while preserving existing color, underline, and font styling logic.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~8 minutes

Poem

A menu so neat, with text trimmed to fit,
Each label now rests where the ellipsis sits,
No overflow sprawls from our CSS delight,
Single-line splendor—a visual bite! 🐰✨

🚥 Pre-merge checks | ✅ 3

✅ Passed checks (3 passed)

Check name	Status	Explanation
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Title check	✅ Passed	The title accurately describes the main change—fixing a misalignment issue in the nav-menu dropdown content through CSS styling adjustments to enforce text truncation.
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.

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

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests

---

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

• X
• Mastodon
• Reddit
• LinkedIn

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

[coderabbitai]

Actionable comments posted: 1

🤖 Prompt for all review comments with AI agents

Verify each finding against the current code and only fix it if needed.

Inline comments:
In `@packages/theme/src/nav-menu/index.less`:
- Around line 299-303: The submenu label rule currently forces a fixed width
(width: 100px) causing premature truncation; replace the fixed width with a
container-relative constraint such as max-width: 100% (or width: auto) and
ensure the element can shrink inside flex/containers by keeping overflow:
hidden; text-overflow: ellipsis; white-space: nowrap; (so the rule on the same
selector that contains display: inline-block; overflow: hidden; text-overflow:
ellipsis; white-space: nowrap; uses max-width: 100% or width: auto instead of
width: 100px, and if this element lives inside a flex container ensure
parent/this selector allows shrinking, e.g., min-width: 0).

🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

• Push a commit to this branch (recommended)
• Create a new PR with the fixes

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Repository UI

Review profile: CHILL

Plan: Pro

Run ID: 730e0816-5075-4818-8a44-82de433b4080

📥 Commits

Reviewing files that changed from the base of the PR and between 8885a2d and 88faa92.

📒 Files selected for processing (1)

• packages/theme/src/nav-menu/index.less

[coderabbitai]

⚠️ Potential issue | 🟠 Major

Avoid fixed-width truncation for submenu labels

Line 300 hardcodes width: 100px, which causes premature clipping even when space is available and can reduce label readability/discoverability. Prefer container-relative sizing so ellipsis appears only on actual overflow.

Proposed CSS adjustment

-              display: inline-block;
-              width: 100px;
+              display: block;
+              width: 100%;
+              min-width: 0;
               overflow: hidden;
               text-overflow: ellipsis;
               white-space: nowrap;

📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change

	display: inline-block;
	width: 100px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	display: block;
	width: 100%;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed.

In `@packages/theme/src/nav-menu/index.less` around lines 299 - 303, The submenu
label rule currently forces a fixed width (width: 100px) causing premature
truncation; replace the fixed width with a container-relative constraint such as
max-width: 100% (or width: auto) and ensure the element can shrink inside
flex/containers by keeping overflow: hidden; text-overflow: ellipsis;
white-space: nowrap; (so the rule on the same selector that contains display:
inline-block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
uses max-width: 100% or width: auto instead of width: 100px, and if this element
lives inside a flex container ensure parent/this selector allows shrinking,
e.g., min-width: 0).