From 9491edb3c9ec092c331d960e6267b061949d20e3 Mon Sep 17 00:00:00 2001
From: Jannis Braun <151788261+TheZwiss@users.noreply.github.com>
Date: Mon, 2 Mar 2026 15:55:42 +0100
Subject: [PATCH] fix: reaction pill frosted glass + compact sizing to match
 prototype

Replace inline JS hover handlers with .glass-pill CSS classes for proper
Aether Drift frosted glass depth (blur, inset highlight, box-shadow).
Constrain emoji size and use exact prototype padding (2px 8px) for compact pills.
---
 packages/web/src/components/chat/Message.tsx | 28 +++++---------------
 packages/web/src/styles/globals.css          | 26 ++++++++++++++++++
 2 files changed, 32 insertions(+), 22 deletions(-)

diff --git a/packages/web/src/components/chat/Message.tsx b/packages/web/src/components/chat/Message.tsx
index 551a5887..25b4151e 100644
--- a/packages/web/src/components/chat/Message.tsx
+++ b/packages/web/src/components/chat/Message.tsx
@@ -248,29 +248,13 @@ export function Message({ message, isCompact, isFirstInGroup }: MessageProps) {
                   <button
                     key={emoji}
                     onClick={() => toggleReaction(emoji)}
-                    className="flex items-center gap-1 px-2 py-0.5 rounded-md text-[13px] border transition-all duration-[120ms] ease-out cursor-pointer"
-                    style={me ? {
-                      background: 'rgba(134, 239, 172, 0.10)',
-                      borderColor: 'rgba(134, 239, 172, 0.25)',
-                    } : {
-                      background: 'rgba(255, 255, 255, 0.04)',
-                      borderColor: 'var(--border-soft)',
-                    }}
-                    onMouseEnter={(e) => {
-                      e.currentTarget.style.background = me
-                        ? 'rgba(134, 239, 172, 0.15)'
-                        : 'rgba(255, 255, 255, 0.08)';
-                      if (!me) e.currentTarget.style.borderColor = 'rgba(255, 255, 255, 0.12)';
-                    }}
-                    onMouseLeave={(e) => {
-                      e.currentTarget.style.background = me
-                        ? 'rgba(134, 239, 172, 0.10)'
-                        : 'rgba(255, 255, 255, 0.04)';
-                      if (!me) e.currentTarget.style.borderColor = 'var(--border-soft)';
-                    }}
+                    className={`glass-pill flex items-center gap-1 rounded-[6px] cursor-pointer transition-all duration-[120ms] ease-out ${
+                      me ? 'glass-pill-mine' : ''
+                    }`}
+                    style={{ padding: '2px 8px', fontSize: '13px', lineHeight: 1 }}
                   >
-                    <span>{emoji}</span>
-                    <span className={`text-xs font-semibold ${me ? 'text-accent-mint' : 'text-txt-secondary'}`}>{count}</span>
+                    <span style={{ fontSize: '14px', lineHeight: 1 }}>{emoji}</span>
+                    <span className={`font-semibold ${me ? 'text-accent-mint' : 'text-txt-secondary'}`} style={{ fontSize: '12px' }}>{count}</span>
                   </button>
                 ))}
               </div>
diff --git a/packages/web/src/styles/globals.css b/packages/web/src/styles/globals.css
index 10c68178..fa820d94 100644
--- a/packages/web/src/styles/globals.css
+++ b/packages/web/src/styles/globals.css
@@ -152,6 +152,27 @@
       0 8px 24px rgba(0, 0, 0, 0.12),
       inset 0 1px 0 var(--glass-highlight);
   }
+
+  /* Reaction pill glass — lighter blur for small inline elements */
+  .glass-pill {
+    backdrop-filter: blur(12px) saturate(110%);
+    -webkit-backdrop-filter: blur(12px) saturate(110%);
+    background: rgba(255, 255, 255, 0.06);
+    border: 1px solid rgba(255, 255, 255, 0.08);
+    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.03);
+  }
+  .glass-pill:hover {
+    background: rgba(255, 255, 255, 0.10);
+    border-color: rgba(255, 255, 255, 0.14);
+  }
+  .glass-pill-mine {
+    background: rgba(134, 239, 172, 0.10);
+    border-color: rgba(134, 239, 172, 0.25);
+    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15), inset 0 1px 0 rgba(134, 239, 172, 0.06);
+  }
+  .glass-pill-mine:hover {
+    background: rgba(134, 239, 172, 0.16);
+  }
 }
 
 /* Accessibility: fall back to solid surfaces when transparency is reduced */
@@ -172,6 +193,11 @@
     -webkit-backdrop-filter: none;
     background: var(--bg-elevated);
   }
+  .glass-pill {
+    backdrop-filter: none;
+    -webkit-backdrop-filter: none;
+    background: var(--bg-elevated);
+  }
 }
 
 @layer utilities {