From 2f1bf93b2b663b600cec15b40cb05af99213d1bd Mon Sep 17 00:00:00 2001
From: Ryan Wang <i@ryanc.cc>
Date: Mon, 9 Jun 2025 23:42:33 +0800
Subject: [PATCH] refactor: improve dialog styles in mobile devices (#7512)

#### What type of PR is this?

/kind improvement
/area ui
/milestone 2.21.x

#### What this PR does / why we need it:

before:

<img width="476" alt="image" src="https://github.com/user-attachments/assets/2bed7f23-1d5f-4ea3-9692-512e7eea966a" />

after:

<img width="448" alt="image" src="https://github.com/user-attachments/assets/85bcaba3-792e-45da-ad02-fc267c363e85" />

#### Does this PR introduce a user-facing change?

```release-note
None
```
---
 ui/packages/components/src/components/dialog/Dialog.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/ui/packages/components/src/components/dialog/Dialog.vue b/ui/packages/components/src/components/dialog/Dialog.vue
index 26abc2300..14f399184 100644
--- a/ui/packages/components/src/components/dialog/Dialog.vue
+++ b/ui/packages/components/src/components/dialog/Dialog.vue
@@ -109,7 +109,7 @@ const handleClose = () => {
       </div>
     </div>
     <template #footer>
-      <div class="flex flex-col sm:flex-row gap-[10px]">
+      <div class="flex flex-row flex-wrap gap-3">
         <VButton :loading="loading" :type="confirmType" @click="handleConfirm">
           {{ confirmText }}
         </VButton>