Make emoji picker height responsive. (#31130)

* Make the height of the emoji picker responsive.

* Add screenshots for the emoji picker and a one with reduced height.

* prettier

playwright/e2e/composer/CIDER.spec.ts

@@ -76,6 +76,22 @@ test.describe("Composer", () => {
             await expect(page.locator(".mx_EventTile_body", { hasText: "😇" })).toBeVisible();
         });
 
+        test.describe("render emoji picker with larger viewport height", async () => {
+            test.use({ viewport: { width: 1280, height: 720 } });
+            test("render emoji picker", { tag: "@screenshot" }, async ({ page, app }) => {
+                await app.getComposer(false).getByRole("button", { name: "Emoji" }).click();
+                await expect(page.getByTestId("mx_EmojiPicker")).toMatchScreenshot("emoji-picker.png");
+            });
+        });
+
+        test.describe("render emoji picker with small viewport height", async () => {
+            test.use({ viewport: { width: 1280, height: 360 } });
+            test("render emoji picker", { tag: "@screenshot" }, async ({ page, app }) => {
+                await app.getComposer(false).getByRole("button", { name: "Emoji" }).click();
+                await expect(page.getByTestId("mx_EmojiPicker")).toMatchScreenshot("emoji-picker-small.png");
+            });
+        });
+
         test.describe("when Control+Enter is required to send", () => {
             test.beforeEach(async ({ app }) => {
                 await app.settings.setValue("MessageComposerInput.ctrlEnterToSend", null, SettingLevel.ACCOUNT, true);

res/css/views/emojipicker/_EmojiPicker.pcss

@@ -8,7 +8,8 @@ Please see LICENSE files in the repository root for full details.
 
 .mx_EmojiPicker {
     width: 340px;
-    height: 450px;
+    height: min(450px, 80vh);
+    max-height: 80vh;
 
     border-radius: 4px;