From b446506aee5ad2d011e1eab3934e6f103172a20b Mon Sep 17 00:00:00 2001 From: David Langley Date: Thu, 11 Dec 2025 10:55:20 +0000 Subject: [PATCH] Size Autocomplete relative to the RoomView height rather than the viewport height (#31425) * Size Autocomplete relative to the RoomView height rather than the viewport height * Add screenshot for the autocomplete in a regression changes the height * Add cjk fonts to support rendering text emoticons displayed in slash command picker * Maybe when actually running the tests? * Try after system dependencies and clear font cache * Add cjk fonts to support rendering text emoticons displayed in slash command picker Try after system dependencies and clear font cache Maybe when actually running the tests? Revert "Add cjk fonts to support rendering text emoticons displayed in slash command picker" This reverts commit 46fa014308b6010626174f8cd0d3a978488963ee. * Render emoji autocoplete instead * Remove font install that didn't work --- playwright/e2e/composer/CIDER.spec.ts | 14 ++++++++++++++ .../CIDER.spec.ts/emoji-autocomplete-linux.png | Bin 0 -> 9595 bytes res/css/structures/_RoomView.pcss | 2 ++ res/css/views/rooms/_Autocomplete.pcss | 7 ++++++- 4 files changed, 22 insertions(+), 1 deletion(-) create mode 100644 playwright/snapshots/composer/CIDER.spec.ts/emoji-autocomplete-linux.png diff --git a/playwright/e2e/composer/CIDER.spec.ts b/playwright/e2e/composer/CIDER.spec.ts index af6843f89a..55cb84f37a 100644 --- a/playwright/e2e/composer/CIDER.spec.ts +++ b/playwright/e2e/composer/CIDER.spec.ts @@ -168,5 +168,19 @@ test.describe("Composer", () => { await composer.press("Enter"); await expect(page.locator(".mx_EventTile_body", { hasText: "Bob" })).toBeVisible(); }); + + test("renders emoji autocomplete", { tag: "@screenshot" }, async ({ page }) => { + const composer = page.getByRole("textbox", { name: "Send an unencrypted message…" }); + + // Type ":+1" to trigger emoji autocomplete + await composer.pressSequentially(":+1"); + + // Wait for autocomplete to appear + const autocomplete = page.locator("#mx_Autocomplete"); + await expect(autocomplete).toBeVisible(); + + // Take a screenshot of the autocomplete + await expect(autocomplete).toMatchScreenshot("emoji-autocomplete.png"); + }); }); }); diff --git a/playwright/snapshots/composer/CIDER.spec.ts/emoji-autocomplete-linux.png b/playwright/snapshots/composer/CIDER.spec.ts/emoji-autocomplete-linux.png new file mode 100644 index 0000000000000000000000000000000000000000..94c7ec42c808ac01dba65f60dd7c9635453908ac GIT binary patch literal 9595 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 literal 0 HcmV?d00001 diff --git a/res/css/structures/_RoomView.pcss b/res/css/structures/_RoomView.pcss index eab4c3252d..03f95020da 100644 --- a/res/css/structures/_RoomView.pcss +++ b/res/css/structures/_RoomView.pcss @@ -76,6 +76,8 @@ Please see LICENSE files in the repository root for full details. flex-direction: column; flex: 1; min-width: 0; + container-type: size; + container-name: roomview; .mx_RoomView_messagePanel, .mx_RoomView_messagePanelSpinner, diff --git a/res/css/views/rooms/_Autocomplete.pcss b/res/css/views/rooms/_Autocomplete.pcss index fe5d999fa6..7070304bf1 100644 --- a/res/css/views/rooms/_Autocomplete.pcss +++ b/res/css/views/rooms/_Autocomplete.pcss @@ -65,7 +65,12 @@ margin: 12px; height: 100%; overflow-y: scroll; - max-height: 35vh; +} + +@container roomview (height >= 0px) { + .mx_Autocomplete_Completion_container_pill { + max-height: 40cqh; + } } .mx_Autocomplete_Completion_container_truncate {