From dacd4887aadd3504f64aea3f1934ea6564a71ecf Mon Sep 17 00:00:00 2001
From: Hera Zhao <hera@euphon.net>
Date: Sat, 18 Apr 2026 13:27:49 +0000
Subject: [PATCH] =?UTF-8?q?fix:=20=E6=89=8B=E6=9C=BA=E7=BC=96=E8=BE=91?=
 =?UTF-8?q?=E9=85=8D=E6=96=B9=20overlay=20=E5=90=88=E9=80=82=E5=AE=BD?=
 =?UTF-8?q?=E5=BA=A6=20+=20=E5=B1=8F=E8=94=BD=20tab=20=E6=BB=91=E5=8A=A8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

移动端下 .overlay-panel 内边距从 24px 缩小到 16px，配合标题
字号、容器外边距和 ratio 提示换行调整，使编辑配方弹层在手机
上视觉更紧凑。

另外把 .overlay 加入 onSwipeEnd 的 modal 选择器，编辑弹层
打开时不再被左右滑动误触切换 tab。
---
 frontend/src/App.vue                 |  2 +-
 frontend/src/views/RecipeManager.vue | 17 +++++++++++++++++
 2 files changed, 18 insertions(+), 1 deletion(-)

diff --git a/frontend/src/App.vue b/frontend/src/App.vue
index b766d69..4c3cf58 100644
--- a/frontend/src/App.vue
+++ b/frontend/src/App.vue
@@ -196,7 +196,7 @@ function onSwipeEnd() {
   // Carousel area excluded
   if (swipeStartTarget.value?.closest?.('[data-no-tab-swipe]')) return
   // Skip when modal/overlay is open
-  if (document.querySelector('.modal-overlay, .detail-overlay, .dialog-overlay')) return
+  if (document.querySelector('.modal-overlay, .detail-overlay, .dialog-overlay, .overlay')) return
 
   const tabs = visibleTabs.value.map(t => t.key)
   const currentIdx = tabs.indexOf(ui.currentSection)
diff --git a/frontend/src/views/RecipeManager.vue b/frontend/src/views/RecipeManager.vue
index 042ce8b..c8c1bc5 100644
--- a/frontend/src/views/RecipeManager.vue
+++ b/frontend/src/views/RecipeManager.vue
@@ -2483,5 +2483,22 @@ watch(() => recipeStore.recipes, () => {
   .manage-toolbar {
     flex-direction: column;
   }
+  .overlay-panel {
+    padding: 16px;
+    border-radius: 12px;
+    max-height: calc(100vh - 32px);
+  }
+  .overlay-header {
+    margin-bottom: 12px;
+  }
+  .overlay-header h3 {
+    font-size: 15px;
+  }
+  .ratio-hint {
+    white-space: normal;
+  }
+  .editor-section {
+    margin-bottom: 12px;
+  }
 }
 </style>