From 1c6aed71fe59c740bdc378f49f50714f931545bf Mon Sep 17 00:00:00 2001
From: "bert.hausmans" <bert@hausmans.nl>
Date: Tue, 14 Apr 2026 22:41:01 +0200
Subject: [PATCH] fix: replace InfoTooltip v-tooltip with v-menu popover card

v-tooltip renders a forced-dark background unsuitable for multi-line
help content. Switch to v-menu + v-card which follows the app theme.
Use surface-variant background for the "Tip:" block.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 .../app/src/components/common/InfoTooltip.vue | 32 ++++++++++++-------
 .../components/sections/CreateShiftDialog.vue |  5 ++-
 2 files changed, 25 insertions(+), 12 deletions(-)

diff --git a/apps/app/src/components/common/InfoTooltip.vue b/apps/app/src/components/common/InfoTooltip.vue
index d765d558..c53d5121 100644
--- a/apps/app/src/components/common/InfoTooltip.vue
+++ b/apps/app/src/components/common/InfoTooltip.vue
@@ -1,20 +1,30 @@
 <template>
-  <VTooltip
-    location="bottom"
-    max-width="320"
-    open-on-click
+  <VMenu
+    :close-on-content-click="false"
+    location="bottom start"
+    max-width="340"
+    offset="8"
   >
-    <template #activator="{ props: tooltipProps }">
+    <template #activator="{ props: menuProps }">
       <VIcon
-        v-bind="tooltipProps"
+        v-bind="menuProps"
         icon="tabler-info-circle"
         size="16"
         color="medium-emphasis"
-        class="cursor-help"
+        class="cursor-pointer"
       />
     </template>
-    <div class="text-body-2">
-      <slot />
-    </div>
-  </VTooltip>
+
+    <VCard
+      variant="elevated"
+      class="pa-3"
+    >
+      <div
+        class="text-body-2"
+        style="line-height: 1.6;"
+      >
+        <slot />
+      </div>
+    </VCard>
+  </VMenu>
 </template>
diff --git a/apps/app/src/components/sections/CreateShiftDialog.vue b/apps/app/src/components/sections/CreateShiftDialog.vue
index 383d3309..5498aba5 100644
--- a/apps/app/src/components/sections/CreateShiftDialog.vue
+++ b/apps/app/src/components/sections/CreateShiftDialog.vue
@@ -250,7 +250,10 @@ function onSubmit() {
                 >
                   <InfoTooltip>
                     <p>{{ tooltipText?.main }}</p>
-                    <div class="mt-2 pa-2 bg-surface rounded text-caption">
+                    <div
+                      class="mt-2 pa-2 rounded text-caption"
+                      style="background: rgb(var(--v-theme-surface-variant)); line-height: 1.5;"
+                    >
                       <strong>Tip:</strong> {{ tooltipText?.tip }}
                     </div>
                   </InfoTooltip>