From 92f5a2671ad3937df9f58b81ebe93642fa73bc4d Mon Sep 17 00:00:00 2001
From: Neko Ayaka <neko@ayaka.moe>
Date: Thu, 17 Jul 2025 03:46:23 +0800
Subject: [PATCH] style(stage-web,stage-tamagotchi): cols-1 for providers on
 mobile

---
 .../stage-tamagotchi/src/pages/settings/providers/index.vue | 6 +++---
 apps/stage-web/src/pages/settings/providers/index.vue       | 6 +++---
 2 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/apps/stage-tamagotchi/src/pages/settings/providers/index.vue b/apps/stage-tamagotchi/src/pages/settings/providers/index.vue
index 0895a4d8d..f2f2127ed 100644
--- a/apps/stage-tamagotchi/src/pages/settings/providers/index.vue
+++ b/apps/stage-tamagotchi/src/pages/settings/providers/index.vue
@@ -47,7 +47,7 @@ const {
         </div>
       </div>
     </div>
-    <div grid="~ cols-1 md:cols-2 gap-4">
+    <div grid="~ cols-1 sm:cols-2 xl:cols-3 gap-4">
       <IconStatusItem
         v-for="(provider, index) of allChatProvidersMetadata"
         :key="provider.id"
@@ -78,7 +78,7 @@ const {
         </div>
       </div>
     </div>
-    <div grid="~ cols-1 md:cols-2 gap-4">
+    <div grid="~ cols-1 sm:cols-2 xl:cols-3 gap-4">
       <IconStatusItem
         v-for="(provider, index) of allAudioSpeechProvidersMetadata"
         :key="provider.id"
@@ -109,7 +109,7 @@ const {
         </div>
       </div>
     </div>
-    <div grid="~ cols-1 md:cols-2 gap-4">
+    <div grid="~ cols-1 sm:cols-2 xl:cols-3 gap-4">
       <IconStatusItem
         v-for="(provider, index) of allAudioTranscriptionProvidersMetadata"
         :key="provider.id"
diff --git a/apps/stage-web/src/pages/settings/providers/index.vue b/apps/stage-web/src/pages/settings/providers/index.vue
index 10f06839c..a70ed8c7b 100644
--- a/apps/stage-web/src/pages/settings/providers/index.vue
+++ b/apps/stage-web/src/pages/settings/providers/index.vue
@@ -54,7 +54,7 @@ const {
         </div>
       </div>
     </div>
-    <div grid="~ cols-2 gap-4">
+    <div grid="~ cols-1 sm:cols-2 xl:cols-3 gap-4">
       <IconStatusItem
         v-for="(provider, index) of allChatProvidersMetadata" :key="provider.id" v-motion
         :initial="{ opacity: 0, y: 10 }" :enter="{ opacity: 1, y: 0 }" :duration="250 + index * 10" :delay="index * 50"
@@ -76,7 +76,7 @@ const {
         </div>
       </div>
     </div>
-    <div grid="~ cols-2 gap-4">
+    <div grid="~ cols-1 sm:cols-2 xl:cols-3 gap-4">
       <IconStatusItem
         v-for="(provider, index) of allAudioSpeechProvidersMetadata" :key="provider.id" v-motion
         :initial="{ opacity: 0, y: 10 }" :enter="{ opacity: 1, y: 0 }" :duration="250 + index * 10"
@@ -98,7 +98,7 @@ const {
         </div>
       </div>
     </div>
-    <div grid="~ cols-2 gap-4">
+    <div grid="~ cols-1 sm:cols-2 xl:cols-3 gap-4">
       <IconStatusItem
         v-for="(provider, index) of allAudioTranscriptionProvidersMetadata" :key="provider.id" v-motion
         :initial="{ opacity: 0, y: 10 }" :enter="{ opacity: 1, y: 0 }" :duration="250 + index * 10"