Fixed tooltip position on client side component

app/components/calendar/CategoriesCTA.vue

@@ -6,14 +6,13 @@ const { isReadOnly } = storeToRefs(useCalendar())
 </script>
 
 <template>
+  <ClientOnly>
     <UiTooltipProvider :delay-duration="250">
       <UiTooltip>
         <UiTooltipTrigger as-child>
-        <ClientOnly>
           <UiButton v-if="!isReadOnly" variant="secondary" size="icon" @click="toggleCategoriesModal(true)">
             <PhTag size="20" weight="light" />
           </UiButton>
-        </ClientOnly>
         </UiTooltipTrigger>
         <UiTooltipContent>
           <p>
@@ -22,4 +21,5 @@ const { isReadOnly } = storeToRefs(useCalendar())
         </UiTooltipContent>
       </UiTooltip>
     </UiTooltipProvider>
+  </ClientOnly>
 </template>

app/components/calendar/menu/MenuToday.vue

@@ -16,10 +16,10 @@ const breakpoints = useBreakpoints(
 </script>
 
 <template>
+  <ClientOnly>
     <UiTooltipProvider :delay-duration="250">
       <UiTooltip>
         <UiTooltipTrigger as-child>
-        <ClientOnly>
           <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>
+  </ClientOnly>
 </template>