mirror of https://github.com/usememos/memos.git
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>
This commit is contained in:
parent
07b523e4b2
commit
b4341dd123
|
|
@ -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
|
||||
|
|
|
|||
Loading…
Reference in New Issue