diff --git a/pages/docs/components/data-display/code.mdx b/pages/docs/components/data-display/code.mdx
index 388b737a73..7e31ccbbcb 100644
--- a/pages/docs/components/data-display/code.mdx
+++ b/pages/docs/components/data-display/code.mdx
@@ -8,8 +8,8 @@ description:
 ---
 
 `Code` is a component used to display inline code. It is composed from the
-[Box](/docs/components/layout/box) component with a font family of `mono` for displaying
-code.
+[Box](/docs/components/layout/box) component with a font family of `mono` for
+displaying code.
 
 <ComponentLinks
   theme={{ componentName: 'code' }}
@@ -37,11 +37,14 @@ You can change the color scheme of the component by passing the `colorScheme`
 prop.
 
 ```jsx
-<Stack direction='row'>
-  <Code children='console.log(welcome)' />
-  <Code colorScheme='red' children="var chakra = 'awesome!'" />
-  <Code colorScheme='yellow' children='npm install chakra' />
-</Stack>
+// TableContainer is used as a wrapper to prevent overflow in mobile screens
+<TableContainer>
+  <Stack direction='row'>
+    <Code children='console.log(welcome)' />
+    <Code colorScheme='red' children="var chakra = 'awesome!'" />
+    <Code colorScheme='yellow' children='npm install chakra' />
+  </Stack>
+</TableContainer>
 ```
 
 ## Props
diff --git a/pages/docs/components/feedback/toast.mdx b/pages/docs/components/feedback/toast.mdx
index 77cebd4b1d..e60b70c994 100644
--- a/pages/docs/components/feedback/toast.mdx
+++ b/pages/docs/components/feedback/toast.mdx
@@ -240,17 +240,20 @@ function Example() {
   // Or via trigger
   // Style here will overwrite the entire style above
   return (
-    <Button
-      onClick={() => {
-        toast({
-          containerStyle: {
-            border: '20px solid red',
-          },
-        })
-      }}
-    >
-      Click me to show toast with custom container style.
-    </Button>
+    // TableContainer is used as a wrapper to prevent overflow in mobile screens
+    <TableContainer>
+      <Button
+        onClick={() => {
+          toast({
+            containerStyle: {
+              border: '20px solid red',
+            },
+          })
+        }}
+      >
+        Click me to show toast with custom container style.
+      </Button>
+    </TableContainer>
   )
 }
 ```
diff --git a/pages/docs/components/form/form-control.mdx b/pages/docs/components/form/form-control.mdx
index 6c6c44eff4..401985151d 100644
--- a/pages/docs/components/form/form-control.mdx
+++ b/pages/docs/components/form/form-control.mdx
@@ -54,18 +54,21 @@ import {
 ### Sample usage for a radio or checkbox group
 
 ```jsx
-<FormControl as='fieldset'>
-  <FormLabel as='legend'>Favorite Naruto Character</FormLabel>
-  <RadioGroup defaultValue='Itachi'>
-    <HStack spacing='24px'>
-      <Radio value='Sasuke'>Sasuke</Radio>
-      <Radio value='Nagato'>Nagato</Radio>
-      <Radio value='Itachi'>Itachi</Radio>
-      <Radio value='Sage of the six Paths'>Sage of the six Paths</Radio>
-    </HStack>
-  </RadioGroup>
-  <FormHelperText>Select only if you're a fan.</FormHelperText>
-</FormControl>
+// TableContainer is used as a wrapper to prevent overflow in mobile screens
+<TableContainer>
+  <FormControl as='fieldset'>
+    <FormLabel as='legend'>Favorite Naruto Character</FormLabel>
+    <RadioGroup defaultValue='Itachi'>
+      <HStack spacing='24px'>
+        <Radio value='Sasuke'>Sasuke</Radio>
+        <Radio value='Nagato'>Nagato</Radio>
+        <Radio value='Itachi'>Itachi</Radio>
+        <Radio value='Sage of the six Paths'>Sage of the six Paths</Radio>
+      </HStack>
+    </RadioGroup>
+    <FormHelperText>Select only if you're a fan.</FormHelperText>
+  </FormControl>
+</TableContainer>
 ```
 
 ### Error message
diff --git a/pages/docs/components/form/number-input.mdx b/pages/docs/components/form/number-input.mdx
index c5bbf23d62..3a5b8d36ac 100644
--- a/pages/docs/components/form/number-input.mdx
+++ b/pages/docs/components/form/number-input.mdx
@@ -183,39 +183,42 @@ Like the `Input` component, you can pass the `size` prop to change the size of
 the input.
 
 ```jsx
-<Stack shouldWrapChildren direction='row'>
-  <NumberInput size='xs' maxW={16} defaultValue={15} min={10}>
-    <NumberInputField />
-    <NumberInputStepper>
-      <NumberIncrementStepper />
-      <NumberDecrementStepper />
-    </NumberInputStepper>
-  </NumberInput>
-
-  <NumberInput size='sm' maxW={20} defaultValue={15} min={10}>
-    <NumberInputField />
-    <NumberInputStepper>
-      <NumberIncrementStepper />
-      <NumberDecrementStepper />
-    </NumberInputStepper>
-  </NumberInput>
-
-  <NumberInput size='md' maxW={24} defaultValue={15} min={10}>
-    <NumberInputField />
-    <NumberInputStepper>
-      <NumberIncrementStepper />
-      <NumberDecrementStepper />
-    </NumberInputStepper>
-  </NumberInput>
-
-  <NumberInput size='lg' maxW={32} defaultValue={15} min={10}>
-    <NumberInputField />
-    <NumberInputStepper>
-      <NumberIncrementStepper />
-      <NumberDecrementStepper />
-    </NumberInputStepper>
-  </NumberInput>
-</Stack>
+// TableContainer is used as a wrapper to prevent overflow in mobile screens
+<TableContainer>
+  <Stack shouldWrapChildren direction='row'>
+    <NumberInput size='xs' maxW={16} defaultValue={15} min={10}>
+      <NumberInputField />
+      <NumberInputStepper>
+        <NumberIncrementStepper />
+        <NumberDecrementStepper />
+      </NumberInputStepper>
+    </NumberInput>
+
+    <NumberInput size='sm' maxW={20} defaultValue={15} min={10}>
+      <NumberInputField />
+      <NumberInputStepper>
+        <NumberIncrementStepper />
+        <NumberDecrementStepper />
+      </NumberInputStepper>
+    </NumberInput>
+
+    <NumberInput size='md' maxW={24} defaultValue={15} min={10}>
+      <NumberInputField />
+      <NumberInputStepper>
+        <NumberIncrementStepper />
+        <NumberDecrementStepper />
+      </NumberInputStepper>
+    </NumberInput>
+
+    <NumberInput size='lg' maxW={32} defaultValue={15} min={10}>
+      <NumberInputField />
+      <NumberInputStepper>
+        <NumberIncrementStepper />
+        <NumberDecrementStepper />
+      </NumberInputStepper>
+    </NumberInput>
+  </Stack>
+</TableContainer>
 ```
 
 ### Changing the styles
diff --git a/pages/docs/components/layout/flex.mdx b/pages/docs/components/layout/flex.mdx
index 419a99b059..ef444c1cb9 100644
--- a/pages/docs/components/layout/flex.mdx
+++ b/pages/docs/components/layout/flex.mdx
@@ -85,7 +85,8 @@ different widths differently.
   container and also have equal spacing between them.
 
 ```jsx
-<Box>
+// TableContainer is used as a wrapper to prevent overflow in mobile screens
+<TableContainer>
   <Text>Flex and Spacer: Full width, equal Spacing</Text>
   <Flex>
     <Box w='70px' h='10' bg='red.500' />
@@ -112,7 +113,7 @@ different widths differently.
     <Box w='170px' h='10' bg='teal.500' />
     <Box w='180px' h='10' bg='teal.500' />
   </HStack>
-</Box>
+</TableContainer>
 ```
 
 A good use case for `Spacer` is to create a navbar with a signup/login button
diff --git a/pages/docs/components/media-and-icons/image.mdx b/pages/docs/components/media-and-icons/image.mdx
index 48542fbfb5..a81944abe0 100644
--- a/pages/docs/components/media-and-icons/image.mdx
+++ b/pages/docs/components/media-and-icons/image.mdx
@@ -27,9 +27,12 @@ import { Image } from '@chakra-ui/react'
 ## Usage
 
 ```jsx
-<Box boxSize='sm'>
-  <Image src='https://bit.ly/dan-abramov' alt='Dan Abramov' />
-</Box>
+// TableContainer is used as a wrapper to prevent overflow in mobile screens
+<TableContainer>
+  <Box boxSize='sm'>
+    <Image src='https://bit.ly/dan-abramov' alt='Dan Abramov' />
+  </Box>
+</TableContainer>
 ```
 
 ## Size
@@ -37,21 +40,24 @@ import { Image } from '@chakra-ui/react'
 The size of the image can be adjusted using the `boxSize` prop.
 
 ```jsx
-<Stack direction='row'>
-  <Image
-    boxSize='100px'
-    objectFit='cover'
-    src='https://bit.ly/dan-abramov'
-    alt='Dan Abramov'
-  />
-  <Image
-    boxSize='150px'
-    objectFit='cover'
-    src='https://bit.ly/dan-abramov'
-    alt='Dan Abramov'
-  />
-  <Image boxSize='200px' src='https://bit.ly/dan-abramov' alt='Dan Abramov' />
-</Stack>
+// TableContainer is used as a wrapper to prevent overflow in mobile screens
+<TableContainer>
+  <Stack direction='row'>
+    <Image
+      boxSize='100px'
+      objectFit='cover'
+      src='https://bit.ly/dan-abramov'
+      alt='Dan Abramov'
+    />
+    <Image
+      boxSize='150px'
+      objectFit='cover'
+      src='https://bit.ly/dan-abramov'
+      alt='Dan Abramov'
+    />
+    <Image boxSize='200px' src='https://bit.ly/dan-abramov' alt='Dan Abramov' />
+  </Stack>
+</TableContainer>
 ```
 
 ## Image with border radius
diff --git a/pages/docs/components/overlay/tooltip.mdx b/pages/docs/components/overlay/tooltip.mdx
index 085070bf1b..43ce38bc45 100644
--- a/pages/docs/components/overlay/tooltip.mdx
+++ b/pages/docs/components/overlay/tooltip.mdx
@@ -112,9 +112,9 @@ By default the `Tooltip` is not shown when it is around a disabled `Button`.
 </Tooltip>
 ```
 
-To show the `Tooltip` on a disabled `Button` you need to provide the 
-`shouldWrapChildren` prop. This means that the `Button` is surrounded by a span 
-on which the `Tooltip` is pinned. You could simply add a margin to the `Tooltip` 
+To show the `Tooltip` on a disabled `Button` you need to provide the
+`shouldWrapChildren` prop. This means that the `Button` is surrounded by a span
+on which the `Tooltip` is pinned. You could simply add a margin to the `Tooltip`
 to have it more or less 'pinned' on the `Button` again.
 
 ```jsx
@@ -123,107 +123,110 @@ to have it more or less 'pinned' on the `Button` again.
 </Tooltip>
 ```
 
-> There's a case where the `borderRadius` of a button breaks when the button 
-> is in a `ButtonGroup` that has the `isAttached` prop set, and the tooltip 
-> has the `shouldWrapChildren` prop set.
-> A workaround could be to pass the specific `borderRadius` depending on the
-> `isDisabled` prop of the `Button`.
+> There's a case where the `borderRadius` of a button breaks when the button is
+> in a `ButtonGroup` that has the `isAttached` prop set, and the tooltip has the
+> `shouldWrapChildren` prop set. A workaround could be to pass the specific
+> `borderRadius` depending on the `isDisabled` prop of the `Button`.
 
 ```jsx
-<ButtonGroup colorScheme="teal" isAttached>
-  <Tooltip label="works">
+<ButtonGroup colorScheme='teal' isAttached>
+  <Tooltip label='works'>
     <Button>1</Button>
   </Tooltip>
 
-  <Tooltip label="messes up border radius" shouldWrapChildren>
+  <Tooltip label='messes up border radius' shouldWrapChildren>
     <Button isDisabled>2</Button>
   </Tooltip>
 
-  <Tooltip label="this could be a workaround" shouldWrapChildren>
-    <Button isDisabled borderRadius='0'>3</Button>
+  <Tooltip label='this could be a workaround' shouldWrapChildren>
+    <Button isDisabled borderRadius='0'>
+      3
+    </Button>
   </Tooltip>
 
   <Button>4</Button>
 </ButtonGroup>
 ```
 
-
 ## Placement
 
 Using the `placement` prop you can adjust where your tooltip will be displayed.
 
 ```jsx
-<VStack spacing={6}>
-  <HStack spacing={6}>
-    <Tooltip label='Auto start' placement='auto-start'>
-      <Button>Auto-Start</Button>
-    </Tooltip>
-
-    <Tooltip label='Auto' placement='auto'>
-      <Button>Auto</Button>
-    </Tooltip>
-
-    <Tooltip label='Auto end' placement='auto-end'>
-      <Button>Auto-End</Button>
-    </Tooltip>
-  </HStack>
-
-  <HStack spacing={6}>
-    <Tooltip label='Top start' placement='top-start'>
-      <Button>Top-Start</Button>
-    </Tooltip>
-
-    <Tooltip label='Top' placement='top'>
-      <Button>Top</Button>
-    </Tooltip>
-
-    <Tooltip label='Top end' placement='top-end'>
-      <Button>Top-End</Button>
-    </Tooltip>
-  </HStack>
-
-  <HStack spacing={6}>
-    <Tooltip label='Right start' placement='right-start'>
-      <Button>Right-Start</Button>
-    </Tooltip>
-
-    <Tooltip label='Right' placement='right'>
-      <Button>Right</Button>
-    </Tooltip>
-
-    <Tooltip label='Right end' placement='right-end'>
-      <Button>Right-End</Button>
-    </Tooltip>
-  </HStack>
-
-  <HStack spacing={6}>
-    <Tooltip label='Bottom start' placement='bottom-start'>
-      <Button>Bottom Start</Button>
-    </Tooltip>
-
-    <Tooltip label='Bottom' placement='bottom'>
-      <Button>Bottom</Button>
-    </Tooltip>
-
-    <Tooltip label='Bottom end' placement='bottom-end'>
-      <Button>Bottom End</Button>
-    </Tooltip>
-  </HStack>
-
-  <HStack spacing={6}>
-    <Tooltip label='Left start' placement='left-start'>
-      <Button>Left-Start</Button>
-    </Tooltip>
-
-    <Tooltip label='Left' placement='left'>
-      <Button>Left</Button>
-    </Tooltip>
-
-    <Tooltip label='Left end' placement='left-end'>
-      <Button>Left-End</Button>
-    </Tooltip>
-  </HStack>
-</VStack>
+// TableContainer is used as a wrapper to prevent overflow in mobile screens
+<TableContainer>
+  <VStack spacing={6}>
+    <HStack spacing={6}>
+      <Tooltip label='Auto start' placement='auto-start'>
+        <Button>Auto-Start</Button>
+      </Tooltip>
+
+      <Tooltip label='Auto' placement='auto'>
+        <Button>Auto</Button>
+      </Tooltip>
+
+      <Tooltip label='Auto end' placement='auto-end'>
+        <Button>Auto-End</Button>
+      </Tooltip>
+    </HStack>
+
+    <HStack spacing={6}>
+      <Tooltip label='Top start' placement='top-start'>
+        <Button>Top-Start</Button>
+      </Tooltip>
+
+      <Tooltip label='Top' placement='top'>
+        <Button>Top</Button>
+      </Tooltip>
+
+      <Tooltip label='Top end' placement='top-end'>
+        <Button>Top-End</Button>
+      </Tooltip>
+    </HStack>
+
+    <HStack spacing={6}>
+      <Tooltip label='Right start' placement='right-start'>
+        <Button>Right-Start</Button>
+      </Tooltip>
+
+      <Tooltip label='Right' placement='right'>
+        <Button>Right</Button>
+      </Tooltip>
+
+      <Tooltip label='Right end' placement='right-end'>
+        <Button>Right-End</Button>
+      </Tooltip>
+    </HStack>
+
+    <HStack spacing={6}>
+      <Tooltip label='Bottom start' placement='bottom-start'>
+        <Button>Bottom Start</Button>
+      </Tooltip>
+
+      <Tooltip label='Bottom' placement='bottom'>
+        <Button>Bottom</Button>
+      </Tooltip>
+
+      <Tooltip label='Bottom end' placement='bottom-end'>
+        <Button>Bottom End</Button>
+      </Tooltip>
+    </HStack>
+
+    <HStack spacing={6}>
+      <Tooltip label='Left start' placement='left-start'>
+        <Button>Left-Start</Button>
+      </Tooltip>
+
+      <Tooltip label='Left' placement='left'>
+        <Button>Left</Button>
+      </Tooltip>
+
+      <Tooltip label='Left end' placement='left-end'>
+        <Button>Left-End</Button>
+      </Tooltip>
+    </HStack>
+  </VStack>
+</TableContainer>
 ```
 
 ## More examples