From aef080ac80a56fa0023ceba3bdc9f31a23e80cc5 Mon Sep 17 00:00:00 2001
From: Suguru Hirahara <luixxiul@users.noreply.github.com>
Date: Fri, 27 May 2022 08:23:34 +0000
Subject: [PATCH] Create 'Unable To Decrypt' grid layout for hidden events on a
 bubble layout (#8704)

---
 res/css/views/rooms/_EventBubbleTile.scss | 58 +++++++++++++++--------
 1 file changed, 38 insertions(+), 20 deletions(-)

diff --git a/res/css/views/rooms/_EventBubbleTile.scss b/res/css/views/rooms/_EventBubbleTile.scss
index 6e648d4e57..c3752c8752 100644
--- a/res/css/views/rooms/_EventBubbleTile.scss
+++ b/res/css/views/rooms/_EventBubbleTile.scss
@@ -486,30 +486,48 @@ limitations under the License.
         margin-left: -9px;
     }
 
-    /* Special layout scenario for "Unable To Decrypt (UTD)" events */
-    &.mx_EventTile_bad > .mx_EventTile_line {
-        display: grid;
-        grid-template:
-            "reply reply" auto
-            "shield body" auto
-            "shield link" auto
-            / auto  1fr;
+    &.mx_EventTile_bad {
+        /* Special layout scenario for "Unable To Decrypt (UTD)" events */
+        .mx_EventTile_line {
+            display: grid;
+            grid-template:
+                "reply reply" auto
+                "shield body" auto
+                "shield link" auto
+                / auto  1fr;
 
-        .mx_EventTile_e2eIcon {
-            grid-area: shield;
+            .mx_EventTile_e2eIcon {
+                grid-area: shield;
+            }
+
+            .mx_UnknownBody {
+                grid-area: body;
+            }
+
+            .mx_EventTile_keyRequestInfo {
+                grid-area: link;
+            }
+
+            .mx_ReplyChain_wrapper {
+                grid-area: reply;
+                min-width: 0; // Prevent a grid blowout due to nowrap displayName
+            }
         }
 
-        .mx_UnknownBody {
-            grid-area: body;
-        }
+        &.mx_EventTile_info {
+            // "Unable To Decrypt" layout for hidden events
+            .mx_EventTile_line {
+                gap: 0 9px; // 9px: margin value of E2E icon
+                align-items: center;
+                grid-template:
+                    "shield source" auto
+                    "shield link" auto
+                    / auto  1fr;
 
-        .mx_EventTile_keyRequestInfo {
-            grid-area: link;
-        }
-
-        .mx_ReplyChain_wrapper {
-            grid-area: reply;
-            min-width: 0; // Prevent a grid blowout due to nowrap displayName
+                .mx_ViewSourceEvent {
+                    grid-area: source;
+                }
+            }
         }
     }