Fix TAC button alignment when expanded (#12238)

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 };

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();

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;
         }
     }