Fix Calendar/DateRangePicker overflow in docs/stories (#2812)

Author: LFDanLu

packages/@react-spectrum/calendar/stories/Calendar.stories.tsx

@@ -20,6 +20,7 @@ import React, {useState} from 'react';
 import {storiesOf} from '@storybook/react';
 import {TimeField} from '@react-spectrum/datepicker';
 import {useLocale} from '@react-aria/i18n';
+import {View} from '@react-spectrum/view';
 
 storiesOf('Date and Time/Calendar', module)
   .add(
@@ -148,7 +149,9 @@ function Example(props) {
         </Picker>
       </Flex>
       <Provider locale={(locale || defaultLocale) + (calendar && calendar !== preferredCalendars[0].key ? '-u-ca-' + calendar : '')}>
-        <Calendar {...props} />
+        <View maxWidth="100vw" overflow="auto">
+          <Calendar {...props} />
+        </View>
       </Provider>
     </Flex>
   );

packages/@react-spectrum/calendar/stories/RangeCalendar.stories.tsx

@@ -20,6 +20,7 @@ import React, {useState} from 'react';
 import {storiesOf} from '@storybook/react';
 import styles from '@adobe/spectrum-css-temp/components/calendar/vars.css';
 import {TimeField} from '@react-spectrum/datepicker';
+import {View} from '@react-spectrum/view';
 
 storiesOf('Date and Time/RangeCalendar', module)
   .add(
@@ -131,7 +132,11 @@ storiesOf('Date and Time/RangeCalendar/cell', module)
 );
 
 function render(props = {}) {
-  return <RangeCalendar onChange={action('change')} {...props} />;
+  return (
+    <View maxWidth="100vw" overflow="auto">
+      <RangeCalendar onChange={action('change')} {...props} />
+    </View>
+  );
 }
 
 function RangeCalendarWithTime() {

packages/@react-spectrum/datepicker/src/index.css

@@ -13,6 +13,7 @@
 .react-spectrum-Datepicker-fieldWrapper.react-spectrum-Datepicker-fieldWrapper.react-spectrum-Datepicker-fieldWrapper {
    width: auto;
    min-width: var(--spectrum-global-dimension-size-2000);
+   max-width: 100%;
  }
 
 .react-spectrum-Datepicker-startField {