[✨ Triage] microsoft/aspire#15443 by afscrome - Long Command names can overflow Commands submenu

[MihuBot]

Triage for microsoft/aspire#15443.
Repo filter: area-dashboard issues.
MihuBot version: 246635.
Ping MihaZupan for any issues.

This is a test triage report generated by AI, aimed at helping the triage team quickly identify past issues/PRs that may be related.
Take any conclusions with a large grain of salt.

Tool logs

microsoft/aspire#15443: Long Command names can overflow Commands submenu by afscrome
Extracted 5 search queries: Commands submenu overflow with long command names, Long menu item label not truncated or wrapped in commands submenu, Submenu width doesn’t expand for long command names causing overflow, Dashboard commands menu CSS overflow or missing ellipsis for long labels, Many commands forced into submenu and long name spills out of dropdown
Found 25 candidate issues

• Pull Request #9827 (June 2025) - Use specific classes for fluent menu items when styling to prevent text overflow
  Summary: Added scoped selectors and an overflow-specific CSS class for Fluent menu items and updated components to use the new classes so menu item content can be ellipsized instead of overflowing. Review comments pointed out the need to include overflow:hidden and white-space:nowrap for ellipsis to work reliably, and a selector mismatch was noted (class placement vs selector). PR was merged; author noted it was initially blocked on a Fluent UI upgrade but it landed.

• Pull Request #9314 (May 2025) - Prevent text overflow in resource action URLs
  Summary: Applied text-overflow: ellipsis (with width:100%) to menu item content and moved the class to all fluent-menu-items so long URLs/labels don’t overflow menus. Discussion touched on also adding overflow:hidden/white-space:nowrap and on ensuring FluentMenu/FluentMenuButton min/max width rules are applied to context menus. Changes were merged and the solution was applied broadly to menu items.

• Pull Request #5030 (July 2024) - [Dashboard] Fix the ellipsis cut off in FluentOverflow
  Summary: Investigated cases where ellipsis was being cut off when Fluent components use flex. The fix avoided using a flex-based FluentButton for the overflow "more" control (used a FluentBadge approach) and adjusted CSS; the problem was attributed to flex interfering with initial width measurement. The PR was merged and the problem fixed (and referenced in a follow-up PR).

• Pull Request #528 and Pull Request #536 (October 2023) - Center vertical align text with ellipsis / Text alignment with ellipsis
  Summary: Addressed flexbox + text-overflow issues (vertical alignment and ellipsis) across dashboard UI. These PRs adjusted alignment and sizing so ellipses render correctly in flex layouts. Both were merged and are useful background: flex layouts can break ellipsis behavior unless handled carefully.

• Pull Request #11317 (September 2025) - Allow menus to overflow vertically to avoid blocking off content
  Summary: Added scrollable behavior to menu containers so menus that are taller than the viewport can be scrolled instead of being clipped. Merged. This addresses vertical cut-off (menu height) but not horizontal overflow/truncation inside submenu items.

• Pull Request #11338 (September 2025) - only apply overflow-y to mobile nav menu
  Summary: Fixed a regression where overflow-y: auto was applied too broadly and caused submenus to not display; the rule was scoped to the mobile nav menu only. Merged. Useful if you see submenus not appearing after styling changes.

• Issue #2661 (March 2024) - Resource commands menu goes off the bottom of the screen
  Summary: Reported menus being positioned off-screen; discussion tracked an upstream FluentMenu feature (VerticalThreshold) that would help positioning. Marked as dependent on upstream Fluent UI changes. This is about menu positioning rather than text truncation, but related when menus can't fit on screen.

• Issue #10785 (July 2025) - [Dashboard] Popup menus not positioned correctly when resources collapsed (Firefox)
  Summary: Reported menus positioned outside viewport in Firefox; reviewer suggested an alternative UI approach: split commands into a nested "Commands" sub-menu when there are more than N commands (to avoid very large menus). This is directly relevant to your scenario (many/long commands under a submenu) — the suggested mitigation is to group commands rather than only relying on CSS truncation.

• Issue #8004 (March 2025) - dashboard menu command ordering
  Summary: Requested an ordering/ordinal for ResourceCommandAnnotation so commands can be ordered predictably. Not about overflow specifically, but relevant if you choose to group or split commands (ordering controls where long items appear).

Notes / takeaways for triage of the new issue:

• There are existing fixes that add CSS classes and ellipsis behavior to Fluent menu items (PRs #9314 and #9827). Confirm whether those changes are present in the codebase/branch the reporter is using and whether overflow:hidden and white-space:nowrap are included on the targeted part element.
• If the problem is that the submenu itself is too narrow, previous approaches were either to (a) ensure menu item content is ellipsized (CSS), or (b) change menu layout/width rules (FluentMenu/FluentMenuButton min/max width) or (c) restructure the UI (group long command lists into a nested "Commands" submenu) — Issue #10785 contains that UI suggestion.
• If menus are cut off vertically or submenus not appearing, check the vertical overflow/scroll rules and recent regressions (PRs #11317 / #11338).