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; + } } >* {