diff --git a/src/routes/_components/dialog/components/EmojiDialog.html b/src/routes/_components/dialog/components/EmojiDialog.html
index 78c53558..5c51e089 100644
--- a/src/routes/_components/dialog/components/EmojiDialog.html
+++ b/src/routes/_components/dialog/components/EmojiDialog.html
@@ -4,7 +4,6 @@
   {title}
   shrinkWidthToFit={true}
   background="var(--main-bg)"
-  className="emoji-dialog"
 >
   <div class="emoji-container" ref:container ></div>
 </ModalDialog>
@@ -39,6 +38,15 @@
       height: 240px;
     }
   }
+
+  @media (max-height: 450px) {
+    :global(emoji-picker) {
+      height: 100%;
+    }
+    .emoji-container {
+      height: 100%;
+    }
+  }
 </style>
 <script>
   /* global applyFocusVisiblePolyfill */