From b2962623160ffb68b5e54142ea1c0378cf3f7e69 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?S=C3=A9bastien=20Chopin?= <seb@nuxtjs.com>
Date: Wed, 24 Feb 2021 12:45:34 +0100
Subject: [PATCH] chore: fix tables on mobile

Resolves #78
---
 docs/components/TableContainer.vue      |  3 +++
 docs/content/2.usage/1.configuration.md |  4 ++++
 docs/content/2.usage/2.content.md       |  4 ++++
 docs/content/2.usage/3.components.md    | 18 +++++++++++++++++-
 4 files changed, 28 insertions(+), 1 deletion(-)
 create mode 100644 docs/components/TableContainer.vue

diff --git a/docs/components/TableContainer.vue b/docs/components/TableContainer.vue
new file mode 100644
index 000000000..addbc6bcd
--- /dev/null
+++ b/docs/components/TableContainer.vue
@@ -0,0 +1,3 @@
+<template>
+  <div class="max-w-full overflow-x-auto"><slot /></div>
+</template>
diff --git a/docs/content/2.usage/1.configuration.md b/docs/content/2.usage/1.configuration.md
index f9b70a293..1f4dc6f7d 100644
--- a/docs/content/2.usage/1.configuration.md
+++ b/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`:
diff --git a/docs/content/2.usage/2.content.md b/docs/content/2.usage/2.content.md
index 9f73d2c49..aa37ec4bb 100644
--- a/docs/content/2.usage/2.content.md
+++ b/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]
diff --git a/docs/content/2.usage/3.components.md b/docs/content/2.usage/3.components.md
index 7e6cb35e4..d5db296c5 100644
--- a/docs/content/2.usage/3.components.md
+++ b/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 |
\ No newline at end of file
+| `id` | `String` | `true` | Tweet id |
+
+</table-container>