From 261ea66d5efba42d843123416d5de526b20bc408 Mon Sep 17 00:00:00 2001
From: Alexander Zinchuk <alx.zinchuk@gmail.com>
Date: Fri, 10 Dec 2021 18:33:45 +0100
Subject: [PATCH] Emoji Picker: Fix overlapping category names in Firefox
 (#1575)

---
 src/components/middle/composer/GifPicker.scss  | 4 ++++
 src/components/middle/composer/SymbolMenu.scss | 7 +++++--
 2 files changed, 9 insertions(+), 2 deletions(-)

diff --git a/src/components/middle/composer/GifPicker.scss b/src/components/middle/composer/GifPicker.scss
index f8fc172ed..c928d7e04 100644
--- a/src/components/middle/composer/GifPicker.scss
+++ b/src/components/middle/composer/GifPicker.scss
@@ -8,6 +8,10 @@
   overflow-y: auto;
   padding: 0.25rem;
 
+  @supports (overflow: overlay) {
+    overflow-y: overlay;
+  }
+
   .Loading, .picker-disabled {
     grid-column: 1 / -1;
     height: var(--menu-height);
diff --git a/src/components/middle/composer/SymbolMenu.scss b/src/components/middle/composer/SymbolMenu.scss
index 7dc4eb13c..ce5a92e19 100644
--- a/src/components/middle/composer/SymbolMenu.scss
+++ b/src/components/middle/composer/SymbolMenu.scss
@@ -36,7 +36,6 @@
   }
 
   &-main {
-    width: var(--symbol-menu-width);
     height: var(--symbol-menu-height);
     max-height: calc(100vh - var(--symbol-menu-footer-height));
     @supports (padding-bottom: env(safe-area-inset-bottom)) {
@@ -107,9 +106,13 @@
   }
 
   .bubble {
+    width: calc(var(--symbol-menu-width) + .25rem); // Reserve width for scrollbar
     padding: 0;
-    width: var(--symbol-menu-width);
     overflow: hidden;
+
+    @supports (overflow: overlay) {
+      width: var(--symbol-menu-width);
+    }
   }
 
   .picker-disabled {