Change client-only tag position

src/components/header/Header.vue

@@ -1,13 +1,11 @@
 <template>
   <header class="z-30 sticky top-0 left-0 flex justify-center w-full">
     <div class="w-full px-4 sm:px-6 lg:px-8 sm:mx-8 max-w-7xl py-4 flex justify-between items-center bg-white dark:bg-zinc-900 border-b border-zinc-100 dark:border-zinc-300/10">
-      <ClientOnly>
       <Logo />
       <NavBar />
-        <div class="flex gap-2 items-center">
+      <ClientOnly fallback-tag="div" class="flex gap-2 items-center">
         <ThemePicker />
         <MobileNavBar />
-        </div>
       </ClientOnly>
     </div>
   </header>

src/components/main/MainActivity.vue

@@ -62,9 +62,11 @@ useIntervalFn(async () => await refresh(), 5000)
     </div>
     <template #footer>
       <div class="flex items-center justify-end w-full">
+        <ClientOnly>
           <p v-if="codingActivity" class="text-subtitle text-xs w-1/2">
             Started the {{ formatDate(codingActivity.timestamps.start) }}
           </p>
+        </ClientOnly>
         <div class="flex items-center space-x-1 w-1/2 justify-end">
           <p class="text-subtitle text-xs">
             powered by

src/components/main/MainStats.vue

@@ -10,7 +10,6 @@ const CardUi = {
 </script>
 
 <template>
-  <ClientOnly>
   <UCard class="flex flex-col justify-between" :ui="CardUi">
     <div class="flex items-center gap-x-4 h-full">
       <p
@@ -46,9 +45,11 @@ const CardUi = {
     </div>
     <template #footer>
       <div class="flex items-center justify-between">
+        <ClientOnly>
           <p v-if="stats" class="text-subtitle text-xs w-1/2">
             Started {{ useTimeAgo(new Date(stats.coding.data.range.start)).value }}, the {{ useDateFormat(new Date(stats.coding.data.range.start), 'Do MMMM YYYY').value }}
           </p>
+        </ClientOnly>
         <div class="flex items-center justify-end space-x-1">
           <p class="text-subtitle text-xs">
             powered by
@@ -66,7 +67,6 @@ const CardUi = {
       </div>
     </template>
   </UCard>
-  </ClientOnly>
 </template>
 
 <style>