diff --git a/playground/Stress/Stress.AppHost/Program.cs b/playground/Stress/Stress.AppHost/Program.cs index f4d0627ee2a..3548b671672 100644 --- a/playground/Stress/Stress.AppHost/Program.cs +++ b/playground/Stress/Stress.AppHost/Program.cs @@ -79,7 +79,19 @@ builder.AddProject("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 diff --git a/src/Aspire.Dashboard/Components/Controls/AspireMenu.razor.cs b/src/Aspire.Dashboard/Components/Controls/AspireMenu.razor.cs index 32027526268..f8007961a3b 100644 --- a/src/Aspire.Dashboard/Components/Controls/AspireMenu.razor.cs +++ b/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; diff --git a/src/Aspire.Dashboard/wwwroot/css/app.css b/src/Aspire.Dashboard/wwwroot/css/app.css index 2adf5b85905..42dc4b2fa4d 100644 --- a/src/Aspire.Dashboard/wwwroot/css/app.css +++ b/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; +}