From 86be739667d53aa1906c75dc9f67d62bc6108170 Mon Sep 17 00:00:00 2001
From: Hera Zhao <hera@euphon.net>
Date: Tue, 7 Apr 2026 21:50:07 +0000
Subject: [PATCH] Fix card overlay: scrollable buttons, doTERRA casing, English
 text

- Move action buttons (favorite, save-to-diary) inside card view so
  they scroll with content instead of sticking at top
- Remove text-transform:uppercase so doTERRA renders correctly
- Fix English dilution text to match main branch (bottle vs single-use)
- Add close button to editor view header

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 .../src/components/RecipeDetailOverlay.vue    | 84 ++++++++-----------
 1 file changed, 37 insertions(+), 47 deletions(-)

diff --git a/frontend/src/components/RecipeDetailOverlay.vue b/frontend/src/components/RecipeDetailOverlay.vue
index 5f8c771..897f16d 100644
--- a/frontend/src/components/RecipeDetailOverlay.vue
+++ b/frontend/src/components/RecipeDetailOverlay.vue
@@ -1,30 +1,28 @@
 <template>
   <div class="detail-overlay" @click.self="$emit('close')">
     <div class="detail-panel">
-      <!-- Top bar: close button only (no "卡片预览" text) -->
-      <div class="detail-top-bar">
-        <div class="card-top-actions" v-if="viewMode === 'card' && authStore.isLoggedIn">
-          <button class="action-btn action-btn-fav" @click="handleToggleFavorite">
-            {{ isFav ? '★ 已收藏' : '☆ 收藏' }}
-          </button>
-          <button v-if="!recipe._diary_id" class="action-btn action-btn-diary" @click="saveToDiary">
-            📔 存为我的
-          </button>
-        </div>
-        <div class="top-bar-spacer" v-else></div>
-        <div class="top-bar-right">
+      <!-- ==================== CARD VIEW ==================== -->
+      <div v-if="viewMode === 'card'" class="detail-card-view">
+        <!-- Top bar with close + edit -->
+        <div class="card-header">
+          <div class="card-top-actions" v-if="authStore.isLoggedIn">
+            <button class="action-btn action-btn-fav action-btn-sm" @click="handleToggleFavorite">
+              {{ isFav ? '★ 已收藏' : '☆ 收藏' }}
+            </button>
+            <button v-if="!recipe._diary_id" class="action-btn action-btn-diary action-btn-sm" @click="saveToDiary">
+              📔 存为我的
+            </button>
+          </div>
+          <div style="flex:1"></div>
           <button
-            v-if="canEditThisRecipe && viewMode === 'card'"
+            v-if="canEditThisRecipe"
             class="action-btn action-btn-sm"
             @click="viewMode = 'editor'"
           >编辑</button>
           <button class="detail-close-btn" @click="$emit('close')">✕</button>
         </div>
-      </div>
 
-      <!-- ==================== CARD VIEW ==================== -->
-      <div v-if="viewMode === 'card'" class="detail-card-view">
-        <!-- Language toggle (at top, matching main branch) -->
+        <!-- Language toggle -->
         <div class="card-lang-toggle">
           <button
             class="lang-btn"
@@ -92,7 +90,9 @@
             <div v-if="dilutionDesc" class="card-dilution">{{ dilutionDesc }}</div>
 
             <!-- Note -->
-            <div v-if="recipe.note" class="card-note">{{ recipe.note }}</div>
+            <div v-if="recipe.note" class="card-note">
+              {{ cardLang === 'en' ? '📝 ' + recipe.note : '📝 ' + recipe.note }}
+            </div>
 
             <!-- Total cost bar -->
             <div class="card-total">
@@ -150,10 +150,13 @@
       <div v-if="viewMode === 'editor'" class="detail-editor-view">
         <!-- Header -->
         <div class="editor-header">
-          <input v-model="editName" type="text" class="editor-name-input" placeholder="配方名称" />
+          <div style="flex:1;min-width:0">
+            <input v-model="editName" type="text" class="editor-name-input" placeholder="配方名称" />
+          </div>
           <div class="editor-header-actions">
-            <button class="action-btn action-btn-primary" @click="saveRecipe">保存</button>
-            <button class="action-btn" @click="previewFromEditor">预览</button>
+            <button class="action-btn action-btn-primary action-btn-sm" @click="saveRecipe">💾 保存</button>
+            <button class="action-btn action-btn-sm" @click="previewFromEditor">👁 预览</button>
+            <button class="detail-close-btn" @click="$emit('close')">✕</button>
           </div>
         </div>
 
@@ -404,12 +407,17 @@ const totalEoDrops = computed(() =>
 const dilutionDesc = computed(() => {
   if (coconutDrops.value <= 0 || totalEoDrops.value <= 0) return ''
   const totalDrops = coconutDrops.value + totalEoDrops.value
-  const mlTotal = totalDrops / DROPS_PER_ML
+  const vol = Math.round(totalDrops / DROPS_PER_ML)
   const ratio = Math.round(coconutDrops.value / totalEoDrops.value)
-  if (cardLang.value === 'en') {
-    return `This formula is for a ${mlTotal.toFixed(0)}ml bottle. Pure EO: ${totalEoDrops.value} drops, filled with coconut oil, dilution ratio 1:${ratio}.`
+  const isEn = cardLang.value === 'en'
+  if (vol >= 5) {
+    return isEn
+      ? `For ${vol}ml bottle: ${totalEoDrops.value} drops essential oils, fill with coconut oil. Dilution 1:${ratio}`
+      : `该配方适用于 ${vol}ml 瓶，其中纯精油 ${totalEoDrops.value} 滴，其余用椰子油填满，稀释比例为 1:${ratio}`
   }
-  return `该配方适用于 ${mlTotal.toFixed(0)}ml 瓶，其中纯精油 ${totalEoDrops.value} 滴，其余用椰子油填满，稀释比例为 1:${ratio}`
+  return isEn
+    ? `Single use (${totalDrops} drops): ${totalEoDrops.value} drops essential oils + ${coconutDrops.value} drops coconut oil. Dilution 1:${ratio}`
+    : `该配方适用于单次用量（共${totalDrops}滴），其中纯精油 ${totalEoDrops.value} 滴，椰子油 ${coconutDrops.value} 滴，稀释比例为 1:${ratio}`
 })
 
 const priceInfo = computed(() => oilsStore.fmtCostWithRetail(recipe.value.ingredients))
@@ -813,30 +821,12 @@ async function saveRecipe() {
   position: relative;
 }
 
-/* Top bar */
-.detail-top-bar {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 12px 16px;
-  position: sticky;
-  top: 0;
-  background: #fff;
-  z-index: 10;
-  border-radius: 18px 18px 0 0;
-  border-bottom: 1px solid var(--border, #e0d4c0);
-  gap: 8px;
-}
-
-.top-bar-spacer {
-  flex: 1;
-}
-
-.top-bar-right {
+/* Card header */
+.card-header {
   display: flex;
   align-items: center;
   gap: 6px;
-  margin-left: auto;
+  margin-bottom: 12px;
 }
 
 .detail-close-btn {
@@ -854,6 +844,7 @@ async function saveRecipe() {
   display: flex;
   align-items: center;
   justify-content: center;
+  flex-shrink: 0;
 }
 
 .detail-close-btn:hover {
@@ -970,7 +961,6 @@ async function saveRecipe() {
   font-size: 11px;
   letter-spacing: 3px;
   color: var(--sage, #7a9e7e);
-  text-transform: uppercase;
   margin-bottom: 8px;
   font-family: 'Noto Sans SC', sans-serif;
 }