Change padding

app/components/content/Activity.vue

@@ -12,36 +12,36 @@ useIntervalFn(async () => await refresh(), 5000)
 </script>
 
 <template>
-  <div
+  <p
     v-if="codingActivity"
     class="flex items-start gap-2"
   >
     <UTooltip :text="codingActivity.state.toLowerCase().includes('editing') ? 'I\'m online 👋' : 'I\'m sleeping 😴'">
       <div
         :class="codingActivity.state.toLowerCase().includes('editing') ? 'bg-green-500' : 'bg-amber-500'"
-        class="h-3 w-3 inline-flex rounded-full cursor-help mt-7"
+        class="h-3 w-3 inline-flex rounded-full cursor-help mt-2"
       />
     </UTooltip>
-    <p v-if="codingActivity.state.toLowerCase().includes('editing')">
+    <span v-if="codingActivity.state.toLowerCase().includes('editing')">
       I'm actually working on <strong>{{ codingActivity.details }}</strong>,
       {{ codingActivity.state.charAt(0).toLowerCase() + codingActivity.state.slice(1) }}.
       using <strong>{{ codingActivity.name }}</strong>.
       I've started <strong>{{ useTimeAgo(codingActivity.timestamps.start).value }}</strong>, the
       <strong>{{ formatDate(codingActivity.timestamps.start) }}</strong>.
-    </p>
-    <p v-else>
+    </span>
+    <span v-else>
       I'm Idling on my computer with <strong>{{ codingActivity.name }}</strong> running in background.
-    </p>
-  </div>
-  <div
+    </span>
+  </p>
+  <p
     v-else
     class="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-7" />
+      <div class="cursor-not-allowed h-3 w-3 inline-flex rounded-full bg-red-500 mt-2" />
     </UTooltip>
-    <p>
+    <span>
       I'm currently offline. Come back later to see what I'm working on.
-    </p>
-  </div>
+    </span>
+  </p>
 </template>

app/components/content/Stats.vue

@@ -5,21 +5,16 @@ const stats = await $fetch<Stats>('/api/stats')
 </script>
 
 <template>
-  <div
-    v-if="stats"
-    class="flex items-center gap-x-1 text-md"
-  >
-    <p>
-      I collect some data for {{ useTimeAgo(new Date(stats.coding.data.range.start)).value }}, started the
-      <strong>{{ useDateFormat(new Date(stats.coding.data.range.start), 'Do MMMM YYYY').value }}</strong>.
-      I've coded for a total of <strong>{{
-        usePrecision(stats.coding.data.grand_total.total_seconds_including_other_language / 3600, 0)
-      }}</strong> hours.
-      My best editors are
-      {{ stats.editors.data.slice(0, 2).map(editor => `${editor.name} (${editor.percent}%)`).join(' and ') }}.
-      My best OS is {{ stats.os.data[0].name }} ({{ stats.os.data[0].percent }}%).
-      My top languages are
-      {{ stats.languages.data.slice(0, 2).map(language => `${language.name} (${language.percent}%)`).join(' and ') }}.
-    </p>
-  </div>
+  <p v-if="stats">
+    I collect some data for {{ useTimeAgo(new Date(stats.coding.data.range.start)).value }}, started the
+    <strong>{{ useDateFormat(new Date(stats.coding.data.range.start), 'Do MMMM YYYY').value }}</strong>.
+    I've coded for a total of <strong>{{
+      usePrecision(stats.coding.data.grand_total.total_seconds_including_other_language / 3600, 0)
+    }}</strong> hours.
+    My best editors are
+    {{ stats.editors.data.slice(0, 2).map(editor => `${editor.name} (${editor.percent}%)`).join(' and ') }}.
+    My best OS is {{ stats.os.data[0].name }} ({{ stats.os.data[0].percent }}%).
+    My top languages are
+    {{ stats.languages.data.slice(0, 2).map(language => `${language.name} (${language.percent}%)`).join(' and ') }}.
+  </p>
 </template>