fix recipe scale tooltip showing also on other parts of the component

frontend/components/Domain/Recipe/RecipePage/RecipePageParts/RecipePageScale.vue

@@ -1,21 +1,11 @@
 <template>
   <div class="d-flex justify-space-between align-center pt-2 pb-3">
-    <v-tooltip
+    <RecipeScaleEditButton
       v-if="!isEditMode"
-      size="small"
+      v-model.number="scaleValue"
-      top
+      :recipe-servings="recipeServings"
-      color="secondary-darken-1"
+      :edit-scale="!recipe.settings.disableAmount && !isEditMode"
-    >
+    />
-      <template #activator="{ props }">
-        <RecipeScaleEditButton
-          v-model.number="scaleValue"
-          v-bind="props"
-          :recipe-servings="recipeServings"
-          :edit-scale="!recipe.settings.disableAmount && !isEditMode"
-        />
-      </template>
-      <span> {{ $t("recipe.edit-scale") }} </span>
-    </v-tooltip>
   </div>
 </template>
 

frontend/components/Domain/Recipe/RecipeScaleEditButton.vue

@@ -11,7 +11,36 @@
           :close-on-content-click="false"
         >
           <template #activator="{ props }">
+            <v-tooltip
+              v-if="canEditScale"
+              size="small"
+              top
+              color="secondary-darken-1"
+            >
+              <template #activator="{ props: tooltipProps }">
+                <v-card
+                  class="pa-1 px-2"
+                  dark
+                  color="secondary-darken-1"
+                  size="small"
+                  v-bind="{ ...props, ...tooltipProps }"
+                  :style="{ cursor: canEditScale ? '' : 'default' }"
+                >
+                  <v-icon
+                    v-if="canEditScale"
+                    size="small"
+                    class="mr-2"
+                  >
+                    {{ $globals.icons.edit }}
+                  </v-icon>
+                  <!-- eslint-disable-next-line vue/no-v-html -->
+                  <span v-html="yieldDisplay" />
+                </v-card>
+              </template>
+              <span> {{ $t("recipe.edit-scale") }} </span>
+            </v-tooltip>
             <v-card
+              v-else
               class="pa-1 px-2"
               dark
               color="secondary-darken-1"