fix(DateTimePicker): width overflow when set ViewMode to DateTime (dotnetcore#6590)

Author: ArgoZhang

src/BootstrapBlazor/Components/DateTimePicker/DatePickerBody.razor

@@ -37,7 +37,7 @@
                                 <i class="@PreviousMonthIcon"></i>
                             </button>
                         }
-                        <div class="d-flex align-items-center justify-content-center flex-fill">
+                        <div class="@HeaderLabelString">
                             <span role="button" class="picker-panel-header-label" @onclick="() => SwitchView(DatePickerViewMode.Year)">@YearString</span>
                             <span role="button" class="@CurrentMonthViewClassName" @onclick="() => SwitchView(DatePickerViewMode.Month)">@MonthString</span>
                             @if (IsDateTimeMode)

src/BootstrapBlazor/Components/DateTimePicker/DatePickerBody.razor.cs

@@ -465,6 +465,10 @@ public bool AllowNull
 
     private bool IsDateTimeMode => ViewMode == DatePickerViewMode.DateTime && CurrentViewMode == DatePickerViewMode.DateTime;
 
+    private string? HeaderLabelString => CssBuilder.Default("d-flex align-items-center justify-content-center flex-fill")
+        .AddClass("picker-panel-header-bar", ViewMode == DatePickerViewMode.DateTime)
+        .Build();
+
     private readonly Dictionary<string, List<DateTime>> _monthDisabledDaysCache = [];
 
     /// <summary>

src/BootstrapBlazor/Components/DateTimePicker/DatePickerBody.razor.scss

@@ -1,4 +1,4 @@
-.picker-panel {
+.picker-panel {
     --bb-picker-panel-body-width: 320px;
     --bb-picker-hover-color: #409eff;
     --bb-picker-panel-side-width: 0;
@@ -62,6 +62,12 @@
                     }
                 }
 
+                .picker-panel-header-bar {
+                    .picker-panel-header-label {
+                        font-size: 14px;
+                    }
+                }
+
                 .picker-panel-header-label {
                     font-size: 16px;
                     font-weight: 500;