From 9b8f48ad8e0935f1711ab005ead864e0537638d7 Mon Sep 17 00:00:00 2001
From: Alexis <alexis.pele@pm.me>
Date: Mon, 4 Aug 2025 16:45:46 +0200
Subject: [PATCH] Fixed tooltip position on client side component

---
 app/components/calendar/CategoriesCTA.vue  | 26 +++++++++++-----------
 app/components/calendar/menu/MenuToday.vue | 22 +++++++++---------
 2 files changed, 24 insertions(+), 24 deletions(-)

diff --git a/app/components/calendar/CategoriesCTA.vue b/app/components/calendar/CategoriesCTA.vue
index 8361d7a..3aad5d9 100644
--- a/app/components/calendar/CategoriesCTA.vue
+++ b/app/components/calendar/CategoriesCTA.vue
@@ -6,20 +6,20 @@ const { isReadOnly } = storeToRefs(useCalendar())
 </script>
 
 <template>
-  <UiTooltipProvider :delay-duration="250">
-    <UiTooltip>
-      <UiTooltipTrigger as-child>
-        <ClientOnly>
+  <ClientOnly>
+    <UiTooltipProvider :delay-duration="250">
+      <UiTooltip>
+        <UiTooltipTrigger as-child>
           <UiButton v-if="!isReadOnly" variant="secondary" size="icon" @click="toggleCategoriesModal(true)">
             <PhTag size="20" weight="light" />
           </UiButton>
-        </ClientOnly>
-      </UiTooltipTrigger>
-      <UiTooltipContent>
-        <p>
-          {{ $t('entity.calendar.seeCategories') }}
-        </p>
-      </UiTooltipContent>
-    </UiTooltip>
-  </UiTooltipProvider>
+        </UiTooltipTrigger>
+        <UiTooltipContent>
+          <p>
+            {{ $t('entity.calendar.seeCategories') }}
+          </p>
+        </UiTooltipContent>
+      </UiTooltip>
+    </UiTooltipProvider>
+  </ClientOnly>
 </template>
diff --git a/app/components/calendar/menu/MenuToday.vue b/app/components/calendar/menu/MenuToday.vue
index 7355077..b3d61de 100644
--- a/app/components/calendar/menu/MenuToday.vue
+++ b/app/components/calendar/menu/MenuToday.vue
@@ -16,10 +16,10 @@ const breakpoints = useBreakpoints(
 </script>
 
 <template>
-  <UiTooltipProvider :delay-duration="250">
-    <UiTooltip>
-      <UiTooltipTrigger as-child>
-        <ClientOnly>
+  <ClientOnly>
+    <UiTooltipProvider :delay-duration="250">
+      <UiTooltip>
+        <UiTooltipTrigger as-child>
           <UiButton
             :size="breakpoints.md.value ? 'default' : 'icon'"
             variant="secondary"
@@ -31,11 +31,11 @@ const breakpoints = useBreakpoints(
               {{ $t('entity.calendar.date.today') }}
             </span>
           </UiButton>
-        </ClientOnly>
-      </UiTooltipTrigger>
-      <UiTooltipContent>
-        <p>{{ defaultDateFormatted }}</p>
-      </UiTooltipContent>
-    </UiTooltip>
-  </UiTooltipProvider>
+        </UiTooltipTrigger>
+        <UiTooltipContent>
+          <p>{{ defaultDateFormatted }}</p>
+        </UiTooltipContent>
+      </UiTooltip>
+    </UiTooltipProvider>
+  </ClientOnly>
 </template>