From 161a333a5165bae0726592385245acac1ba7d0ed Mon Sep 17 00:00:00 2001
From: Suguru Hirahara <luixxiul@users.noreply.github.com>
Date: Sat, 16 Jul 2022 09:31:29 +0000
Subject: [PATCH] Improve clickability of "collapse" link button on bubble
 layout (#9037)

---
 cypress/e2e/14-timeline/timeline.spec.ts      | 18 ++++++++++++++++++
 res/css/views/messages/_MessageActionBar.pcss | 12 ++++++++++++
 2 files changed, 30 insertions(+)

diff --git a/cypress/e2e/14-timeline/timeline.spec.ts b/cypress/e2e/14-timeline/timeline.spec.ts
index 22861c8fd7..53f87de8b1 100644
--- a/cypress/e2e/14-timeline/timeline.spec.ts
+++ b/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]");
+        });
     });
 });
diff --git a/res/css/views/messages/_MessageActionBar.pcss b/res/css/views/messages/_MessageActionBar.pcss
index 1d2cfa6f5f..18333a3079 100644
--- a/res/css/views/messages/_MessageActionBar.pcss
+++ b/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;
+        }
     }
 
     >* {