From ef3f107d82478718983874ba39f5f2135e354bd8 Mon Sep 17 00:00:00 2001
From: Nolan Lawson <nolan@nolanlawson.com>
Date: Mon, 22 Feb 2021 20:37:08 -0800
Subject: [PATCH] fix: tweak emoji picker style on mobile (#1969)

* fix: tweak emoji picker style on mobile

* fix: remove unnecessary global styles
---
 .../dialog/components/EmojiDialog.html        | 19 +++++++++----------
 1 file changed, 9 insertions(+), 10 deletions(-)

diff --git a/src/routes/_components/dialog/components/EmojiDialog.html b/src/routes/_components/dialog/components/EmojiDialog.html
index c2b8aa7f..43253498 100644
--- a/src/routes/_components/dialog/components/EmojiDialog.html
+++ b/src/routes/_components/dialog/components/EmojiDialog.html
@@ -17,30 +17,29 @@
   </div>
 </ModalDialog>
 <style>
-  :global(emoji-picker) {
+  emoji-picker {
     --indicator-color: var(--main-theme-color);
     --outline-color: var(--focus-outline);
   }
 
   @media (max-width: 479px) {
-    :global(emoji-picker) {
-      --emoji-padding: 0.25rem;
-      --input-padding: 0.125rem;
-    }
-
-    .emoji-container, :global(emoji-picker) {
+    .emoji-container, emoji-picker {
       width: 100%;
     }
   }
 
   @media (max-width: 320px) {
-    :global(emoji-picker) {
+    emoji-picker {
+      --emoji-padding: 0.25rem;
+      --input-padding: 0.125rem;
+    }
+    emoji-picker {
       --num-columns: 6;
     }
   }
 
   @media (max-width: 240px) {
-    :global(emoji-picker) {
+    emoji-picker {
       --num-columns: 6;
       --emoji-size: 1.125rem;
       --emoji-padding: 0.125rem;
@@ -49,7 +48,7 @@
   }
 
   @media (max-height: 450px) {
-    :global(emoji-picker) {
+    emoji-picker {
       height: calc(100vh - 75px); /* leave room for the dialog bar */
     }
   }