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

mui · Feb 6, 2025 · 7805988 · 7805988
1 parent 9b0db3f
commit 7805988
Show file tree

Hide file tree

Showing 2 changed files with 3 additions and 2 deletions.
diff --git a/...pickers-pro/src/internals/utils/createMultiInputRangeField/createMultiInputRangeField.tsx b/...pickers-pro/src/internals/utils/createMultiInputRangeField/createMultiInputRangeField.tsx
@@ -39,7 +39,7 @@ export function createMultiInputRangeField<TManager extends PickerAnyRangeManage
 
   const MultiInputRangeFieldRoot = 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,

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