From ba41dc1e199e2e6292bf4a088f61f44b9c64ad27 Mon Sep 17 00:00:00 2001 From: Adam Ratzman Date: Wed, 14 May 2025 16:14:41 -0300 Subject: [PATCH 1/3] Prevent text overflow in resource action URLs --- src/Aspire.Dashboard/Model/ResourceMenuItems.cs | 1 + src/Aspire.Dashboard/wwwroot/css/app.css | 5 +++++ 2 files changed, 6 insertions(+) diff --git a/src/Aspire.Dashboard/Model/ResourceMenuItems.cs b/src/Aspire.Dashboard/Model/ResourceMenuItems.cs index 79c0cb082d9..44eddd4508d 100644 --- a/src/Aspire.Dashboard/Model/ResourceMenuItems.cs +++ b/src/Aspire.Dashboard/Model/ResourceMenuItems.cs @@ -149,6 +149,7 @@ public static void AddMenuItems( Text = url.Text, Tooltip = url.Url, Icon = s_linkIcon, + Class = "resource-actions-url-menuitem", AdditionalAttributes = new Dictionary { ["data-openbutton"] = "true", diff --git a/src/Aspire.Dashboard/wwwroot/css/app.css b/src/Aspire.Dashboard/wwwroot/css/app.css index 2adf5b85905..e86685c7522 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; } + +.resource-actions-url-menuitem::part(content) { + width: 100%; + text-overflow: ellipsis; +} From 9c8cbda0dd147fb5e3aaeabc1158f155f82edebb Mon Sep 17 00:00:00 2001 From: Adam Ratzman Date: Mon, 19 May 2025 16:47:56 -0400 Subject: [PATCH 2/3] Add url and command with long display names --- playground/Stress/Stress.AppHost/Program.cs | 14 +++++++++++++- 1 file changed, 13 insertions(+), 1 deletion(-) 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 From 1cfd16d6fc9558c9dcccf175602c7bcda67fce74 Mon Sep 17 00:00:00 2001 From: Adam Ratzman Date: Mon, 19 May 2025 16:48:39 -0400 Subject: [PATCH 3/3] Apply width: 100% and ellipsis overflow to all menu items. Explicitly set max and min width for all fluent menus. --- src/Aspire.Dashboard/Components/Controls/AspireMenu.razor.cs | 4 ++++ src/Aspire.Dashboard/Model/ResourceMenuItems.cs | 1 - src/Aspire.Dashboard/wwwroot/css/app.css | 2 +- 3 files changed, 5 insertions(+), 2 deletions(-) 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/Model/ResourceMenuItems.cs b/src/Aspire.Dashboard/Model/ResourceMenuItems.cs index 44eddd4508d..79c0cb082d9 100644 --- a/src/Aspire.Dashboard/Model/ResourceMenuItems.cs +++ b/src/Aspire.Dashboard/Model/ResourceMenuItems.cs @@ -149,7 +149,6 @@ public static void AddMenuItems( Text = url.Text, Tooltip = url.Url, Icon = s_linkIcon, - Class = "resource-actions-url-menuitem", AdditionalAttributes = new Dictionary { ["data-openbutton"] = "true", diff --git a/src/Aspire.Dashboard/wwwroot/css/app.css b/src/Aspire.Dashboard/wwwroot/css/app.css index e86685c7522..42dc4b2fa4d 100644 --- a/src/Aspire.Dashboard/wwwroot/css/app.css +++ b/src/Aspire.Dashboard/wwwroot/css/app.css @@ -818,7 +818,7 @@ fluent-tooltip[anchor="dialog_close"] > div { margin-right: 3px; } -.resource-actions-url-menuitem::part(content) { +fluent-menu-item::part(content) { width: 100%; text-overflow: ellipsis; }