From dce2b4f0b7fdeef20f7d43c9a3dec230ac599085 Mon Sep 17 00:00:00 2001
From: OoO <ooo@MacBook-Pro.local>
Date: Tue, 12 May 2026 21:25:28 +0800
Subject: [PATCH] Polish vendor stockout import mobile layout

---
 templates/vendor_stockout_import_v2.html |   8 +-
 web/static/css/page-vendor-import.css    | 115 ++++++++++++++++++++++-
 2 files changed, 117 insertions(+), 6 deletions(-)

diff --git a/templates/vendor_stockout_import_v2.html b/templates/vendor_stockout_import_v2.html
index 9bb78d3..39ce1c1 100644
--- a/templates/vendor_stockout_import_v2.html
+++ b/templates/vendor_stockout_import_v2.html
@@ -20,7 +20,7 @@
       <p class="stockout-import-subtitle">
         上傳正式缺貨 Excel 後，系統會使用既有匯入 API 寫入 vendor_stockout，完成後直接回傳批次編號與成功、重複、失敗筆數。
       </p>
-      <div class="stockout-import-actions" style="margin-top: 14px;">
+      <div class="stockout-import-actions is-header">
         <a class="stockout-action" href="{{ url_for('vendor.index') }}">
           <i class="fas fa-arrow-left"></i>回總覽
         </a>
@@ -46,7 +46,7 @@
         <span class="stockout-dropzone-subtitle d-block">
           支援 .xlsx / .xls。檔案送出後會寫入正式缺貨資料表，請確認內容是可匯入的正式清單。
         </span>
-        <span class="stockout-action is-primary" style="margin-top: 14px;">
+        <span class="stockout-action is-primary stockout-file-picker">
           <i class="fas fa-folder-open"></i>選擇檔案
         </span>
       </span>
@@ -84,7 +84,7 @@
   </section>
 
   <section class="stockout-progress-panel" id="stockoutProgressPanel">
-    <div class="stockout-card-label momo-mono" style="margin-bottom: 8px;">匯入中</div>
+    <div class="stockout-card-label momo-mono stockout-progress-label">匯入中</div>
     <div class="stockout-progress-track">
       <div class="stockout-progress-bar"></div>
     </div>
@@ -111,7 +111,7 @@
       </div>
     </div>
     <div class="stockout-batch-id momo-mono">批次編號 <span id="stockoutBatchId"></span></div>
-    <div class="stockout-import-actions" style="margin-top: 14px;">
+    <div class="stockout-import-actions is-result">
       <a class="stockout-action is-primary" href="{{ url_for('vendor.list_page') }}">
         <i class="fas fa-table-list"></i>查看缺貨清單
       </a>
diff --git a/web/static/css/page-vendor-import.css b/web/static/css/page-vendor-import.css
index b8b9cb9..dffbc89 100644
--- a/web/static/css/page-vendor-import.css
+++ b/web/static/css/page-vendor-import.css
@@ -56,6 +56,11 @@
   flex-wrap: wrap;
 }
 
+.stockout-import-actions.is-header,
+.stockout-import-actions.is-result {
+  margin-top: 14px;
+}
+
 .stockout-action {
   display: inline-flex;
   align-items: center;
@@ -85,6 +90,10 @@
   border-color: var(--momo-ink);
 }
 
+.stockout-file-picker {
+  margin-top: 14px;
+}
+
 .stockout-import-note {
   display: grid;
   align-content: center;
@@ -240,6 +249,10 @@
   border-radius: var(--momo-radius-pill);
 }
 
+.stockout-progress-label {
+  margin-bottom: 8px;
+}
+
 .stockout-progress-bar {
   width: 100%;
   height: 100%;
@@ -301,7 +314,105 @@
 }
 
 @media (max-width: 720px) {
+  .stockout-import-stack {
+    gap: 14px;
+  }
+
+  .stockout-import-header {
+    gap: 14px;
+    padding: 16px;
+  }
+
+  .stockout-import-actions {
+    display: grid;
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+
+  .stockout-action {
+    min-height: 36px;
+    padding: 8px 10px;
+  }
+
+  .stockout-import-note {
+    gap: 6px;
+    padding: 12px;
+  }
+
+  .stockout-import-note-value {
+    font-size: 15px;
+    line-height: 1.45;
+  }
+
+  .stockout-dropzone {
+    min-height: 240px;
+    padding: 18px;
+  }
+
+  .stockout-upload-icon {
+    width: 48px;
+    height: 48px;
+    font-size: 20px;
+  }
+
+  .stockout-dropzone-title {
+    margin: 14px 0 6px;
+    font-size: 18px;
+  }
+
+  .stockout-dropzone-subtitle {
+    font-size: 12px;
+    line-height: 1.6;
+  }
+
+  .stockout-file-picker {
+    margin-top: 12px;
+  }
+
+  .stockout-import-side {
+    gap: 8px;
+    padding: 12px;
+  }
+
+  .stockout-import-card,
+  .stockout-file-panel,
+  .stockout-progress-panel,
+  .stockout-result-panel,
+  .stockout-error-panel {
+    padding: 12px;
+  }
+
+  .stockout-file-row {
+    flex-direction: column;
+    align-items: stretch;
+  }
+
+  .stockout-result-grid {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+    gap: 8px;
+  }
+
+  .stockout-result-cell {
+    padding: 12px;
+  }
+
+  .stockout-result-value {
+    font-size: 22px;
+  }
+
   .stockout-import-title { font-size: 26px; }
-  .stockout-file-row { flex-direction: column; align-items: flex-start; }
-  .stockout-result-grid { grid-template-columns: 1fr 1fr; }
+}
+
+@media (max-width: 420px) {
+  .stockout-import-title {
+    font-size: 24px;
+  }
+
+  .stockout-import-subtitle {
+    font-size: 12px;
+  }
+
+  .stockout-dropzone {
+    min-height: 220px;
+    padding: 16px;
+  }
 }