From a5ac9cf81bb1490eddc46d6ffebf56b36f750445 Mon Sep 17 00:00:00 2001
From: Will Miao <willmiao.dev@gmail.com>
Date: Thu, 9 Apr 2026 22:28:29 +0800
Subject: [PATCH] Revert "fix(recipes): make recipe modal viewport-safe (#891)"

This reverts commit 51fe7aa07e9d55f63ebc29398c227898fce886f3.
---
 static/css/components/modal/_base.css  |  6 +--
 static/css/components/recipe-modal.css | 70 ++------------------------
 2 files changed, 6 insertions(+), 70 deletions(-)

diff --git a/static/css/components/modal/_base.css b/static/css/components/modal/_base.css
index 03d3ad8b..18efbca0 100644
--- a/static/css/components/modal/_base.css
+++ b/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(100dvh - var(--header-height, 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 */
@@ -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(100dvh - var(--header-height, 48px) - 5.5rem); /* Subtract header height and modal margins */
+    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 55d1b974..32dcfd4c 100644
--- a/static/css/components/recipe-modal.css
+++ b/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;
-    grid-template-rows: auto minmax(0, 1fr);
+    display: flex;
+    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: clamp(220px, 32dvh, 360px);
+    height: 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: clamp(220px, 32dvh, 360px);
+    height: 360px;
     display: flex;
     flex-direction: column;
 }
@@ -672,7 +665,6 @@
     gap: 10px;
     flex: 1;
     min-height: 0;
-    overflow: hidden;
 }
 
 .recipe-checkpoint-container {
@@ -1044,60 +1036,6 @@
     }
 }
 
-@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;