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 <noreply@anthropic.com>
This commit is contained in:
@@ -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;
|
||||
|
||||
Reference in New Issue
Block a user