enki/blap
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases 6 Wiki Activity

Ensure interface gradually reduces visible buttons when viewport shrinks (#33477)

Browse Source 
* Rewrite Measured to be a functional component

* Add tests to cover narrow viewports

* lint

* breakpoint is optional

* Cleanup

* Provide default value

* Fixup

* fix two snaps

* Update screenshot

* and the other one

* unfake CIDER

* Update snaps AGAIN
This commit is contained in:
Will Hunt
2026-05-14 16:15:43 +01:00
committed by GitHub
parent cff2c4cd25
commit ab904bb6ca
16 changed files with 66 additions and 51 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/web/playwright/e2e/composer/CIDER.spec.ts
+6 -6
View File
@@ -77,6 +77,12 @@ test.describe("Composer", () => {
await expect(page.locator(".mx_EventTile_body", { hasText: "😇" })).toBeVisible();
});
test("renders in narrow viewports", { tag: "@screenshot" }, async ({ page, bot, app }) => {
// Shrink the viewport
await page.setViewportSize({ width: 500, height: 1080 });
await expect(app.getComposer()).toMatchScreenshot("narrow.png");
});
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 }) => {
@@ -201,12 +207,6 @@ test.describe("Composer", () => {
});
test("can paste a file", async ({ page, bot, app }) => {
// Set up a private room so we have another user to mention
await app.client.createRoom({
is_direct: true,
invite: [bot.credentials.userId],
});
await app.viewRoomByName("Bob");
await app.composerDragAndPasteFile("room", getSampleFilePath("riot.png"), "image/png");
await expect(page.locator(".mx_ImageBody")).toBeVisible();
});
apps/web/playwright/e2e/composer/RTE.spec.ts
+6
View File
@@ -216,6 +216,12 @@ test.describe("Composer", () => {
await expect(page.locator(".mx_ImageBody")).toBeVisible();
});
test("renders in narrow viewports", { tag: "@screenshot" }, async ({ page, bot, app }) => {
// Shrink the viewport
await page.setViewportSize({ width: 750, height: 1080 });
await expect(page.locator(".mx_MessageComposer_wrapper")).toMatchScreenshot("narrow.png");
});
test.describe("when Control+Enter is required to send", () => {
test.beforeEach(async ({ app }) => {
await app.settings.setValue("MessageComposerInput.ctrlEnterToSend", null, SettingLevel.ACCOUNT, true);
apps/web/playwright/e2e/threads/threads.spec.ts
+3 -3
View File
@@ -327,19 +327,19 @@ test.describe("Threads", () => {
test.describe("with larger viewport", async () => {
// Increase viewport size so that voice messages fit
test.use({ viewport: { width: 1280, height: 720 } });
test.use({ viewport: { width: 1440, height: 720 } });
test.beforeEach(async ({ page }) => {
// Increase right-panel size, so that voice messages fit
await page.addInitScript(() => {
window.localStorage.setItem("mx_rhs_size", "600");
window.localStorage.setItem("mx_rhs_size", "700");
});
});
test("can send voice messages", { tag: ["@no-firefox", "@no-webkit"] }, async ({ page, app, user }) => {
// Increase right-panel size, so that voice messages fit
await page.evaluate(() => {
window.localStorage.setItem("mx_rhs_size", "600");
window.localStorage.setItem("mx_rhs_size", "700");
});
const roomId = await app.client.createRoom({});