chore: fix tables on mobile

Resolves #78

docs/components/TableContainer.vue

@@ -0,0 +1,3 @@
+<template>
+  <div class="max-w-full overflow-x-auto"><slot /></div>
+</template>

docs/content/2.usage/1.configuration.md

@@ -9,6 +9,8 @@ You can create a `content/settings.json` file to configure the theme.
 
 ### Properties
 
+<table-container>
+
 | Key | Type | Description |
 |---------|------|-------------|
 | `title` | `String` | Documentation title |
@@ -24,6 +26,8 @@ You can create a `content/settings.json` file to configure the theme.
 | `github.dir` | `String` | The default dir of your project, used in the `Edit this page on GitHub link` on each page (defaults to `''`). Change it if docus is not at the root of your repository. |
 | `algolia` | `Object` | This option allows you to use [Algolia DocSearch](https://docsearch.algolia.com). In order to enable it, you need to provide at least the `apiKey` and the `indexName`, see example below. |
 
+</table-container>
+
 ### Algolia Search
 
 This option allows you to use [Algolia DocSearch](https://docsearch.algolia.com). In order to enable it, you need to provide at least the `apiKey` and the `indexName`:

docs/content/2.usage/2.content.md

@@ -16,6 +16,8 @@ Checkout Nuxt Content documentation on [writing markdown content](https://conten
 
 Every markdown file should define properties in the front-matter in order to work properly.
 
+<table-container>
+
 | Key | Type | Required | Description |
 |---------|------|--------| -----|
 | `title` | `String` | **yes** | Title of the page (will also be injected in metas) |
@@ -28,6 +30,8 @@ Every markdown file should define properties in the front-matter in order to wor
 | `position` | `Number` |  | Position of the page in the category, by default we use the filename prefix `POSITION.`, example: `1.first-page.md` |
 | `draft` | `Boolean` |  | Set the page as draft, will be displayed only in development, by default we use the filename suffix `.draft`, example: `3.my-draft-page.draft.md` |
 
+</table-container>
+
 ### Example
 
 ```md[content/en/index.md]

docs/content/2.usage/3.components.md

@@ -112,12 +112,16 @@ danger:
 </code-block>
 </code-group>
 
+<table-container>
+
 | Prop | Type | Default | Values |
 |---------|------|-------------| ---|
 | `items` | `Array` | `[]` | Array of string |
 | `type` | `String` | `'primary'` | `['primary', 'success', 'info', 'warning', 'danger']` |
 | `icon` | `String` | `null` | Used to override the default `type` icon, check out the [icons available](https://github.com/nuxt/content/tree/dev/packages/theme-docs/src/components/global/icons) |
 
+</table-container>
+
 ### `<badge>`
 
 <code-group>
@@ -183,11 +187,15 @@ This component uses `slots`, refer to [`code-block`](#code-block) below.
   </code-block>
 </code-group>
 
+<table-container>
+
 | Prop | Type | Required | Default | Description |
 |---------|------|-------------| ---| -- |
 | `label` | `String` | yes | | Label to display for the tab |
 | `active` | `Boolean` | no | `false` | Select which tab should be active |
 
+</table-container>
+
 ### `<code-sandbox>`
 
 Embed CodeSandbox easily in your documentation with great performances, using the [IntersectionObserver](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API) to load when visible in the viewport.
@@ -211,10 +219,14 @@ link: https://codesandbox.io/embed/nuxt-content-l164h?hidenavigation=1&theme=dar
   </code-block>
 </code-group>
 
+<table-container>
+
 | Prop | Type | Required | Value |
 |---------|------|-------------| ---|
 | `src` | `String` | `true` | Url to CodeSandbox embed |
 
+</table-container>
+
 ### `<tweet>`
 
 Embed Tweets easily in your documentation with great performances, tweets embed statically without using any runtime JS to render.
@@ -238,6 +250,10 @@ Embed Tweets easily in your documentation with great performances, tweets embed
   </code-block>
 </code-group>
 
+<table-container>
+
 | Prop | Type | Required | Value |
 |---------|------|-------------| ---|
-| `id` | `String` | `true` | Tweet id |
+| `id` | `String` | `true` | Tweet id |
+
+</table-container>