Fix decryption failure bar covering the timeline

cypress/e2e/crypto/decryption-failure.spec.ts

@@ -57,6 +57,28 @@ const handleVerificationRequest = (request: VerificationRequest): Chainable<Emoj
     );
 };
 
+const checkTimelineNarrow = (button = true) => {
+    cy.viewport(800, 600); // SVGA
+    cy.get(".mx_LeftPanel_minimized").should("exist"); // Wait until the left panel is minimized
+    cy.get(".mx_RightPanel_roomSummaryButton").click(); // Open the right panel to make the timeline narrow
+    cy.get(".mx_BaseCard").should("exist");
+
+    // Ensure the failure bar does not cover the timeline
+    cy.get(".mx_RoomView_body .mx_EventTile.mx_EventTile_last").should("be.visible");
+
+    // Ensure the indicator does not overflow the timeline
+    cy.get("[data-testid='decryption-failure-bar-indicator']").should("be.visible");
+
+    if (button) {
+        // Ensure the button does not overflow the timeline
+        cy.get("[data-testid='decryption-failure-bar-button']:last-of-type").should("be.visible");
+    }
+
+    cy.get(".mx_RightPanel_roomSummaryButton").click(); // Close the right panel
+    cy.get(".mx_BaseCard").should("not.exist");
+    cy.viewport(1000, 660); // Reset to the default size
+};
+
 describe("Decryption Failure Bar", () => {
     let homeserver: HomeserverInstance | undefined;
     let testUser: UserCredentials | undefined;
@@ -113,10 +135,13 @@ describe("Decryption Failure Bar", () => {
                 })
                 .then(() => {
                     cy.botSendMessage(bot, roomId, "test");
+                    cy.contains(".mx_DecryptionFailureBar_start_headline", "Decrypting messages…").should("be.visible");
                     cy.contains(
-                        ".mx_DecryptionFailureBar .mx_DecryptionFailureBar_message_headline",
+                        ".mx_DecryptionFailureBar_start_headline",
                         "Verify this device to access all messages",
-                    );
+                    ).should("be.visible");
+
+                    checkTimelineNarrow();
 
                     cy.get(".mx_DecryptionFailureBar").percySnapshotElement(
                         "DecryptionFailureBar prompts user to verify",
@@ -125,12 +150,14 @@ describe("Decryption Failure Bar", () => {
                         },
                     );
 
-                    cy.contains(".mx_DecryptionFailureBar_button", "Resend key requests").should("not.exist");
-                    cy.contains(".mx_DecryptionFailureBar_button", "Verify").click();
+                    cy.contains(".mx_DecryptionFailureBar_end", "Resend key requests").should("not.exist");
+                    cy.contains(".mx_DecryptionFailureBar_end", "Verify").should("be.visible").click();
 
                     const verificationRequestPromise = waitForVerificationRequest(otherDevice);
                     cy.get(".mx_CompleteSecurity_actionRow .mx_AccessibleButton").click();
-                    cy.contains("To proceed, please accept the verification request on your other device.");
+                    cy.contains("To proceed, please accept the verification request on your other device.").should(
+                        "be.visible",
+                    );
                     cy.wrap(verificationRequestPromise).then((verificationRequest: VerificationRequest) => {
                         cy.wrap(verificationRequest.accept());
                         handleVerificationRequest(verificationRequest).then((emojis) => {
@@ -146,10 +173,12 @@ describe("Decryption Failure Bar", () => {
             cy.get(".mx_VerificationPanel_verified_section .mx_E2EIcon_verified").should("exist");
             cy.contains(".mx_AccessibleButton", "Got it").click();
 
-            cy.get(".mx_DecryptionFailureBar .mx_DecryptionFailureBar_message_headline").should(
-                "have.text",
+            cy.contains(
+                ".mx_DecryptionFailureBar_start_headline",
                 "Open another device to load encrypted messages",
-            );
+            ).should("be.visible");
+
+            checkTimelineNarrow();
 
             cy.get(".mx_DecryptionFailureBar").percySnapshotElement(
                 "DecryptionFailureBar prompts user to open another device, with Resend Key Requests button",
@@ -159,9 +188,12 @@ describe("Decryption Failure Bar", () => {
             );
 
             cy.intercept("/_matrix/client/r0/sendToDevice/m.room_key_request/*").as("keyRequest");
-            cy.contains(".mx_DecryptionFailureBar_button", "Resend key requests").click();
+            cy.contains(".mx_DecryptionFailureBar_end_button", "Resend key requests").should("be.visible").click();
             cy.wait("@keyRequest");
-            cy.contains(".mx_DecryptionFailureBar_button", "Resend key requests").should("not.exist");
+            cy.contains(".mx_DecryptionFailureBar_end_button", "Resend key requests").should("not.exist");
+            cy.contains(".mx_DecryptionFailureBar_end_button", "View your device list").should("be.visible");
+
+            checkTimelineNarrow();
 
             cy.get(".mx_DecryptionFailureBar").percySnapshotElement(
                 "DecryptionFailureBar prompts user to open another device, without Resend Key Requests button",
@@ -184,15 +216,17 @@ describe("Decryption Failure Bar", () => {
 
             cy.botSendMessage(bot, roomId, "test");
             cy.contains(
-                ".mx_DecryptionFailureBar .mx_DecryptionFailureBar_message_headline",
+                ".mx_DecryptionFailureBar_start_headline",
                 "Reset your keys to prevent future decryption errors",
-            );
+            ).should("be.visible");
+
+            checkTimelineNarrow();
 
             cy.get(".mx_DecryptionFailureBar").percySnapshotElement("DecryptionFailureBar prompts user to reset keys", {
                 widths: [320, 640],
             });
 
-            cy.contains(".mx_DecryptionFailureBar_button", "Reset").click();
+            cy.contains(".mx_DecryptionFailureBar_end_button", "Reset").should("be.visible").click();
 
             // Set up key backup
             cy.get(".mx_Dialog").within(() => {
@@ -204,11 +238,12 @@ describe("Decryption Failure Bar", () => {
                 cy.contains("Done").click();
             });
 
-            cy.get(".mx_DecryptionFailureBar .mx_DecryptionFailureBar_message_headline").should(
-                "have.text",
-                "Some messages could not be decrypted",
+            cy.contains(".mx_DecryptionFailureBar_start_headline", "Some messages could not be decrypted").should(
+                "be.visible",
             );
 
+            checkTimelineNarrow(false); // button should not be rendered here
+
             cy.get(".mx_DecryptionFailureBar").percySnapshotElement(
                 "DecryptionFailureBar displays general message with no call to action",
                 {
@@ -233,9 +268,11 @@ describe("Decryption Failure Bar", () => {
             widths: [320, 640],
         });
 
+        checkTimelineNarrow();
+
         cy.wait(5000);
         cy.get(".mx_DecryptionFailureBar .mx_Spinner").should("not.exist");
-        cy.get(".mx_DecryptionFailureBar .mx_DecryptionFailureBar_icon").should("exist");
+        cy.get("[data-testid='decryption-failure-bar-icon']").should("be.visible");
 
         cy.get(".mx_RoomView_messagePanel").scrollTo("top");
         cy.get(".mx_DecryptionFailureBar").should("not.exist");
@@ -245,5 +282,7 @@ describe("Decryption Failure Bar", () => {
 
         cy.get(".mx_RoomView_messagePanel").scrollTo("bottom");
         cy.get(".mx_DecryptionFailureBar").should("exist");
+
+        checkTimelineNarrow();
     });
 });

res/css/_common.pcss

@@ -43,6 +43,8 @@ $timeline-image-border-radius: 8px;
     --transition-short: 0.1s;
     --transition-standard: 0.3s;
     --MessageTimestamp-width: $MessageTimestamp_width;
+    --buttons-dialog-gap-row: $spacing-8;
+    --buttons-dialog-gap-column: $spacing-8;
 }
 
 @media only percy {
@@ -525,8 +527,8 @@ legend {
     margin-inline-start: auto;
 
     /* default gap among elements */
-    column-gap: $spacing-8; /* See margin-right below inside the button style */
-    row-gap: 5px; /* See margin-bottom below inside the button style */
+    column-gap: var(--buttons-dialog-gap-column);
+    row-gap: var(--buttons-dialog-gap-row);
 
     button {
         margin: 0 !important; /* override the margin settings */
@@ -548,7 +550,7 @@ legend {
 .mx_Dialog_buttons input[type="submit"] {
     @mixin mx_DialogButton;
     margin-left: 0px;
-    margin-right: 8px;
+    margin-right: var(--buttons-dialog-gap-column);
     margin-bottom: 5px;
 
     /* flip colours for the secondary ones */

res/css/views/rooms/_DecryptionFailureBar.pcss

@@ -15,46 +15,73 @@ limitations under the License.
 */
 
 .mx_DecryptionFailureBar {
+    --gap-row: $spacing-8;
+    --gap-column: $spacing-12;
+    --gap: var(--gap-row) var(--gap-column);
+    --size-icon: 24px;
+
     background-color: $system;
     padding: $spacing-12;
-    margin-left: $spacing-16;
-    margin-right: $spacing-16;
+    margin-inline: $spacing-16;
     border-radius: 4px;
-    display: flex;
-    align-items: flex-start;
-    gap: $spacing-12;
-}
 
-.mx_DecryptionFailureBar_icon {
-    width: 24px;
-    height: 24px;
-    mask-image: url("$(res)/img/e2e/decryption-failure.svg");
-    background-color: $e2e-warning-color;
-    mask-repeat: no-repeat;
-    mask-position: center;
-    mask-size: contain;
-}
+    &.mx_DecryptionFailureBar--withEnd {
+        display: flex;
+        flex-flow: wrap;
+        align-items: flex-start;
+        justify-content: space-between;
+        row-gap: calc(var(--gap-row) + $spacing-4); /* Increase spacing between the message and the buttons */
 
-.mx_DecryptionFailureBar_icon,
-.mx_DecryptionFailureBar .mx_Spinner {
-    flex-shrink: 0;
-    flex-grow: 0;
-}
+        .mx_DecryptionFailureBar_end {
+            display: flex;
+            flex-wrap: wrap; /* Let the buttons wrapped on a narrow column */
+            gap: var(--buttons-dialog-gap-row) var(--buttons-dialog-gap-column);
+            margin-inline-start: calc(var(--size-icon) + var(--gap-column)); /* Align the button(s) and the message */
+        }
+    }
 
-.mx_DecryptionFailureBar_message {
-    flex-grow: 1;
-}
+    .mx_DecryptionFailureBar_start {
+        display: grid;
+        gap: var(--gap);
+        grid-template-areas:
+            "status headline"
+            ".      message";
+        grid-template-columns: var(--size-icon) auto;
 
-.mx_DecryptionFailureBar_message_headline {
-    font-weight: $font-semi-bold;
-    font-size: $font-16px;
-    margin-bottom: $spacing-4;
-}
+        .mx_DecryptionFailureBar_start_status {
+            grid-area: status;
 
-.mx_DecryptionFailureBar_message_body {
-    color: $secondary-content;
-}
+            display: flex;
+            align-items: center;
+            gap: var(--gap);
+
+            .mx_Spinner {
+                height: unset; /* Unset height: 100% */
+            }
+
+            .mx_DecryptionFailureBar_start_status_icon {
+                min-width: var(--size-icon);
+                height: var(--size-icon);
+                mask-image: url("$(res)/img/e2e/decryption-failure.svg");
+                background-color: $e2e-warning-color;
+                mask-repeat: no-repeat;
+                mask-position: center;
+                mask-size: contain;
+            }
+        }
+
+        .mx_DecryptionFailureBar_start_headline {
+            grid-area: headline;
+
+            font-weight: $font-semi-bold;
+            font-size: $font-16px;
+            align-self: center;
+        }
+
+        .mx_DecryptionFailureBar_start_message {
+            grid-area: message;
 
-.mx_DecryptionFailureBar_button {
-    flex-shrink: 0;
+            color: $secondary-content;
+        }
+    }
 }