From 02a8a9034a91ded81a487dfd8b06ff5c14acd2c6 Mon Sep 17 00:00:00 2001 From: Lim Chee Aun Date: Sat, 21 Sep 2024 12:09:19 +0800 Subject: [PATCH] Content-visiblit:auto for custom emojis list With better sticky headers --- src/components/compose.css | 9 +++++++++ src/components/compose.jsx | 4 ++-- 2 files changed, 11 insertions(+), 2 deletions(-) diff --git a/src/components/compose.css b/src/components/compose.css index af95d5f5..d62de470 100644 --- a/src/components/compose.css +++ b/src/components/compose.css @@ -721,6 +721,11 @@ } .custom-emojis-list { + .section-container { + position: relative; + content-visibility: auto; + content-intrinsic-size: auto 88px; + } .section-header { font-size: 80%; text-transform: uppercase; @@ -730,6 +735,10 @@ top: 0; background-color: var(--bg-color); z-index: 1; + display: inline-block; + padding-inline-end: 8px; + pointer-events: none; + border-end-end-radius: 8px; } section { display: flex; diff --git a/src/components/compose.jsx b/src/components/compose.jsx index 8cae9ee9..ea7574af 100644 --- a/src/components/compose.jsx +++ b/src/components/compose.jsx @@ -3162,7 +3162,7 @@ function CustomEmojisModal({ Object.entries(customEmojisCatList).map( ([category, emojis]) => !!emojis?.length && ( - <> +
{{ '--recent--': t`Recently used`, @@ -3173,7 +3173,7 @@ function CustomEmojisModal({ emojis={emojis} onSelect={onSelectEmoji} /> - +
), )}