From 639b10a720daf3a8cb95d759080ff05643aaf181 Mon Sep 17 00:00:00 2001
From: Shubhashish-Chakraborty <shubhashish147@gmail.com>
Date: Fri, 21 Aug 2026 02:38:11 +0530
Subject: [PATCH 1/3] fix: blog share pill click target

---
 .../the_monkeys/src/app/blog/components/BlogReactions.tsx | 8 ++++++--
 .../src/components/blog/actions/BlogShareDialog.tsx       | 8 +++++++-
 2 files changed, 13 insertions(+), 3 deletions(-)

diff --git a/apps/the_monkeys/src/app/blog/components/BlogReactions.tsx b/apps/the_monkeys/src/app/blog/components/BlogReactions.tsx
index 3a8ea789d..c9119bdfa 100644
--- a/apps/the_monkeys/src/app/blog/components/BlogReactions.tsx
+++ b/apps/the_monkeys/src/app/blog/components/BlogReactions.tsx
@@ -64,8 +64,12 @@ export const BlogReactionsContainer = ({
         <BlogReactions blogId={blogId} />
       </div>
 
-      <div className='shrink-0 px-[10px] py-[6px] bg-foreground-light/80 dark:bg-foreground-dark/80 backdrop-blur-sm rounded-full shadow-sm ring-1 ring-border-light dark:ring-border-dark'>
-        <BlogShareDialog blogURL={url} size={20} />
+      <div className='shrink-0'>
+        <BlogShareDialog
+          blogURL={url}
+          size={20}
+          triggerClassName='px-[10px] py-[6px] bg-foreground-light/80 dark:bg-foreground-dark/80 backdrop-blur-sm rounded-full shadow-sm ring-1 ring-border-light dark:ring-border-dark hover:bg-foreground-light dark:hover:bg-foreground-dark hover:ring-brand-orange/50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-orange'
+        />
       </div>
     </div>
   );
diff --git a/apps/the_monkeys/src/components/blog/actions/BlogShareDialog.tsx b/apps/the_monkeys/src/components/blog/actions/BlogShareDialog.tsx
index 5bbe1acc5..3a59010fb 100644
--- a/apps/the_monkeys/src/components/blog/actions/BlogShareDialog.tsx
+++ b/apps/the_monkeys/src/components/blog/actions/BlogShareDialog.tsx
@@ -15,15 +15,18 @@ import {
   DialogTrigger,
 } from '@the-monkeys/ui/atoms/dialog';
 import { toast } from '@the-monkeys/ui/hooks/use-toast';
+import { twMerge } from 'tailwind-merge';
 
 interface BlogShareDialogProps {
   blogURL: string;
   size?: number;
+  triggerClassName?: string;
 }
 
 export const BlogShareDialog: FC<BlogShareDialogProps> = ({
   blogURL,
   size = 18,
+  triggerClassName,
 }) => {
   const copyToClipboard = () => {
     if (navigator.clipboard) {
@@ -49,7 +52,10 @@ export const BlogShareDialog: FC<BlogShareDialogProps> = ({
     <Dialog>
       <DialogTrigger asChild>
         <button
-          className='p-1 flex items-center justify-center cursor-pointer opacity-80 hover:opacity-100'
+          className={twMerge(
+            'p-1 flex items-center justify-center cursor-pointer opacity-80 hover:opacity-100 transition-colors',
+            triggerClassName
+          )}
           title='Share Blog'
         >
           <Icon name='RiShare' size={size} />

From 62ee1ed58554b1d82852b8b4a91e9f6568060048 Mon Sep 17 00:00:00 2001
From: Shubhashish-Chakraborty <shubhashish147@gmail.com>
Date: Thu, 3 Sep 2026 17:19:07 +0530
Subject: [PATCH 2/3] fixes

---
 apps/the_monkeys/src/app/blog/components/BlogReactions.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/the_monkeys/src/app/blog/components/BlogReactions.tsx b/apps/the_monkeys/src/app/blog/components/BlogReactions.tsx
index 9dd6d6e4f..616bead71 100644
--- a/apps/the_monkeys/src/app/blog/components/BlogReactions.tsx
+++ b/apps/the_monkeys/src/app/blog/components/BlogReactions.tsx
@@ -76,7 +76,7 @@ export const BlogReactionsContainer = ({
       >
         {blogId && <BlogReportDialog size={24} blogId={blogId} />}
       </div>
-      <div classname='shrink-0' >
+      <div className='shrink-0' >
         <BlogShareDialog
           blogURL={url}
           size={20}

From 8178e6ec7cd2689002ef6eafcdb9e161f056babd Mon Sep 17 00:00:00 2001
From: Shubhashish-Chakraborty <shubhashish147@gmail.com>
Date: Thu, 3 Sep 2026 17:21:11 +0530
Subject: [PATCH 3/3] fix

---
 apps/the_monkeys/src/app/blog/components/BlogReactions.tsx | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/apps/the_monkeys/src/app/blog/components/BlogReactions.tsx b/apps/the_monkeys/src/app/blog/components/BlogReactions.tsx
index 616bead71..386113085 100644
--- a/apps/the_monkeys/src/app/blog/components/BlogReactions.tsx
+++ b/apps/the_monkeys/src/app/blog/components/BlogReactions.tsx
@@ -67,7 +67,6 @@ export const BlogReactionsContainer = ({
       <div className='flex-1 px-[14px] py-[6px] bg-foreground-light/80 dark:bg-foreground-dark/80 backdrop-blur-sm rounded-full shadow-sm ring-1 ring-border-light dark:ring-border-dark'>
         <BlogReactions blogId={blogId} />
       </div>
-      
       <div
         className={twMerge(
           'shrink-0 px-[10px] py-[6px] bg-alert-red/60 backdrop-blur-sm rounded-full shadow-sm ring-1 ring-alert-red',
@@ -76,7 +75,7 @@ export const BlogReactionsContainer = ({
       >
         {blogId && <BlogReportDialog size={24} blogId={blogId} />}
       </div>
-      <div className='shrink-0' >
+      <div className='shrink-0'>
         <BlogShareDialog
           blogURL={url}
           size={20}