From 79e1f865495539e616f91d0ed3e0295c98769586 Mon Sep 17 00:00:00 2001
From: Ahmad Ansori Palembani <palembani+github@gmail.com>
Date: Mon, 23 Oct 2023 11:25:13 +0000
Subject: [PATCH] fix(Mention): underline on hover

---
 CHANGELOG.md                       | 1 +
 src/soapbox/components/mention.tsx | 4 ++--
 2 files changed, 3 insertions(+), 2 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 9299bdf18..7478293bd 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -13,6 +13,7 @@
 - Timeline: move pin button to remote (instance) timeline's header
 - Search: move search icon to the start of textbox
 - UI: changed how user acct is rendered, domain now shown as button (similar to Thread)
+- Mention: fix mention doesn't have underline on hover
 
 ## 2023.10.3
 - UI: highlight mentions
diff --git a/src/soapbox/components/mention.tsx b/src/soapbox/components/mention.tsx
index 9499d9302..29d965991 100644
--- a/src/soapbox/components/mention.tsx
+++ b/src/soapbox/components/mention.tsx
@@ -31,8 +31,8 @@ export const Mention: React.FC<IMention> = ({ mention, textSize = 'md' }) => {
   }, []);
 
   return (
-    <Link onClick={e => e.stopPropagation()} to={`/@${account.acct}`} title={`@${account.fqn}`} className='mention inline-block rounded-full bg-primary-200 py-1 pl-1 pr-2 text-primary-600 dark:bg-primary-800 dark:text-primary-400'>
-      <HoverRefWrapper key={account.id} accountId={account.id} className='inline-flex items-center align-top'>
+    <Link onClick={e => e.stopPropagation()} to={`/@${account.acct}`} title={`@${account.fqn}`} className='mention group inline-block rounded-full bg-primary-200 py-1 pl-1 pr-2 text-primary-600 dark:bg-primary-800 dark:text-primary-400'>
+      <HoverRefWrapper key={account.id} accountId={account.id} className='inline-flex items-center align-top group-hover:underline'>
         <Avatar size={avatarSize} src={account.avatar} className='mr-1.5 inline-flex items-center align-bottom' />
         <span>@{account.acct}</span>
       </HoverRefWrapper>