From dd4b2d3fac18bf8dfb9e73a86f21cdb5052df672 Mon Sep 17 00:00:00 2001 From: maliming Date: Tue, 12 May 2026 14:04:59 +0800 Subject: [PATCH] Truncate long picker labels so they no longer overlap the toggle icon Long label text (e.g. Turkish translations) on MudDatePicker / MudTimePicker overflowed the input and visually overlapped the calendar toggle icon on the right. Reserve 40px on the right for the end-adornment icon so the label clips with ellipsis. --- .../Volo.Abp.MudBlazorUI/wwwroot/volo.abp.mudblazorui.css | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/framework/src/Volo.Abp.MudBlazorUI/wwwroot/volo.abp.mudblazorui.css b/framework/src/Volo.Abp.MudBlazorUI/wwwroot/volo.abp.mudblazorui.css index 2562386a54..c265fd5830 100644 --- a/framework/src/Volo.Abp.MudBlazorUI/wwwroot/volo.abp.mudblazorui.css +++ b/framework/src/Volo.Abp.MudBlazorUI/wwwroot/volo.abp.mudblazorui.css @@ -83,3 +83,11 @@ white-space: nowrap; } + +/* Picker label (date / time / color picker): when label is long it overflows into the + toggle icon on the right and visually overlaps the calendar/clock icon. + Reserve ~40px on the right for the end-adornment toggle icon so the label truncates with ellipsis. */ +.mud-picker .mud-input-label.mud-input-label-inputcontrol { + max-width: calc(100% - 40px); +} +