docs: fix overflow in table page

Fixes #244

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