maaz519/iios
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(messaging-ui): mail cards no longer clip + emoji picker portals above overflow (0.1.3)

Browse Source 
- Mail reader: .miu-mail-msg gets flex:0 0 auto so cards keep their natural height
  in the scrolling column instead of being compressed + clipped by overflow:hidden.
- Reaction/emoji picker renders through a PopoverPortal to <body> (positioned +
  themed) so it floats above the message list instead of being cut by the scroll
  container's overflow. 72 tests green.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
Maaz Ahamed
2026-07-23 02:52:18 +05:30
parent 2753a8a367
commit 3c5c6964e2
5 changed files with 97 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/iios-messaging-ui/src/styles.css
+7 -11
View File
@@ -196,13 +196,13 @@
.miu-react-btn:hover {
opacity: 1;
}
/* Portaled to <body> via .miu-popover so it's never clipped by a scroll container. */
.miu-popover {
position: fixed;
z-index: 2147483000;
transform: translateX(-100%); /* right-align the picker's right edge to the anchor */
}
.miu-react-picker {
position: absolute;
/* 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;
@@ -210,14 +210,9 @@
border: 1px solid var(--miu-border);
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;
background: none;
@@ -836,6 +831,7 @@ button.miu-attach-dl:hover {
gap: 12px;
}
.miu-mail-msg {
flex: 0 0 auto; /* don't let the flex column shrink cards — they'd clip their own content */
border: 1px solid var(--miu-border);
border-radius: var(--miu-radius);
background: var(--miu-panel);