Improve clickability of "collapse" link button on bubble layout (#9037)

Author: luixxiul

cypress/e2e/14-timeline/timeline.spec.ts

@@ -23,6 +23,7 @@ import type { EventType } from "matrix-js-sdk/src/@types/event";
 import type { MatrixClient } from "matrix-js-sdk/src/client";
 import { SynapseInstance } from "../../plugins/synapsedocker";
 import { SettingLevel } from "../../../src/settings/SettingLevel";
+import { Layout } from "../../../src/settings/enums/Layout";
 import Chainable = Cypress.Chainable;
 
 // The avatar size used in the timeline
@@ -141,5 +142,22 @@ describe("Timeline", () => {
                 expectAvatar(e, newAvatarUrl);
             });
         });
+
+        it("should click 'collapse' link button on the first hovered info event line on bubble layout", () => {
+            cy.visit("/#/room/" + roomId);
+            cy.setSettingValue("layout", null, SettingLevel.DEVICE, Layout.Bubble);
+            cy.contains(".mx_RoomView_body .mx_GenericEventListSummary[data-layout=bubble] " +
+                ".mx_GenericEventListSummary_summary", "created and configured the room.");
+
+            // Click "expand" link button
+            cy.get(".mx_GenericEventListSummary_toggle[aria-expanded=false]").click();
+
+            // Click "collapse" link button on the first hovered info event line
+            cy.get(".mx_GenericEventListSummary_unstyledList .mx_EventTile_info:first-of-type").realHover()
+                .get(".mx_GenericEventListSummary_toggle[aria-expanded=true]").click({ force: false });
+
+            // Make sure "collapse" link button worked
+            cy.get(".mx_GenericEventListSummary_toggle[aria-expanded=false]");
+        });
     });
 });

res/css/views/messages/_MessageActionBar.pcss

@@ -54,6 +54,18 @@ limitations under the License.
         left: -58px;
         z-index: -1;
         cursor: initial;
+
+        /* stylelint-disable-next-line max-line-length */
+        .mx_GenericEventListSummary[data-layout="bubble"] .mx_GenericEventListSummary_toggle ~ .mx_GenericEventListSummary_unstyledList .mx_EventTile_info:first-of-type & {
+            // improve clickability of "collapse" link button on bubble layout by reducing width and height values
+            // mx_GenericEventListSummary_toggle ~: to apply rules to action bar when "collapse" button is available
+            // mx_EventTile_info:first-of-type: to apply rules to the info event tile just under "collapse" button
+            // TODO: use a new class name instead
+            width: 100%;
+            height: 100%;
+            top: 0;
+            left: 0;
+        }
     }
 
     >* {