Use specific classes for fluent menu items when styling to prevent text overflow

[adamint]

Description

Fixes #9222

Checklist

• Is this feature complete?
  • Yes. Ready to ship.
  • No. Follow-up changes expected.
• Are you including unit tests for the changes and scenario tests if relevant?
  • Yes
  • No
• Did you add public API?
  • Yes
    • If yes, did you have an API Review for it?
      • Yes
      • No
    • Did you add <remarks /> and <code /> elements on your triple slash comments?
      • Yes
      • No
  • No
• Does the change make any security assumptions or guarantees?
  • Yes
    • If yes, have you done a threat model and had a security review?
      • Yes
      • No
  • No
• Does the change require an update in our Aspire docs?
  • Yes
    • Link to aspire-docs issue (consider using one of the following templates):
      • New (or update) doc-idea template
      • New breaking-change template
      • New diagnostic template
  • No

[Copilot]

Pull Request Overview

This PR introduces specific CSS classes to control text overflow on Fluent menu items and updates relevant components to use those classes, preventing text from spilling out of menu containers.

• Added scoped selectors and an overflow-specific class for Fluent menu items in CSS
• Updated FluentMenu and FluentMenuItem usages to include the new classes
• Adjusted a component comment to explain the styling approach

Reviewed Changes

Copilot reviewed 4 out of 4 changed files in this pull request and generated 3 comments.

File	Description
src/Aspire.Dashboard/wwwroot/css/app.css	Scopes fluent-menu-item::part(content) rules and adds an overflow utility class
src/Aspire.Dashboard/Components/Layout/MobileNavMenu.razor	Adds aspire-menu-container class to the mobile nav FluentMenu
src/Aspire.Dashboard/Components/Dialogs/TextVisualizerDialog.razor	Applies overflow-fluent-menu-item class to menu items in dialog
src/Aspire.Dashboard/Components/Controls/AspireMenu.razor	Adds aspire-menu-container class on FluentMenu and includes a guiding comment

Comments suppressed due to low confidence (2)

src/Aspire.Dashboard/Components/Controls/AspireMenu.razor:6

• This comment is misleading: the aspire-menu-container class is actually applied on <FluentMenu>, not its parent. Please update or remove the comment so it aligns with the implementation.

@* aspire-menu-container is added to the div parent of FluentMenu, not the FluentMenu *@

src/Aspire.Dashboard/wwwroot/css/app.css:789

• [nitpick] No tests cover the new overflow styling; consider adding a visual regression or component test to ensure text-overflow behavior remains consistent.

fluent-menu-item::part(content) {

[Copilot]

The CSS selector assumes .aspire-menu-container wraps the <fluent-menu>, but you applied the class directly on the <FluentMenu> element. As a result the rule won’t match. Either move the class to a parent container or adjust the selector to target fluent-menu.aspire-menu-container.

Suggested change

	.aspire-menu-container > fluent-menu > fluent-menu-item::part(content) {
	fluent-menu.aspire-menu-container > fluent-menu-item::part(content) {

[Copilot]

To reliably trigger an ellipsis, you should also include overflow: hidden; and white-space: nowrap; on the same element.

Suggested change

	text-overflow: ellipsis;
	text-overflow: ellipsis;
	overflow: hidden;
	white-space: nowrap;

[Copilot]

[nitpick] Both scoped and utility selectors set identical properties (width: 100% and text-overflow: ellipsis). Consider extracting them into a shared rule or CSS variable to reduce duplication.

Suggested change

	.aspire-menu-container > fluent-menu > fluent-menu-item::part(content) {
	width: 100%;
	text-overflow: ellipsis;
	}
	.overflow-fluent-menu-item::part(content) {
	width: 100%;
	text-overflow: ellipsis;
	.full-width-ellipsis {
	width: 100%;
	text-overflow: ellipsis;
	}
	.aspire-menu-container > fluent-menu > fluent-menu-item::part(content) {
	@apply .full-width-ellipsis;
	}
	.overflow-fluent-menu-item::part(content) {
	@apply .full-width-ellipsis;

[adamint]

note: this is blocked on fluentui upgrade