diff --git a/playwright/e2e/spaces/threads-activity-centre/index.ts b/playwright/e2e/spaces/threads-activity-centre/index.ts index 0aba6d5334..b0fcd4648a 100644 --- a/playwright/e2e/spaces/threads-activity-centre/index.ts +++ b/playwright/e2e/spaces/threads-activity-centre/index.ts @@ -350,6 +350,20 @@ export class Helpers { await this.receiveMessages(room2, ["Msg2", msg.threadedOff("Msg2", "Resp2")]); await this.receiveMessages(room1, ["Msg3", msg.threadedOff("Msg3", "Resp3")]); } + + /** + * Get the space panel + */ + getSpacePanel() { + return this.page.getByRole("navigation", { name: "Spaces" }); + } + + /** + * Expand the space panel + */ + expandSpacePanel() { + return this.page.getByRole("button", { name: "Expand" }).click(); + } } export { expect }; diff --git a/playwright/e2e/spaces/threads-activity-centre/threadsActivityCentre.spec.ts b/playwright/e2e/spaces/threads-activity-centre/threadsActivityCentre.spec.ts index d15018876c..1b237c0b53 100644 --- a/playwright/e2e/spaces/threads-activity-centre/threadsActivityCentre.spec.ts +++ b/playwright/e2e/spaces/threads-activity-centre/threadsActivityCentre.spec.ts @@ -25,6 +25,15 @@ test.describe("Threads Activity Centre", () => { labsFlags: ["threadsActivityCentre"], }); + test("should have the button correctly aligned and displayed in the space panel when expanded", async ({ + util, + }) => { + // Open the space panel + await util.expandSpacePanel(); + // The buttons in the space panel should be aligned when expanded + await expect(util.getSpacePanel()).toMatchScreenshot("tac-button-expanded.png"); + }); + test("should not show indicator when there is no thread", async ({ roomAlpha: room1, util }) => { // No indicator should be shown await util.assertNoTacIndicator(); diff --git a/playwright/snapshots/spaces/threads-activity-centre/threadsActivityCentre.spec.ts/tac-button-expanded-linux.png b/playwright/snapshots/spaces/threads-activity-centre/threadsActivityCentre.spec.ts/tac-button-expanded-linux.png new file mode 100644 index 0000000000..f4cbbf3293 Binary files /dev/null and b/playwright/snapshots/spaces/threads-activity-centre/threadsActivityCentre.spec.ts/tac-button-expanded-linux.png differ diff --git a/res/css/structures/_ThreadsActivityCentre.pcss b/res/css/structures/_ThreadsActivityCentre.pcss index 2c1370fd69..dcfb49b822 100644 --- a/res/css/structures/_ThreadsActivityCentre.pcss +++ b/res/css/structures/_ThreadsActivityCentre.pcss @@ -19,7 +19,7 @@ .mx_ThreadsActivityCentreButton { color: $secondary-content; height: 32px; - width: 32px; + min-width: 32px; display: flex; align-items: center; justify-content: center; @@ -28,11 +28,11 @@ &.expanded { /* align with settings icon */ - margin-left: 20px; + margin-left: 25px; & > .mx_ThreadsActivityCentreButton_IndicatorIcon { /* align with settings label */ - margin-right: 12px; + margin-right: 14px; } }