Merge pull request #294 from chakra-ui/fix/docs-typos

fix: overflow scrolling on mobile view tables in documentation

Author: codebender828

website/components/MDXComponents.js

@@ -180,8 +180,10 @@ const MDXComponents = {
     name: 'Table',
     render () {
       return (
-        <CBox as="table" textAlign="left" mt="32px" width="full" {...props}>
-          {this.$slots.default}
+        <CBox overflowX="auto">
+          <CBox as="table" textAlign="left" mt="32px" width="full" {...props}>
+            {this.$slots.default}
+          </CBox>
         </CBox>
       )
     }

website/pages/modal.mdx

@@ -284,8 +284,9 @@ pass the `isCentered`
       :is-open="isOpen"
       :on-close="close"
       :closeOnOverlayClick="false"
+      is-centered
     >
-      <c-modal-content ref="content" is-centered>
+      <c-modal-content ref="content">
         <c-modal-header>Modal Title</c-modal-header>
         <c-modal-close-button />
         <c-modal-body>
@@ -344,8 +345,9 @@ If the content within the modal overflows beyond the viewport, you can use the
       :on-close="close"
       :closeOnOverlayClick="false"
       :scroll-behavior="scrollBehavior"
+      is-centered
     >
-      <c-modal-content ref="content" is-centered>
+      <c-modal-content ref="content" >
         <c-modal-header>Modal Title</c-modal-header>
         <c-modal-close-button />
         <c-modal-body>
@@ -400,8 +402,9 @@ Pass the `size` prop if you need to adjust the size of the modal. Values can be
       :on-close="close"
       :closeOnOverlayClick="false"
       :size="size"
+      is-centered
     >
-      <c-modal-content ref="content" is-centered>
+      <c-modal-content ref="content">
         <c-modal-header>Modal Title</c-modal-header>
         <c-modal-close-button />
         <c-modal-body>