From 1b958d0a5df9f4c923f1dd2e941ef10b1e1cac37 Mon Sep 17 00:00:00 2001
From: Will Miao <13051207myq@gmail.com>
Date: Mon, 6 Oct 2025 16:28:56 +0800
Subject: [PATCH] feat(modal): use CSS variables for header height and improve
 recipe modal layout

---
 static/css/base.css                    |  1 +
 static/css/components/modal/_base.css  |  6 +++---
 static/css/components/recipe-modal.css | 17 ++++++++++++++++-
 3 files changed, 20 insertions(+), 4 deletions(-)

diff --git a/static/css/base.css b/static/css/base.css
index cbf89c9b..fc479161 100644
--- a/static/css/base.css
+++ b/static/css/base.css
@@ -32,6 +32,7 @@ html, body {
     --text-muted: #6c757d;
     --card-bg: #ffffff;
     --border-color: #e0e0e0;
+    --header-height: 48px;
 
     /* Color Components */
     --lora-accent-l: 68%;
diff --git a/static/css/components/modal/_base.css b/static/css/components/modal/_base.css
index 57d01ac9..e98e7009 100644
--- a/static/css/components/modal/_base.css
+++ b/static/css/components/modal/_base.css
@@ -2,10 +2,10 @@
 .modal {
     display: none;
     position: fixed;
-    top: 48px; /* Start below the header */
+    top: var(--header-height, 48px); /* Start below the header */
     left: 0;
     width: 100%;
-    height: calc(100% - 48px); /* Adjust height to exclude header */
+    height: calc(100% - var(--header-height, 48px)); /* Adjust height to exclude header */
     background: rgba(0, 0, 0, 0.2); /* 调整为更淡的半透明黑色 */
     z-index: var(--z-modal);
     overflow: auto; /* Change from hidden to auto to allow scrolling */
@@ -23,7 +23,7 @@ body.modal-open {
     position: relative;
     max-width: 800px;
     height: auto;
-    max-height: calc(90vh);
+    max-height: calc(100vh - var(--header-height, 48px) - 5.5rem); /* Subtract header height and modal margins */
     margin: 1rem auto; /* Keep reduced top margin */
     background: var(--lora-surface);
     border-radius: var(--border-radius-base);
diff --git a/static/css/components/recipe-modal.css b/static/css/components/recipe-modal.css
index 6fd1ed7e..d5e2e3fb 100644
--- a/static/css/components/recipe-modal.css
+++ b/static/css/components/recipe-modal.css
@@ -211,6 +211,20 @@
     border: 1px solid var(--lora-border);
 }
 
+#recipeModal .modal-content {
+    display: flex;
+    flex-direction: column;
+}
+
+#recipeModal .modal-body {
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-2);
+    flex: 1 1 auto;
+    min-height: 0;
+    overflow: hidden;
+}
+
 /* Top Section: Preview and Gen Params */
 .recipe-top-section {
     display: grid;
@@ -474,9 +488,10 @@
 
 /* Bottom Section: Resources */
 .recipe-bottom-section {
-    max-height: 320px;
     display: flex;
     flex-direction: column;
+    flex: 1 1 auto;
+    min-height: 0;
     border-top: 1px solid var(--border-color);
     padding-top: var(--space-2);
 }