Commit b4341dd1 authored by Steven's avatar Steven

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: 's avatarGitHub Copilot <noreply@github.com>
parent 07b523e4
......@@ -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
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment