From c5088772e8bf2535d7bf5c2993a8487a892576a1 Mon Sep 17 00:00:00 2001
From: Will Miao <willmiao.dev@gmail.com>
Date: Sat, 8 Aug 2026 08:49:20 +0800
Subject: [PATCH] fix(ui): pin import modal action buttons with sticky footer

Make the import modal a flex column with a scrollable step area so the
Back/Import buttons stay visible on short viewports (1080p / 150% zoom)
instead of being cut off at the bottom of the scroll flow.

Also reset step scroll positions via class since 'locationStep' has a
duplicate id in the download modal template.
---
 static/css/components/import-modal.css        | 31 +++++++++++++++++++
 .../js/managers/import/ImportStepManager.js   | 10 +++---
 2 files changed, 36 insertions(+), 5 deletions(-)

diff --git a/static/css/components/import-modal.css b/static/css/components/import-modal.css
index 6cf38643..c228728d 100644
--- a/static/css/components/import-modal.css
+++ b/static/css/components/import-modal.css
@@ -1,4 +1,35 @@
 /* Import Modal Styles */
+
+/* Sticky footer layout: fixed header, scrollable step content, pinned action buttons.
+   Ensures Back/Import buttons stay visible on short viewports (e.g. 1080p or 150% zoom). */
+#importModal .modal-content {
+    display: flex;
+    flex-direction: column;
+    overflow: hidden; /* The active step scrolls instead of the whole modal */
+}
+
+#importModal .modal-header {
+    flex-shrink: 0;
+}
+
+#importModal .import-step {
+    flex: 1 1 auto;
+    min-height: 0; /* Allow the step to shrink and scroll within the flex container */
+    overflow-y: auto;
+    overflow-x: hidden;
+    scrollbar-gutter: stable;
+}
+
+#importModal .import-step .modal-actions {
+    position: sticky;
+    bottom: 0;
+    z-index: 1;
+    background: var(--lora-surface);
+    border-top: 1px solid var(--lora-border);
+    padding-top: var(--space-2);
+    padding-bottom: var(--space-1);
+}
+
 .import-step {
     margin: var(--space-2) 0;
     transition: none !important;
diff --git a/static/js/managers/import/ImportStepManager.js b/static/js/managers/import/ImportStepManager.js
index 80ecfbb9..8af2978b 100644
--- a/static/js/managers/import/ImportStepManager.js
+++ b/static/js/managers/import/ImportStepManager.js
@@ -47,11 +47,11 @@ export class ImportStepManager {
                 targetStep.offsetHeight;
             }
             
-            // Scroll modal content to top
-            const modalContent = document.querySelector('#importModal .modal-content');
-            if (modalContent) {
-                modalContent.scrollTop = 0;
-            }
+            // Reset scroll via class: 'locationStep' has a duplicate ID in downloadModal's
+            // template, so getElementById may not return the import modal's step.
+            document.querySelectorAll('.import-step').forEach(step => {
+                step.scrollTop = 0;
+            });
         }
     }
 }