style: sticker picker: add scroll-padding

...to account for the `position: sticky` sticker pack header / title.
deltachat · Jan 7, 2025 · a6f9aeb · a6f9aeb
1 parent 3285af8
commit a6f9aeb
Showing 1 changed file with 10 additions and 2 deletions.
diff --git a/packages/frontend/scss/composer/_emoji-sticker-picker.scss b/packages/frontend/scss/composer/_emoji-sticker-picker.scss
@@ -61,13 +61,20 @@ $emojimart-search-height: 31px + 6px;
     overflow: auto;
     flex-direction: column;
 
+    $pack-title-vertical-padding: 8px;
+    $pack-title-font-size: 16px;
+    $pack-title-line-height: 1.15;
     .sticker-container {
       display: flex;
       flex-direction: column;
       flex: 1;
       padding: 0px 12px 12px;
       overflow-y: auto;
 
+      // To account for the `position: sticky` title.
+      scroll-padding-top: $pack-title-font-size * $pack-title-line-height +
+        $pack-title-vertical-padding * 2;
+
       .no-stickers {
         display: flex;
         flex-direction: column;
@@ -83,13 +90,14 @@ $emojimart-search-height: 31px + 6px;
 
       .sticker-pack {
         & > .title {
-          padding: 8px 0px;
+          padding: $pack-title-vertical-padding 0px;
           color: grey;
           font-size: large;
           font-weight: 500;
           text-transform: capitalize;
           font-family: var(--font-family);
-          font-size: 16px;
+          font-size: $pack-title-font-size;
+          line-height: $pack-title-line-height;
           font-weight: 500;
           position: sticky;
           top: -1px;