docs: fix overflow in table page

Fixes #244

docs/components/content/ComponentCard.vue

@@ -35,7 +35,7 @@
       </div>
     </div>
 
-    <div class="flex border border-b-0 border-gray-200 dark:border-gray-700 relative not-prose" :class="[{ 'p-4': padding }, propsToSelect.length ? 'border-t-0' : 'rounded-t-md', backgroundClass]">
+    <div class="flex border border-b-0 border-gray-200 dark:border-gray-700 relative not-prose" :class="[{ 'p-4': padding }, propsToSelect.length ? 'border-t-0' : 'rounded-t-md', backgroundClass, overflowClass]">
       <component :is="name" v-model="vModel" v-bind="fullProps">
         <ContentSlot v-if="$slots.default" :use="$slots.default" />
       </component>
@@ -86,6 +86,10 @@ const props = defineProps({
   backgroundClass: {
     type: String,
     default: 'bg-white dark:bg-gray-900'
+  },
+  overflowClass: {
+    type: String,
+    default: ''
   }
 })
 

docs/components/content/ComponentExample.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="[&>div>pre]:!rounded-t-none">
-    <div class="flex border border-gray-200 dark:border-gray-700 relative not-prose rounded-t-md overflow-x-auto" :class="[{ 'p-4': padding, 'rounded-b-md': !$slots.code, 'border-b-0': !!$slots.code }, backgroundClass]">
+    <div class="flex border border-gray-200 dark:border-gray-700 relative not-prose rounded-t-md" :class="[{ 'p-4': padding, 'rounded-b-md': !$slots.code, 'border-b-0': !!$slots.code }, backgroundClass, overflowClass]">
       <ContentSlot v-if="$slots.default" :use="$slots.default" />
     </div>
 
@@ -17,6 +17,10 @@ defineProps({
   backgroundClass: {
     type: String,
     default: 'bg-white dark:bg-gray-900'
+  },
+  overflowClass: {
+    type: String,
+    default: ''
   }
 })
 </script>

docs/content/4.data/1.table.md

@@ -7,13 +7,14 @@ description: 'Display data in a table.'
 
 Use the `rows` prop to set the data to display in the table. By default, the table will display all the fields of the rows.
 
-::component-example
+::component-example{class="grid"}
 ---
 padding: false
+overflowClass: 'overflow-x-auto'
 ---
 
 #default
-:table-example-basic{class="w-full"}
+:table-example-basic{class="flex-1"}
 
 #code
 ```vue
@@ -72,13 +73,14 @@ Use the `columns` prop to configure which columns to display. It's an array of o
 - `sortable` - Whether the column is sortable. Defaults to `false`.
 - `direction` - The sort direction to use on first click. Defaults to `asc`.
 
-::component-example
+::component-example{class="grid"}
 ---
 padding: false
+overflowClass: 'overflow-x-auto'
 ---
 
 #default
-:table-example-columns{class="w-full"}
+:table-example-columns{class="flex-1"}
 
 #code
 ```vue
@@ -110,13 +112,14 @@ const people = [...]
 
 You can easily use the [SelectMenu](/forms/select-menu) component to change the columns to display.
 
-::component-example
+::component-example{class="grid"}
 ---
 padding: false
+overflowClass: 'overflow-x-auto'
 ---
 
 #default
-:table-example-columns-selectable{class="w-full"}
+:table-example-columns-selectable{class="flex-1"}
 
 #code
 ```vue
@@ -157,13 +160,14 @@ const people = [...]
 
 You can make the columns sortable by setting the `sortable` property to `true` in the column configuration.
 
-::component-example
+::component-example{class="grid"}
 ---
 padding: false
+overflowClass: 'overflow-x-auto'
 ---
 
 #default
-:table-example-columns-sortable{class="w-full"}
+:table-example-columns-sortable{class="flex-1"}
 
 #code
 ```vue
@@ -211,9 +215,10 @@ This will set the default sort and will work even if no column is set as `sortab
 
 Use the `sort-button` prop to customize the sort button in the header. You can pass all the props of the [Button](/elements/button) component to customize it through this prop or globally through `ui.table.default.sortButton`. Its icon defaults to `i-heroicons-arrows-up-down-20-solid`.
 
-::component-card
+::component-card{class="grid"}
 ---
 padding: false
+overflowClass: 'overflow-x-auto'
 baseProps:
   class: 'w-full'
   columns:
@@ -290,13 +295,14 @@ You can also customize the entire header cell, read more in the [Slots](#slots)
 
 Use a `v-model` to make the table selectable. The `v-model` will be an array of the selected rows.
 
-::component-example
+::component-example{class="grid"}
 ---
 padding: false
+overflowClass: 'overflow-x-auto'
 ---
 
 #default
-:table-example-selectable{class="w-full"}
+:table-example-selectable{class="flex-1"}
 
 #code
 ```vue
@@ -320,13 +326,14 @@ You can use the `by` prop to compare objects by a field instead of comparing obj
 
 You can easily use the [Input](/forms/input) component to filter the rows.
 
-::component-example
+::component-example{class="grid"}
 ---
 padding: false
+overflowClass: 'overflow-x-auto'
 ---
 
 #default
-:table-example-searchable{class="w-full"}
+:table-example-searchable{class="flex-1"}
 
 #code
 ```vue
@@ -385,13 +392,14 @@ Use the `#<column>-data` slot to customize the data cell of a column. You will h
 
 You can for example create an extra column for actions with a [Dropdown](/elements/dropdown) component inside or change the color of the rows based on a selection.
 
-::component-example
+::component-example{class="grid"}
 ---
 padding: false
+overflowClass: 'overflow-x-auto'
 ---
 
 #default
-:table-example-slots{class="w-full"}
+:table-example-slots{class="flex-1"}
 
 #code
 ```vue

docs/tailwind.config.ts

@@ -50,7 +50,7 @@ export default <Partial<Config>> {
                 borderRadius: '0.375rem',
                 border: '1px solid var(--tw-prose-pre-border)',
                 whiteSpace: 'pre-wrap',
-                wordBreak: 'break-words'
+                wordBreak: 'break-word'
               },
               code: {
                 backgroundColor: 'var(--tw-prose-pre-bg)',