[DateRangePicker] Fix vertical alignment for multi input fields (#16490)

mui · Feb 6, 2025 · e63e8c4 · e63e8c4
1 parent 6f60283
commit e63e8c4
Show file tree

Hide file tree

Showing 4 changed files with 5 additions and 4 deletions.
diff --git a/packages/x-date-pickers-pro/src/MultiInputDateRangeField/MultiInputDateRangeField.tsx b/packages/x-date-pickers-pro/src/MultiInputDateRangeField/MultiInputDateRangeField.tsx
@@ -43,7 +43,7 @@ const useUtilityClasses = (ownerState: MultiInputDateRangeFieldProps<any, any>)
 
 const MultiInputDateRangeFieldRoot = styled(
   React.forwardRef((props: StackProps, ref: React.Ref<HTMLDivElement>) => (
-    <Stack ref={ref} spacing={2} direction="row" alignItems="center" {...props} />
+    <Stack ref={ref} spacing={2} direction="row" alignItems="baseline" {...props} />
   )),
   {
     name: 'MuiMultiInputDateRangeField',

diff --git a/...ages/x-date-pickers-pro/src/MultiInputDateTimeRangeField/MultiInputDateTimeRangeField.tsx b/...ages/x-date-pickers-pro/src/MultiInputDateTimeRangeField/MultiInputDateTimeRangeField.tsx
@@ -41,7 +41,7 @@ const useUtilityClasses = (ownerState: MultiInputDateTimeRangeFieldProps<any, an
 
 const MultiInputDateTimeRangeFieldRoot = styled(
   React.forwardRef((props: StackProps, ref: React.Ref<HTMLDivElement>) => (
-    <Stack ref={ref} spacing={2} direction="row" alignItems="center" {...props} />
+    <Stack ref={ref} spacing={2} direction="row" alignItems="baseline" {...props} />
   )),
   {
     name: 'MuiMultiInputDateTimeRangeField',

diff --git a/packages/x-date-pickers-pro/src/MultiInputTimeRangeField/MultiInputTimeRangeField.tsx b/packages/x-date-pickers-pro/src/MultiInputTimeRangeField/MultiInputTimeRangeField.tsx
@@ -43,7 +43,7 @@ const useUtilityClasses = (ownerState: MultiInputTimeRangeFieldProps<any, any>)
 
 const MultiInputTimeRangeFieldRoot = styled(
   React.forwardRef((props: StackProps, ref: React.Ref<HTMLDivElement>) => (
-    <Stack ref={ref} spacing={2} direction="row" alignItems="center" {...props} />
+    <Stack ref={ref} spacing={2} direction="row" alignItems="baseline" {...props} />
   )),
   {
     name: 'MuiMultiInputTimeRangeField',

diff --git a/packages/x-date-pickers/src/PickersTextField/PickersInputBase/PickersInputBase.tsx b/packages/x-date-pickers/src/PickersTextField/PickersInputBase/PickersInputBase.tsx
@@ -108,7 +108,8 @@ const PickersInputBaseSection = styled(PickersSectionListSection, {
   fontSize: 'inherit',
   letterSpacing: 'inherit',
   lineHeight: '1.4375em', // 23px
-  display: 'flex',
+  display: 'inline-block',
+  whiteSpace: 'nowrap',
 }));
 
 const PickersInputBaseSectionContent = styled(PickersSectionListSectionContent, {