fix(recipes): make recipe modal viewport-safe (#891)

static/css/components/modal/_base.css

@@ -5,7 +5,8 @@
     top: var(--header-height, 48px); /* Start below the header */
     left: 0;
     width: 100%;
-    height: calc(100% - var(--header-height, 48px)); /* Adjust height to exclude header */
+    height: calc(100vh - var(--header-height, 48px)); /* Fallback for browsers without dvh */
+    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 */
@@ -23,7 +24,8 @@ body.modal-open {
     position: relative;
     max-width: 800px;
     height: auto;
-    max-height: calc(100vh - var(--header-height, 48px) - 5.5rem); /* Subtract header height and modal margins */
+    max-height: calc(100vh - var(--header-height, 48px) - 5.5rem); /* Fallback for browsers without dvh */
+    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,11 +214,15 @@
 #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: flex;
+    display: grid;
-    flex-direction: column;
+    grid-template-rows: auto minmax(0, 1fr);
     gap: var(--space-2);
     flex: 1 1 auto;
     min-height: 0;
@@ -232,12 +236,14 @@
     gap: var(--space-2);
     flex-shrink: 0;
     margin-bottom: var(--space-2);
+    align-items: start;
 }
 
 /* Recipe Preview */
 .recipe-preview-container {
     width: 100%;
-    height: 360px;
+    height: clamp(220px, 32vh, 360px);
+    height: clamp(220px, 32dvh, 360px);
     border-radius: var(--border-radius-sm);
     overflow: hidden;
     background: var(--lora-surface);
@@ -391,7 +397,8 @@
 
 /* Generation Parameters */
 .recipe-gen-params {
-    height: 360px;
+    height: clamp(220px, 32vh, 360px);
+    height: clamp(220px, 32dvh, 360px);
     display: flex;
     flex-direction: column;
 }
@@ -665,6 +672,7 @@
     gap: 10px;
     flex: 1;
     min-height: 0;
+    overflow: hidden;
 }
 
 .recipe-checkpoint-container {
@@ -1036,6 +1044,60 @@
     }
 }
 
+@media (max-height: 960px) {
+    #recipeModal .modal-content {
+        max-height: calc(100vh - var(--header-height, 48px) - 1rem);
+        max-height: calc(100dvh - var(--header-height, 48px) - 1rem);
+        padding: var(--space-2);
+    }
+
+    .recipe-modal-header {
+        padding-bottom: 8px;
+        margin-bottom: 8px;
+    }
+
+    .recipe-modal-header h2 {
+        max-height: 1.3em;
+        -webkit-line-clamp: 1;
+    }
+
+    .recipe-top-section {
+        grid-template-columns: 1fr;
+        gap: var(--space-1);
+    }
+
+    .recipe-preview-container,
+    .recipe-gen-params {
+        height: clamp(180px, 28vh, 300px);
+        height: clamp(180px, 28dvh, 300px);
+    }
+
+    .recipe-gen-params h3 {
+        margin-bottom: var(--space-1);
+    }
+
+    .recipe-bottom-section {
+        padding-top: var(--space-1);
+    }
+
+    .recipe-section-header {
+        margin-bottom: var(--space-1);
+    }
+}
+
+@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;