From d02cd152dea51901deb02e25e0955d0ea3c5475d Mon Sep 17 00:00:00 2001 From: maaz519 Date: Wed, 22 Jul 2026 00:37:47 +0530 Subject: [PATCH] fix(messaging-ui): reaction picker opens downward, no longer clips The emoji picker used bottom:100% and was clipped by the message list's overflow when reacting to a message near the top (and could spill past the right edge). Open it downward + edge-anchored (right for others' messages, left for my own) with width:max-content so all emojis stay visible. Co-Authored-By: Claude Opus 4.8 --- packages/iios-messaging-ui/src/styles.css | 13 +++++++++++-- 1 file changed, 11 insertions(+), 2 deletions(-) diff --git a/packages/iios-messaging-ui/src/styles.css b/packages/iios-messaging-ui/src/styles.css index 97c58ac..9ae498d 100644 --- a/packages/iios-messaging-ui/src/styles.css +++ b/packages/iios-messaging-ui/src/styles.css @@ -198,8 +198,11 @@ } .miu-react-picker { position: absolute; - bottom: 100%; - margin-bottom: 4px; + /* Open downward + right-aligned so it never clips against the top of the scroll area + (the reported bug) or spills past the right edge. */ + top: 100%; + right: 0; + margin-top: 4px; display: flex; gap: 2px; padding: 4px; @@ -208,6 +211,12 @@ background: var(--miu-panel); box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4); z-index: 5; + width: max-content; +} +/* On my own (right-aligned) messages, anchor the picker to the left instead so it stays in view. */ +.miu-msg.is-mine .miu-react-picker { + right: auto; + left: 0; } .miu-react-emoji { border: none;