From e8d2df34964f09fc4e3d4fe7fa1ea55dbb9b2b75 Mon Sep 17 00:00:00 2001
From: Neko Ayaka <neko@ayaka.moe>
Date: Thu, 6 Mar 2025 18:41:50 +0800
Subject: [PATCH] style(ui-transitions): better mobile

Signed-off-by: Neko Ayaka <neko@ayaka.moe>
---
 .../ui-transitions/playground/src/App.vue     |  2 +-
 .../playground/src/components/Buttons.vue     | 19 +++++++++++--------
 2 files changed, 12 insertions(+), 9 deletions(-)

diff --git a/packages/ui-transitions/playground/src/App.vue b/packages/ui-transitions/playground/src/App.vue
index ea5eff94c..f820f4909 100644
--- a/packages/ui-transitions/playground/src/App.vue
+++ b/packages/ui-transitions/playground/src/App.vue
@@ -7,7 +7,7 @@ const isDark = useDark()
 </script>
 
 <template>
-  <div class="app-container" h-full>
+  <div class="app-container" h-full p-4>
     <!-- https://paletton.com/#uid=54h1e0kl1++bM++qIEfl0f+Er8y -->
     <StageTransitionGroup
       :primary-color="!isDark ? '#FFA1B3' : '#FF5778'"
diff --git a/packages/ui-transitions/playground/src/components/Buttons.vue b/packages/ui-transitions/playground/src/components/Buttons.vue
index 0403dbc41..a5eec36e5 100644
--- a/packages/ui-transitions/playground/src/components/Buttons.vue
+++ b/packages/ui-transitions/playground/src/components/Buttons.vue
@@ -14,13 +14,16 @@ const routes = [
 </script>
 
 <template>
-  <div flex="~ row gap-2" h-full items-center justify-center>
-    <RouterLink
-      v-for="route in routes" :key="route.number" :to="route.path" rounded-lg px-7 py-3
-      transition="all duration-250 ease-in-out"
-      class="bg-neutral-100 [&.router-link-active]:bg-neutral-300 dark:bg-neutral-700 hover:bg-neutral-200 [&.router-link-active]:dark:bg-neutral-600 [&.router-link-active]:hover:bg-neutral-400 hover:dark:bg-neutral-600 [&.router-link-active]:hover:dark:bg-neutral-500"
-    >
-      {{ route.number }}
-    </RouterLink>
+  <div h-full w-full flex items-center justify-center>
+    <div class="grid grid-cols-3 gap-2 sm:(flex flex-row gap-2)" w="full sm:fit">
+      <RouterLink
+        v-for="route in routes" :key="route.number" :to="route.path"
+        transition="all duration-250 ease-in-out" w="auto" aspect-ratio="square sm:unset"
+        bg="neutral-100 [&.router-link-active]:neutral-300 dark:neutral-700 hover:neutral-200 [&.router-link-active]:dark:neutral-600 [&.router-link-active]:hover:neutral-400 hover:dark:neutral-600 [&.router-link-active]:hover:dark:neutral-500"
+        flex items-center justify-center rounded-lg px-7 py-3
+      >
+        <span>{{ route.number }}</span>
+      </RouterLink>
+    </div>
   </div>
 </template>