fix(recipe modal): compact layout on short viewports (#891)

This reverts commit 51fe7aa07e.

static/css/components/modal/_base.css

@@ -5,8 +5,7 @@
     top: var(--header-height, 48px); /* Start below the header */
     left: 0;
     width: 100%;
-    height: calc(100vh - var(--header-height, 48px)); /* Fallback for browsers without dvh */
+    height: calc(100% - var(--header-height, 48px)); /* Adjust height to exclude header */
-    height: calc(100dvh - 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 */
@@ -24,8 +23,7 @@ body.modal-open {
     position: relative;
     max-width: 800px;
     height: auto;
-    max-height: calc(100vh - var(--header-height, 48px) - 5.5rem); /* Fallback for browsers without dvh */
+    max-height: calc(100vh - var(--header-height, 48px) - 5.5rem); /* Subtract header height and modal margins */
-    max-height: calc(100dvh - 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);

static/css/components/recipe-modal.css

@@ -214,15 +214,11 @@
 #recipeModal .modal-content {
     display: flex;
     flex-direction: column;
-    max-width: 960px;
-    width: min(960px, calc(100vw - 2rem));
-    max-height: calc(100vh - var(--header-height, 48px) - 2rem);
-    max-height: calc(100dvh - var(--header-height, 48px) - 2rem);
 }
 
 #recipeModal .modal-body {
-    display: grid;
+    display: flex;
-    grid-template-rows: auto minmax(0, 1fr);
+    flex-direction: column;
     gap: var(--space-2);
     flex: 1 1 auto;
     min-height: 0;
@@ -236,14 +232,12 @@
     gap: var(--space-2);
     flex-shrink: 0;
     margin-bottom: var(--space-2);
-    align-items: start;
 }
 
 /* Recipe Preview */
 .recipe-preview-container {
     width: 100%;
-    height: clamp(220px, 32vh, 360px);
+    height: 360px;
-    height: clamp(220px, 32dvh, 360px);
     border-radius: var(--border-radius-sm);
     overflow: hidden;
     background: var(--lora-surface);
@@ -397,8 +391,7 @@
 
 /* Generation Parameters */
 .recipe-gen-params {
-    height: clamp(220px, 32vh, 360px);
+    height: 360px;
-    height: clamp(220px, 32dvh, 360px);
     display: flex;
     flex-direction: column;
 }
@@ -672,7 +665,6 @@
     gap: 10px;
     flex: 1;
     min-height: 0;
-    overflow: hidden;
 }
 
 .recipe-checkpoint-container {
@@ -1044,36 +1036,62 @@
     }
 }
 
-@media (max-height: 960px) {
+@media (max-height: 860px) {
     #recipeModal .modal-content {
-        max-height: calc(100vh - var(--header-height, 48px) - 1rem);
+        padding-top: var(--space-2);
-        max-height: calc(100dvh - var(--header-height, 48px) - 1rem);
+        padding-bottom: var(--space-2);
-        padding: var(--space-2);
     }
 
     .recipe-modal-header {
-        padding-bottom: 8px;
+        padding-bottom: 6px;
         margin-bottom: 8px;
     }
 
     .recipe-modal-header h2 {
-        max-height: 1.3em;
+        font-size: 1.25em;
-        -webkit-line-clamp: 1;
+        max-height: 2.5em;
+    }
+
+    .recipe-tags-container {
+        margin-bottom: 6px;
     }
 
     .recipe-top-section {
         grid-template-columns: 1fr;
         gap: var(--space-1);
+        margin-bottom: var(--space-1);
+    }
+
+    .recipe-preview-container {
+        display: none;
     }
 
-    .recipe-preview-container,
     .recipe-gen-params {
-        height: clamp(180px, 28vh, 300px);
+        height: auto;
-        height: clamp(180px, 28dvh, 300px);
+        max-height: 210px;
     }
 
     .recipe-gen-params h3 {
         margin-bottom: var(--space-1);
+        font-size: 1.05em;
+    }
+
+    .gen-params-container {
+        gap: var(--space-1);
+    }
+
+    .param-content {
+        max-height: 90px;
+        padding: 10px;
+    }
+
+    .param-textarea {
+        min-height: 100px;
+    }
+
+    .other-params {
+        margin-top: 0;
+        gap: 6px;
     }
 
     .recipe-bottom-section {
@@ -1085,19 +1103,6 @@
     }
 }
 
-@media (max-height: 780px) {
-    .recipe-preview-container,
-    .recipe-gen-params {
-        height: clamp(160px, 24vh, 260px);
-        height: clamp(160px, 24dvh, 260px);
-    }
-
-    .recipe-modal-header {
-        margin-bottom: 6px;
-        padding-bottom: 6px;
-    }
-}
-
 .badge-container {
     position: relative;
     display: flex;