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

@@ -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>