Prevent text overflow in resource action URLs

[adamint]

Description

Add text-overflow to the menu item content. We have to set width to 100%, as otherwise width is set to the width of the text content.

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 aims to prevent text overflow in resource action URLs by updating the CSS styling and ensuring the proper class is applied to the menu item.

• Added a CSS rule with text ellipsis styling on resource action URLs.
• Updated the ResourceMenuItems model to apply the new CSS class.

Reviewed Changes

Copilot reviewed 2 out of 2 changed files in this pull request and generated 1 comment.

File	Description
src/Aspire.Dashboard/wwwroot/css/app.css	Introduces a new CSS selector for resource action URLs with ellipsis styling.
src/Aspire.Dashboard/Model/ResourceMenuItems.cs	Applies the new CSS class to the resource action URL menu item.

[JamesNK]

PR has changes from #9317 as well?

[JamesNK]

Is there a reason to not apply the class to all menu items at a lower level?

Or add a style to the fluent menu in AspireMenu, and that style applies to all items inside the fluent menu.

[JamesNK]

For example, I imagine this problem could also happen if there is a very long command name.

[adamint]

No reason, added to all fluent-menu-items.

[JamesNK]

The URL also appears in the context menu on the graph view. It doesn't help there:

I'm guessing the menu on the console page has a max width defined somewhere and that's missing when it is a context menu.

[JamesNK]

Add a long URL to a resource in the stress test playground for testing now and in the future.

Edit: And a resource command with a very long display name.

[adamint]

I'm guessing the menu on the console page has a max width defined somewhere and that's missing when it is a context menu.

Seems like it's actually the FluentMenuButton with the max and min width defined (368px and 64px respectively), though I can't find these values in the fluentui-blazor repo. They were not being applied to the resource actions graph context menu because (for some reason) min-width is set to fit-content. I added styling in AspireMenu.razor.cs to add those width rules explicitly.