From 2c79ccc883f433493aef8e67fcc0548c50bdc116 Mon Sep 17 00:00:00 2001
From: Pujit Mehrotra <pujitm2009@gmail.com>
Date: Mon, 14 Oct 2024 13:27:20 -0400
Subject: [PATCH] fix(NotificationItem): icon & text alignment in header

---
 web/components/Notifications/Item.vue | 9 +++++----
 1 file changed, 5 insertions(+), 4 deletions(-)

diff --git a/web/components/Notifications/Item.vue b/web/components/Notifications/Item.vue
index 26bb074e8..8be72a64d 100644
--- a/web/components/Notifications/Item.vue
+++ b/web/components/Notifications/Item.vue
@@ -36,13 +36,14 @@ const icon = computed<{ component: Component, color: string } | null>(() => {
 
 <template>
   <div class="group/item relative w-full py-4 pl-1 flex flex-col gap-2">
-    <header class="w-full flex flex-row items-start justify-between gap-2">
-      <h3 class="text-muted-foreground text-[0.875rem] tracking-wide flex flex-row items-center gap-2 uppercase">
-        <component :is="icon.component" v-if="icon" class="size-6 shrink-0" :class="icon.color" />
+    <header class="w-full flex flex-row items-baseline justify-between gap-2 -translate-y-1 group-hover/item:font-medium group-focus/item:font-medium">
+      <h3 class="text-muted-foreground text-[0.875rem] tracking-wide flex flex-row items-baseline gap-2 uppercase">
+        <!-- the `translate` compensates for extra space added by the `svg` element when rendered -->
+        <component :is="icon.component" v-if="icon" class="size-5 shrink-0 translate-y-1.5" :class="icon.color" />
         <span>{{ title }}</span>
       </h3>
 
-      <div class="shrink-0 flex flex-row items-center justify-end gap-2 mt-1">
+      <div class="shrink-0 flex flex-row items-baseline justify-end gap-2 mt-1">
         <p class="text-12px opacity-75">{{ timestamp }}</p>
       </div>
     </header>