From b4341dd123d948b0652c2c120e20d5225663002b Mon Sep 17 00:00:00 2001
From: Steven <stevenlgtm@gmail.com>
Date: Wed, 22 Oct 2025 19:31:58 +0800
Subject: [PATCH] fix(web): make reaction selector responsive with scrolling

- Replace fixed width (max-w-56) with responsive viewport-based width
- Use 90vw on mobile and max-w-md on desktop for better adaptability
- Add vertical scrolling with max-h-64 overflow-y-auto
- Increase grid columns to 8 on medium+ screens for better space utilization
- Ensures all reactions are accessible regardless of quantity

Fixes #5117

Co-authored-by: GitHub Copilot <noreply@github.com>
---
 web/src/components/ReactionSelector.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/web/src/components/ReactionSelector.tsx b/web/src/components/ReactionSelector.tsx
index cc3fbec73..5c8042a02 100644
--- a/web/src/components/ReactionSelector.tsx
+++ b/web/src/components/ReactionSelector.tsx
@@ -66,9 +66,9 @@ const ReactionSelector = observer((props: Props) => {
           <SmilePlusIcon className="w-4 h-4 mx-auto text-muted-foreground" />
         </span>
       </PopoverTrigger>
-      <PopoverContent align="center">
+      <PopoverContent align="center" className="max-w-[90vw] sm:max-w-md">
         <div ref={containerRef}>
-          <div className="grid grid-cols-4 sm:grid-cols-6 h-auto gap-1 max-w-56">
+          <div className="grid grid-cols-4 sm:grid-cols-6 md:grid-cols-8 gap-1 max-h-64 overflow-y-auto">
             {workspaceMemoRelatedSetting.reactions.map((reactionType) => {
               return (
                 <span