Content-visiblit:auto for custom emojis list

With better sticky headers
cheeaun · Sep 21, 2024 · 02a8a90 · 02a8a90
1 parent f2cc0f5
commit 02a8a90
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 2 deletions.
diff --git 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
@@ -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>