Content-visiblit:auto for custom emojis list

With better sticky headers
This commit is contained in:
Lim Chee Aun 2024-09-21 12:09:19 +08:00
parent f2cc0f5bec
commit 02a8a9034a
2 changed files with 11 additions and 2 deletions

View file

@ -721,6 +721,11 @@
} }
.custom-emojis-list { .custom-emojis-list {
.section-container {
position: relative;
content-visibility: auto;
content-intrinsic-size: auto 88px;
}
.section-header { .section-header {
font-size: 80%; font-size: 80%;
text-transform: uppercase; text-transform: uppercase;
@ -730,6 +735,10 @@
top: 0; top: 0;
background-color: var(--bg-color); background-color: var(--bg-color);
z-index: 1; z-index: 1;
display: inline-block;
padding-inline-end: 8px;
pointer-events: none;
border-end-end-radius: 8px;
} }
section { section {
display: flex; display: flex;

View file

@ -3162,7 +3162,7 @@ function CustomEmojisModal({
Object.entries(customEmojisCatList).map( Object.entries(customEmojisCatList).map(
([category, emojis]) => ([category, emojis]) =>
!!emojis?.length && ( !!emojis?.length && (
<> <div class="section-container">
<div class="section-header"> <div class="section-header">
{{ {{
'--recent--': t`Recently used`, '--recent--': t`Recently used`,
@ -3173,7 +3173,7 @@ function CustomEmojisModal({
emojis={emojis} emojis={emojis}
onSelect={onSelectEmoji} onSelect={onSelectEmoji}
/> />
</> </div>
), ),
)} )}
</div> </div>