From 02a8a9034a91ded81a487dfd8b06ff5c14acd2c6 Mon Sep 17 00:00:00 2001
From: Lim Chee Aun <cheeaun@gmail.com>
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 && (
- <>
+ <div class="section-container">
<div class="section-header">
{{
'--recent--': t`Recently used`,
@@ -3173,7 +3173,7 @@ function CustomEmojisModal({
emojis={emojis}
onSelect={onSelectEmoji}
/>
- </>
+ </div>
),
)}
</div>