From 7a02bfeba682bf0adfa37bfdfe2b1fad27d1934c Mon Sep 17 00:00:00 2001
From: Malik-Jouda <48517781+Malik-Jouda@users.noreply.github.com>
Date: Tue, 19 Nov 2024 20:26:09 +0200
Subject: [PATCH] playground: improve responsive (#2675)

---
 playground-vue/src/app.vue                | 6 +++---
 playground/app/app.vue                    | 6 +++---
 playground/app/pages/components/table.vue | 2 +-
 3 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/playground-vue/src/app.vue b/playground-vue/src/app.vue
index f05f3bea..402a807e 100644
--- a/playground-vue/src/app.vue
+++ b/playground-vue/src/app.vue
@@ -84,9 +84,9 @@ defineShortcuts({
   <UApp :toaster="(appConfig.toaster as any)">
     <div class="h-screen w-screen overflow-hidden flex min-h-0 bg-[var(--ui-bg)]" vaul-drawer-wrapper>
       <UNavigationMenu :items="items" orientation="vertical" class="hidden lg:flex border-e border-[var(--ui-border)] overflow-y-auto w-48 p-4" />
-      <UNavigationMenu :items="items" orientation="horizontal" class="lg:hidden border-b border-[var(--ui-border)] overflow-x-auto" />
+      <UNavigationMenu :items="items" orientation="horizontal" class="lg:hidden border-b border-[var(--ui-border)] [&>div]:min-w-min overflow-x-auto" />
 
-      <div class="fixed top-4 right-4 flex items-center gap-2">
+      <div class="fixed top-15 lg:top-3 right-4 flex items-center gap-2">
         <UButton
           :icon="mode === 'dark' ? 'i-lucide-moon' : 'i-lucide-sun'"
           color="neutral"
@@ -96,7 +96,7 @@ defineShortcuts({
         />
       </div>
 
-      <div class="flex-1 flex flex-col items-center justify-around overflow-y-auto w-full py-12 px-4">
+      <div class="flex-1 flex flex-col items-center justify-around overflow-y-auto w-full py-14 px-4">
         <Suspense>
           <RouterView />
         </Suspense>
diff --git a/playground/app/app.vue b/playground/app/app.vue
index 174f65f7..8a3a4b7c 100644
--- a/playground/app/app.vue
+++ b/playground/app/app.vue
@@ -85,9 +85,9 @@ defineShortcuts({
     <UApp :toaster="appConfig.toaster">
       <div class="h-screen w-screen overflow-hidden flex flex-col lg:flex-row min-h-0 bg-[var(--ui-bg)]" vaul-drawer-wrapper>
         <UNavigationMenu :items="items" orientation="vertical" class="hidden lg:flex border-e border-[var(--ui-border)] overflow-y-auto w-48 p-4" />
-        <UNavigationMenu :items="items" orientation="horizontal" class="lg:hidden border-b border-[var(--ui-border)] overflow-x-auto" />
+        <UNavigationMenu :items="items" orientation="horizontal" class="lg:hidden border-b border-[var(--ui-border)] [&>div]:min-w-min overflow-x-auto" />
 
-        <div class="fixed top-4 right-4 flex items-center gap-2">
+        <div class="fixed top-15 lg:top-3 right-4 flex items-center gap-2">
           <ClientOnly v-if="!colorMode?.forced">
             <UButton
               :icon="isDark ? 'i-lucide-moon' : 'i-lucide-sun'"
@@ -103,7 +103,7 @@ defineShortcuts({
           </ClientOnly>
         </div>
 
-        <div class="flex-1 flex flex-col items-center justify-around overflow-y-auto w-full py-12 px-4">
+        <div class="flex-1 flex flex-col items-center justify-around overflow-y-auto w-full py-14 px-4">
           <NuxtPage />
         </div>
 
diff --git a/playground/app/pages/components/table.vue b/playground/app/pages/components/table.vue
index cc3b866d..9050bc13 100644
--- a/playground/app/pages/components/table.vue
+++ b/playground/app/pages/components/table.vue
@@ -276,7 +276,7 @@ onMounted(() => {
 </script>
 
 <template>
-  <div class="h-full flex flex-col flex-1 gap-4 w-full -my-8">
+  <div class="h-full flex flex-col flex-1 gap-4 w-full">
     <div class="flex gap-2 items-center">
       <UInput
         :model-value="(table?.tableApi?.getColumn('email')?.getFilterValue() as string)"