TAC: Fix hover state when expanded (#12337)

* Fix TAC hover state

* Add playwright test

* Update playwright snapshot after last compound style changes

playwright/e2e/spaces/threads-activity-centre/index.ts

@@ -265,6 +265,13 @@ export class Helpers {
         return this.getTacButton().click();
     }
 
+    /**
+     * Hover over the Threads Activity Centre button
+     */
+    hoverTacButton() {
+        return this.getTacButton().hover();
+    }
+
     /**
      * Click on a room in the Threads Activity Centre
      * @param name - room name

playwright/e2e/spaces/threads-activity-centre/threadsActivityCentre.spec.ts

@@ -134,4 +134,14 @@ test.describe("Threads Activity Centre", () => {
         await toggleSpotlight();
         await expect(page.locator(".mx_SpotlightDialog")).not.toBeVisible();
     });
+
+    test("should have the correct hover state", async ({ util, page }) => {
+        await util.hoverTacButton();
+        await expect(util.getSpacePanel()).toMatchScreenshot("tac-hovered.png");
+
+        // Expand the space panel, hover the button and take a screenshot
+        await util.expandSpacePanel();
+        await util.hoverTacButton();
+        await expect(util.getSpacePanel()).toMatchScreenshot("tac-hovered-expanded.png");
+    });
 });

res/css/structures/_ThreadsActivityCentre.pcss

@@ -25,6 +25,12 @@
     margin: 18px auto auto auto;
 
     &.expanded {
+        /**
+         * override compound default background color when hovered
+         * should disappear when the space panel will be migrated to compound
+         */
+        background-color: transparent !important;
+
         /* align with settings icon */
         margin-left: 21px;