From 75410fba97e55e7335bdf8074ab2b0397014aab1 Mon Sep 17 00:00:00 2001
From: Sandro Circi <sandro.circi@digitoolmedia.com>
Date: Mon, 28 Oct 2024 16:55:11 +0100
Subject: [PATCH] docs(table): fix examples width (#2478)

---
 .../content/examples/table/TableColumnFiltersExample.vue    | 2 +-
 .../content/examples/table/TableColumnVisibilityExample.vue | 2 +-
 docs/app/components/content/examples/table/TableExample.vue | 6 +++---
 .../content/examples/table/TableGlobalFilterExample.vue     | 2 +-
 .../content/examples/table/TableRowSelectionExample.vue     | 2 +-
 5 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/docs/app/components/content/examples/table/TableColumnFiltersExample.vue b/docs/app/components/content/examples/table/TableColumnFiltersExample.vue
index d21470c8..0176b414 100644
--- a/docs/app/components/content/examples/table/TableColumnFiltersExample.vue
+++ b/docs/app/components/content/examples/table/TableColumnFiltersExample.vue
@@ -99,7 +99,7 @@ const columnFilters = ref([{
 </script>
 
 <template>
-  <div class="flex flex-col flex-1">
+  <div class="flex flex-col flex-1 w-full">
     <div class="flex px-4 py-3.5 border-b border-[var(--ui-border-accented)]">
       <UInput
         :model-value="(table?.tableApi?.getColumn('email')?.getFilterValue() as string)"
diff --git a/docs/app/components/content/examples/table/TableColumnVisibilityExample.vue b/docs/app/components/content/examples/table/TableColumnVisibilityExample.vue
index 0695e249..5530e89b 100644
--- a/docs/app/components/content/examples/table/TableColumnVisibilityExample.vue
+++ b/docs/app/components/content/examples/table/TableColumnVisibilityExample.vue
@@ -99,7 +99,7 @@ const columnVisibility = ref({
 </script>
 
 <template>
-  <div class="flex flex-col flex-1">
+  <div class="flex flex-col flex-1 w-full">
     <div class="flex justify-end px-4 py-3.5 border-b  border-[var(--ui-border-accented)]">
       <UDropdownMenu
         :items="table?.tableApi?.getAllColumns().filter(column => column.getCanHide()).map(column => ({
diff --git a/docs/app/components/content/examples/table/TableExample.vue b/docs/app/components/content/examples/table/TableExample.vue
index 5d1abd0c..560bdc31 100644
--- a/docs/app/components/content/examples/table/TableExample.vue
+++ b/docs/app/components/content/examples/table/TableExample.vue
@@ -264,11 +264,11 @@ function randomize() {
 </script>
 
 <template>
-  <div class="flex-1 divide-y divide-[var(--ui-border-accented)]">
-    <div class="flex items-center gap-2 px-4 py-3.5">
+  <div class="flex-1 divide-y divide-[var(--ui-border-accented)] w-full">
+    <div class="flex items-center gap-2 px-4 py-3.5 overflow-x-auto">
       <UInput
         :model-value="(table?.tableApi?.getColumn('email')?.getFilterValue() as string)"
-        class="max-w-sm"
+        class="max-w-sm min-w-[12ch]"
         placeholder="Filter emails..."
         @update:model-value="table?.tableApi?.getColumn('email')?.setFilterValue($event)"
       />
diff --git a/docs/app/components/content/examples/table/TableGlobalFilterExample.vue b/docs/app/components/content/examples/table/TableGlobalFilterExample.vue
index abfc1ea1..ac784651 100644
--- a/docs/app/components/content/examples/table/TableGlobalFilterExample.vue
+++ b/docs/app/components/content/examples/table/TableGlobalFilterExample.vue
@@ -96,7 +96,7 @@ const globalFilter = ref('45')
 </script>
 
 <template>
-  <div class="flex flex-col flex-1">
+  <div class="flex flex-col flex-1 w-full">
     <div class="flex px-4 py-3.5 border-b border-[var(--ui-border-accented)]">
       <UInput
         v-model="globalFilter"
diff --git a/docs/app/components/content/examples/table/TableRowSelectionExample.vue b/docs/app/components/content/examples/table/TableRowSelectionExample.vue
index f02058af..69980edd 100644
--- a/docs/app/components/content/examples/table/TableRowSelectionExample.vue
+++ b/docs/app/components/content/examples/table/TableRowSelectionExample.vue
@@ -106,7 +106,7 @@ const rowSelection = ref({ 1: true })
 </script>
 
 <template>
-  <div class="flex-1">
+  <div class="flex-1 w-full">
     <UTable
       ref="table"
       v-model:row-selection="rowSelection"