feat(admin-web): improve responsive admin layout

apps/admin-web/src/views/TemplateWizardView.vue

@@ -2931,20 +2931,31 @@ function onStructureDragEnd(): void {
       </main>
 
       <footer class="wizard-page__footer">
-        <div>
-          <a-button v-if="currentStep === 0" disabled>{{ t('common.previous') }}</a-button>
-          <a-button v-else @click="handlePrev">{{ t('common.previous') }}</a-button>
+        <div class="footer-previous">
+          <a-button v-if="currentStep === 0" class="footer-btn" disabled>
+            {{ t('common.previous') }}
+          </a-button>
+          <a-button v-else class="footer-btn" @click="handlePrev">
+            {{ t('common.previous') }}
+          </a-button>
         </div>
         <div class="footer-actions">
-          <a-button :loading="savingDraft" @click="handleSaveDraftAndExit">
+          <a-button class="footer-btn" :loading="savingDraft" @click="handleSaveDraftAndExit">
             {{ t('common.cancel') }}
           </a-button>
-          <a-button v-if="currentStep < 2" type="primary" :loading="assistBusy" @click="handleNext">
+          <a-button
+            v-if="currentStep < 2"
+            type="primary"
+            class="footer-btn footer-btn--primary"
+            :loading="assistBusy"
+            @click="handleNext"
+          >
             {{ t('common.next') }}
           </a-button>
           <a-button
             v-else
             type="primary"
+            class="footer-btn footer-btn--primary"
             :loading="mutation.isPending.value"
             @click="handleGenerate"
           >
@@ -2967,8 +2978,8 @@ function onStructureDragEnd(): void {
       :closable="false"
       :mask-closable="false"
       :keyboard="false"
-      centered
       width="460px"
+      wrap-class-name="leave-confirm-modal-wrap"
     >
       <p class="leave-confirm-text">{{ t('templates.wizard.leaveConfirm.content') }}</p>
       <template #footer>
@@ -3000,6 +3011,32 @@ function onStructureDragEnd(): void {
   line-height: 1.7;
 }
 
+:deep(.leave-confirm-modal-wrap) {
+  display: flex;
+  align-items: flex-start;
+  justify-content: center;
+  padding: 32px 16px 16px;
+  overflow: auto;
+}
+
+:deep(.leave-confirm-modal-wrap .ant-modal) {
+  top: 0;
+  width: min(460px, calc(100vw - 32px)) !important;
+  margin: 0;
+  padding-bottom: 0;
+}
+
+:deep(.leave-confirm-modal-wrap .ant-modal-footer) {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: flex-end;
+  gap: 12px;
+}
+
+:deep(.leave-confirm-modal-wrap .ant-modal-footer .ant-btn) {
+  margin-inline-start: 0 !important;
+}
+
 .wizard-page__loading {
   padding: 40px;
 }
@@ -3736,9 +3773,27 @@ function onStructureDragEnd(): void {
   background: rgba(255, 255, 255, 0.88);
 }
 
+.footer-previous {
+  flex: 0 0 auto;
+}
+
 .footer-actions {
   display: flex;
   gap: 12px;
+  flex: 0 0 auto;
+}
+
+.footer-btn.ant-btn {
+  min-width: 104px;
+  height: 40px;
+  border-radius: 8px;
+  padding: 0 20px;
+  font-size: 16px;
+  font-weight: 400;
+}
+
+.footer-btn--primary.ant-btn {
+  min-width: 144px;
 }
 
 @media (max-width: 1024px) {
@@ -3791,9 +3846,10 @@ function onStructureDragEnd(): void {
   }
 
   .wizard-page__footer {
-    flex-direction: column;
+    flex-direction: row;
     gap: 12px;
-    align-items: stretch;
+    align-items: center;
+    padding: 14px 16px;
   }
 
   .custom-outline-row {
@@ -3805,8 +3861,27 @@ function onStructureDragEnd(): void {
   }
 
   .footer-actions {
-    width: 100%;
     justify-content: flex-end;
   }
 }
+
+@media (max-width: 560px) {
+  .wizard-page__footer {
+    gap: 8px;
+  }
+
+  .footer-actions {
+    gap: 8px;
+  }
+
+  .footer-btn.ant-btn {
+    min-width: auto;
+    padding: 0 14px;
+    font-size: 14px;
+  }
+
+  .footer-btn--primary.ant-btn {
+    min-width: auto;
+  }
+}
 </style>