Prevent text overflow in resource action URLs (#9314)

Author: adamint

playground/Stress/Stress.AppHost/Program.cs

@@ -79,7 +79,19 @@
 
 builder.AddProject<Projects.Stress_TelemetryService>("stress-telemetryservice")
        .WithUrls(c => c.Urls.Add(new() { Url = "https://someplace.com", DisplayText = "Some place" }))
-       .WithUrl("https://someotherplace.com/some-path", "Some other place");
+       .WithUrl("https://someotherplace.com/some-path", "Some other place")
+       .WithUrl("https://extremely-long-url.com/abcdefghijklmnopqrstuvwxyz/abcdefghijklmnopqrstuvwxyz/abcdefghijklmnopqrstuvwxyz//abcdefghijklmnopqrstuvwxyz/abcdefghijklmnopqrstuvwxyz/abcdefghijklmnopqrstuvwxyz/abcdefghijklmnopqrstuvwxyz/abcdefghijklmno")
+       .WithCommand(
+           name: "long-command",
+           displayName: "This is a custom command with a very long command display name",
+           executeCommand: (c) =>
+           {
+               return Task.FromResult(CommandResults.Success());
+           },
+           commandOptions: new CommandOptions
+           {
+               IconName = "CloudDatabase"
+           });
 
 #if !SKIP_DASHBOARD_REFERENCE
 // This project is only added in playground projects to support development/debugging

src/Aspire.Dashboard/Components/Controls/AspireMenu.razor.cs

@@ -77,6 +77,10 @@ public async Task OpenAsync(int screenWidth, int screenHeight, int clientX, int
                 .AddStyle("right", $"{right}px", right != 0)
                 .AddStyle("top", $"{top}px", top != 0)
                 .AddStyle("bottom", $"{bottom}px", bottom != 0)
+                // max-width and min-width values come from fluentui-blazor stylesheet
+                // explicitly set to override min-width: fit-content applied by library to some menus
+                .AddStyle("max-width", "368px")
+                .AddStyle("min-width", "64px")
                 .Build();
 
             Open = true;

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

@@ -817,3 +817,8 @@ fluent-tooltip[anchor="dialog_close"] > div {
     vertical-align: text-bottom;
     margin-right: 3px;
 }
+
+fluent-menu-item::part(content) {
+    width: 100%;
+    text-overflow: ellipsis;
+}