fix: hydration mismatch

app/components/content/Activity.vue

@@ -38,15 +38,15 @@ function formatDate(date: number) {
       I'm Idling on my computer with <strong>{{ codingActivity.name }}</strong> running in background.
     </span>
   </p>
-  <p
+  <div
     v-else
-    class="flex md:items-start gap-2"
+    class="my-5 flex md:items-start gap-2"
   >
     <UTooltip text="I'm offline 🫥">
-      <div class="cursor-not-allowed h-3 w-3 inline-flex rounded-full bg-red-500 mt-2" />
+      <span class="cursor-not-allowed h-3 w-3 inline-flex rounded-full bg-red-500 mt-2" />
     </UTooltip>
-    <span>
+    <p class="not-prose">
       I'm currently offline. Come back later to see what I'm working on.
-    </span>
-  </p>
+    </p>
+  </div>
 </template>

app/components/content/ProseIcon.vue

@@ -8,7 +8,7 @@ defineProps({
 </script>
 
 <template>
-  <div class="inline">
+  <span class="inline">
     <UIcon
       class="mb-1 mr-1"
       :name="icon"
@@ -17,5 +17,5 @@ defineProps({
     <span class="sofia font-medium underline decoration-neutral-300 dark:decoration-neutral-700">
       <slot />
     </span>
-  </div>
+  </span>
 </template>