Fix incorrect DateTimePicker year button alignment on wide devices

mui · Jun 8, 2019 · 14e2033 · 14e2033
1 parent 421ba33
commit 14e2033
Showing 1 changed file with 20 additions and 16 deletions.
diff --git a/lib/src/DateTimePicker/DateTimePickerToolbar.tsx b/lib/src/DateTimePicker/DateTimePickerToolbar.tsx
@@ -5,18 +5,18 @@ import ToolbarButton from '../_shared/ToolbarButton';
 import DateTimePickerTabs from './DateTimePickerTabs';
 import { Grid } from '@material-ui/core';
 import { useUtils } from '../_shared/hooks/useUtils';
-import { makeStyles, useTheme } from '@material-ui/core/styles';
 import { DateTimePickerView } from './DateTimePicker';
 import { ToolbarComponentProps } from '../Picker/Picker';
+import { makeStyles, useTheme } from '@material-ui/core/styles';
 import { useMeridiemMode } from '../TimePicker/TimePickerToolbar';
 
 export const useStyles = makeStyles(
   _ => ({
     toolbar: {
       flexDirection: 'row',
       alignItems: 'center',
-      paddingLeft: 12,
-      paddingRight: 12,
+      paddingLeft: 16,
+      paddingRight: 16,
       justifyContent: 'space-around',
     },
     separator: {
@@ -48,19 +48,23 @@ export const DateTimePickerToolbar: React.FC<ToolbarComponentProps> = ({
     <>
       <PickerToolbar className={classes.toolbar}>
         <Grid container justify="center" wrap="nowrap">
-          <Grid item container xs={5} direction="row">
-            <ToolbarButton
-              variant="subtitle1"
-              onClick={() => setOpenView('year')}
-              selected={openView === 'year'}
-              label={utils.getYearText(date)}
-            />
-            <ToolbarButton
-              variant="h4"
-              onClick={() => setOpenView('date')}
-              selected={openView === 'date'}
-              label={utils.getDateTimePickerHeaderText(date)}
-            />
+          <Grid item container xs={5} justify="flex-start" direction="column">
+            <div>
+              <ToolbarButton
+                variant="subtitle1"
+                onClick={() => setOpenView('year')}
+                selected={openView === 'year'}
+                label={utils.getYearText(date)}
+              />
+            </div>
+            <div>
+              <ToolbarButton
+                variant="h4"
+                onClick={() => setOpenView('date')}
+                selected={openView === 'date'}
+                label={utils.getDateTimePickerHeaderText(date)}
+              />
+            </div>
           </Grid>
 
           <Grid