Create 'Unable To Decrypt' grid layout for hidden events on a bubble layout (#8704)

Author: luixxiul

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_UnknownBody {
-            grid-area: body;
-        }
+            .mx_EventTile_keyRequestInfo {
+                grid-area: link;
+            }
 
-        .mx_EventTile_keyRequestInfo {
-            grid-area: link;
+            .mx_ReplyChain_wrapper {
+                grid-area: reply;
+                min-width: 0; // Prevent a grid blowout due to nowrap displayName
+            }
         }
 
-        .mx_ReplyChain_wrapper {
-            grid-area: reply;
-            min-width: 0; // Prevent a grid blowout due to nowrap displayName
+        &.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_ViewSourceEvent {
+                    grid-area: source;
+                }
+            }
         }
     }