docs(ui-date-time-input): fix Calendar and DateTimeInput page examples clipped off in docs

This fix makes margins much smaller in small viewports, so pages look much better. This fixes
Calendar examples being clipped off

INSTUI-4256

Author: matyasf

packages/__docs__/src/App/index.tsx

@@ -81,6 +81,7 @@ import type {
   ParsedDocSummary
 } from '../../buildScripts/DataTypes.mjs'
 import { logError } from '@instructure/console'
+import type { Spacing } from '@instructure/emotion'
 
 type AppContextType = {
   themeKey: keyof MainDocsData['themes']
@@ -482,14 +483,7 @@ class App extends Component<AppProps, AppState> {
     const themeVariables = themes[themeKey!].resource
     const heading = currentData.extension !== '.md' ? currentData.title : ''
     const documentContent = (
-      <View
-        as="div"
-        padding={
-          layout === 'small' || layout === 'medium'
-            ? 'x-large none none large'
-            : 'x-large none none'
-        }
-      >
+      <View as="div" padding="x-large none none">
         {this.renderThemeSelect()}
         <View
           elementRef={this.mainContentRef}
@@ -511,12 +505,14 @@ class App extends Component<AppProps, AppState> {
         </View>
       </View>
     )
-    return this.renderWrappedContent(documentContent)
+    const padding: Spacing =
+      layout === 'small' ? 'large small large small' : 'large'
+    return this.renderWrappedContent(documentContent, padding)
   }
 
   renderWrappedContent(
     content: ReactElement[] | ReactElement,
-    padding: any = 'large'
+    padding: Spacing = 'large'
   ) {
     return <ContentWrap padding={padding}>{content}</ContentWrap>
   }
@@ -701,7 +697,8 @@ class App extends Component<AppProps, AppState> {
               shape="circle"
               color="secondary"
               size="medium"
-              aria-expanded={true} />
+              aria-expanded={true}
+            />
           </InstUISettingsProvider>
         </View>
 
@@ -824,6 +821,9 @@ class App extends Component<AppProps, AppState> {
               <div css={this.props.styles?.hamburger}>
                 <InstUISettingsProvider>
                   <IconButton
+                    themeOverride={{
+                      secondaryBorderColor: '#343434'
+                    }}
                     onClick={this.handleMenuOpen}
                     elementRef={this.handleMenuTriggerRef}
                     renderIcon={IconHamburgerSolid}

packages/ui-date-time-input/src/DateTimeInput/README.md

@@ -23,7 +23,7 @@ The component is localized via its `locale` and `timezone` parameters. Both are
   class Example extends React.Component {
     render() {
       return (
-        <div style={{ height: '10rem', width: '40em' }}>
+        <div style={{ height: '15rem' }}>
           <DateTimeInput
             description="Pick a date and time"
             datePlaceholder="Choose a date"
@@ -45,7 +45,7 @@ The component is localized via its `locale` and `timezone` parameters. Both are
 - ```js
   const Example = () => {
     return (
-      <div style={{ height: '10rem', width: '40em' }}>
+      <div style={{ height: '15rem' }}>
         <DateTimeInput
           description="Pick a date and time"
           datePlaceholder="Choose a date"
@@ -98,7 +98,7 @@ This sample code also allows the user to enter an arbitrary time value by settin
         ? new Date(this.state.value).toString()
         : 'N/A'
       return (
-        <div style={{ width: '25em' }}>
+        <div>
           <div style={{ marginBottom: '1em', fontStyle: 'italic' }}>
             You entered:
             <br />
@@ -155,7 +155,7 @@ This sample code also allows the user to enter an arbitrary time value by settin
     const text = value ? new Date(value).toString() : 'N/A'
 
     return (
-      <div style={{ width: '25em' }}>
+      <div>
         <div style={{ marginBottom: '1em', fontStyle: 'italic' }}>
           You entered:
           <br />
@@ -214,7 +214,7 @@ type: example
     render() {
       return (
         <ApplyLocale locale="fr" timezone="Africa/Nairobi">
-          <div style={{ height: '12rem', width: '40em' }}>
+          <div style={{ height: '14rem' }}>
             <DateTimeInput
               description="Pick a date and time"
               datePlaceholder="Choose a date"
@@ -240,7 +240,7 @@ type: example
   const Example = () => {
     return (
       <ApplyLocale locale="fr" timezone="Africa/Nairobi">
-        <div style={{ height: '12rem', width: '40em' }}>
+        <div style={{ height: '14rem' }}>
           <DateTimeInput
             description="Pick a date and time"
             datePlaceholder="Choose a date"
@@ -304,7 +304,7 @@ type: example
     }
     render() {
       return (
-        <div style={{ height: '12rem', width: '40em' }}>
+        <div style={{ height: '15rem' }}>
           <DateTimeInput
             description="Pick a date and time"
             datePlaceholder="Choose a date"
@@ -349,7 +349,7 @@ type: example
     }
 
     return (
-      <div style={{ height: '12rem', width: '40em' }}>
+      <div style={{ height: '15rem' }}>
         <DateTimeInput
           description="Pick a date and time"
           datePlaceholder="Choose a date"