From 532769a68a5273b692e9bbd0a73c8ab5c3099a2e Mon Sep 17 00:00:00 2001
From: Suguru Hirahara <luixxiul@users.noreply.github.com>
Date: Wed, 29 Jun 2022 01:53:17 +0900
Subject: [PATCH 01/13] Move mx_EventTile_info .mx_EventTile_line from
 mx_EventTile:not([data-layout=bubble]) to mx_EventTile[data-layout=group]

Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
---
 res/css/views/rooms/_EventTile.scss | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/res/css/views/rooms/_EventTile.scss b/res/css/views/rooms/_EventTile.scss
index f9479674363..a816f1359bb 100644
--- a/res/css/views/rooms/_EventTile.scss
+++ b/res/css/views/rooms/_EventTile.scss
@@ -271,6 +271,7 @@ $left-gutter: 64px;
         }
 
         &.mx_EventTile_info .mx_EventTile_line {
+            padding: 3px 0 2px; // Align with mx_EventTile_avatar and mx_EventTile_e2eIcon on modern layout
             padding-left: calc($left-gutter + 20px); // override padding-left $left-gutter
         }
     }
@@ -308,8 +309,6 @@ $left-gutter: 64px;
         }
 
         .mx_EventTile_line {
-            padding: 3px 0 2px; // Align with mx_EventTile_avatar and mx_EventTile_e2eIcon
-
             .mx_MessageTimestamp {
                 top: 0;
             }

From be78289e7eefcb4ec82f51403841e77cd483b68e Mon Sep 17 00:00:00 2001
From: Suguru Hirahara <luixxiul@users.noreply.github.com>
Date: Wed, 29 Jun 2022 15:46:37 +0900
Subject: [PATCH 02/13] Move style rules for avatar and E2E icon of
 mx_EventTile_info .mx_EventTile_line from
 mx_EventTile:not([data-layout=bubble]) to mx_EventTile[data-layout=group]

Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
---
 res/css/views/rooms/_EventTile.scss | 18 ++++++++++--------
 1 file changed, 10 insertions(+), 8 deletions(-)

diff --git a/res/css/views/rooms/_EventTile.scss b/res/css/views/rooms/_EventTile.scss
index a816f1359bb..ef8f613dc0c 100644
--- a/res/css/views/rooms/_EventTile.scss
+++ b/res/css/views/rooms/_EventTile.scss
@@ -270,9 +270,16 @@ $left-gutter: 64px;
             padding-top: 0px !important;
         }
 
-        &.mx_EventTile_info .mx_EventTile_line {
-            padding: 3px 0 2px; // Align with mx_EventTile_avatar and mx_EventTile_e2eIcon on modern layout
-            padding-left: calc($left-gutter + 20px); // override padding-left $left-gutter
+        &.mx_EventTile_info {
+            .mx_EventTile_avatar,
+            .mx_EventTile_e2eIcon {
+                margin: 3px 0 2px; // Align with mx_EventTile_line
+            }
+
+            .mx_EventTile_line {
+                padding: 3px 0 2px; // Align with mx_EventTile_avatar and mx_EventTile_e2eIcon on modern layout
+                padding-left: calc($left-gutter + 20px); // override padding-left $left-gutter
+            }
         }
     }
 
@@ -293,11 +300,6 @@ $left-gutter: 64px;
     &.mx_EventTile_info {
         padding-top: 0;
 
-        .mx_EventTile_avatar,
-        .mx_EventTile_e2eIcon {
-            margin: 3px 0 2px; // Align with mx_EventTile_line
-        }
-
         .mx_EventTile_e2eIcon {
             top: 0;
         }

From bb3dcdae9128bf7879df152d1f812808efb0f854 Mon Sep 17 00:00:00 2001
From: Suguru Hirahara <luixxiul@users.noreply.github.com>
Date: Wed, 29 Jun 2022 15:52:20 +0900
Subject: [PATCH 03/13] Use variables

Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
---
 res/css/views/rooms/_EventTile.scss | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/res/css/views/rooms/_EventTile.scss b/res/css/views/rooms/_EventTile.scss
index ef8f613dc0c..992680466ea 100644
--- a/res/css/views/rooms/_EventTile.scss
+++ b/res/css/views/rooms/_EventTile.scss
@@ -271,13 +271,16 @@ $left-gutter: 64px;
         }
 
         &.mx_EventTile_info {
+            $spacing-block-start: 3px;
+            $spacing-block-end: 2px;
+
             .mx_EventTile_avatar,
             .mx_EventTile_e2eIcon {
-                margin: 3px 0 2px; // Align with mx_EventTile_line
+                margin: $spacing-block-start 0 $spacing-block-end;
             }
 
             .mx_EventTile_line {
-                padding: 3px 0 2px; // Align with mx_EventTile_avatar and mx_EventTile_e2eIcon on modern layout
+                padding: $spacing-block-start 0 $spacing-block-end;
                 padding-left: calc($left-gutter + 20px); // override padding-left $left-gutter
             }
         }

From b96ff7b76bed7bccd31f537d80870c7759e5d855 Mon Sep 17 00:00:00 2001
From: Suguru Hirahara <luixxiul@users.noreply.github.com>
Date: Wed, 29 Jun 2022 15:55:51 +0900
Subject: [PATCH 04/13] Move mx_EventTile_info out of
 mx_EventTile:not([data-layout=bubble]) for both IRC and modern layout

Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
---
 res/css/views/rooms/_EventTile.scss | 40 ++++++++++++++---------------
 1 file changed, 20 insertions(+), 20 deletions(-)

diff --git a/res/css/views/rooms/_EventTile.scss b/res/css/views/rooms/_EventTile.scss
index 992680466ea..4455b369b65 100644
--- a/res/css/views/rooms/_EventTile.scss
+++ b/res/css/views/rooms/_EventTile.scss
@@ -190,6 +190,26 @@ $left-gutter: 64px;
             }
         }
 
+        &.mx_EventTile_info {
+            padding-top: 0;
+
+            .mx_EventTile_e2eIcon {
+                top: 0;
+            }
+
+            .mx_EventTile_avatar {
+                top: initial;
+                inset-inline-start: $left-gutter;
+                height: 14px;
+            }
+
+            .mx_EventTile_line {
+                .mx_MessageTimestamp {
+                    top: 0;
+                }
+            }
+        }
+
         &.mx_EventTile_continuation .mx_EventTile_line {
             clear: both;
         }
@@ -300,26 +320,6 @@ $left-gutter: 64px;
     font-size: $font-14px;
     position: relative;
 
-    &.mx_EventTile_info {
-        padding-top: 0;
-
-        .mx_EventTile_e2eIcon {
-            top: 0;
-        }
-
-        .mx_EventTile_avatar {
-            top: initial;
-            inset-inline-start: $left-gutter;
-            height: 14px;
-        }
-
-        .mx_EventTile_line {
-            .mx_MessageTimestamp {
-                top: 0;
-            }
-        }
-    }
-
     /* this is used for the tile for the event which is selected via the URL.
      * TODO: ultimately we probably want some transition on here.
      */

From cc281c8b9e3355b75958df5440e670cc98a29af4 Mon Sep 17 00:00:00 2001
From: Suguru Hirahara <luixxiul@users.noreply.github.com>
Date: Wed, 29 Jun 2022 16:19:26 +0900
Subject: [PATCH 05/13] Apply the style rule for mx_MessageTimestamp on info
 event tile line to group layout only

Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
---
 res/css/views/rooms/_EventTile.scss | 10 ++++------
 1 file changed, 4 insertions(+), 6 deletions(-)

diff --git a/res/css/views/rooms/_EventTile.scss b/res/css/views/rooms/_EventTile.scss
index 4455b369b65..781f49e1c03 100644
--- a/res/css/views/rooms/_EventTile.scss
+++ b/res/css/views/rooms/_EventTile.scss
@@ -202,12 +202,6 @@ $left-gutter: 64px;
                 inset-inline-start: $left-gutter;
                 height: 14px;
             }
-
-            .mx_EventTile_line {
-                .mx_MessageTimestamp {
-                    top: 0;
-                }
-            }
         }
 
         &.mx_EventTile_continuation .mx_EventTile_line {
@@ -302,6 +296,10 @@ $left-gutter: 64px;
             .mx_EventTile_line {
                 padding: $spacing-block-start 0 $spacing-block-end;
                 padding-left: calc($left-gutter + 20px); // override padding-left $left-gutter
+
+                .mx_MessageTimestamp {
+                    top: 0;
+                }
             }
         }
     }

From ecca5143945765e1f0c0881edb9391d30f6c82db Mon Sep 17 00:00:00 2001
From: Suguru Hirahara <luixxiul@users.noreply.github.com>
Date: Tue, 5 Jul 2022 20:59:05 +0900
Subject: [PATCH 06/13] Apply zero padding-top to modern/group layout only (IRC
 layout has zero padding by default)

Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
---
 res/css/views/rooms/_EventTile.scss | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/res/css/views/rooms/_EventTile.scss b/res/css/views/rooms/_EventTile.scss
index 781f49e1c03..3b41f3cdf8e 100644
--- a/res/css/views/rooms/_EventTile.scss
+++ b/res/css/views/rooms/_EventTile.scss
@@ -191,8 +191,6 @@ $left-gutter: 64px;
         }
 
         &.mx_EventTile_info {
-            padding-top: 0;
-
             .mx_EventTile_e2eIcon {
                 top: 0;
             }
@@ -288,6 +286,8 @@ $left-gutter: 64px;
             $spacing-block-start: 3px;
             $spacing-block-end: 2px;
 
+            padding-top: 0;
+
             .mx_EventTile_avatar,
             .mx_EventTile_e2eIcon {
                 margin: $spacing-block-start 0 $spacing-block-end;

From e61fe4cc38ff6e36a782865506d190c6817c9be7 Mon Sep 17 00:00:00 2001
From: Suguru Hirahara <luixxiul@users.noreply.github.com>
Date: Tue, 5 Jul 2022 21:09:22 +0900
Subject: [PATCH 07/13] Apply avatar position settings to modern/group layout
 only

Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
---
 res/css/views/rooms/_EventTile.scss | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/res/css/views/rooms/_EventTile.scss b/res/css/views/rooms/_EventTile.scss
index 3b41f3cdf8e..aeccecbb37d 100644
--- a/res/css/views/rooms/_EventTile.scss
+++ b/res/css/views/rooms/_EventTile.scss
@@ -196,8 +196,6 @@ $left-gutter: 64px;
             }
 
             .mx_EventTile_avatar {
-                top: initial;
-                inset-inline-start: $left-gutter;
                 height: 14px;
             }
         }
@@ -293,6 +291,11 @@ $left-gutter: 64px;
                 margin: $spacing-block-start 0 $spacing-block-end;
             }
 
+            .mx_EventTile_avatar {
+                top: initial;
+                inset-inline-start: $left-gutter;
+            }
+
             .mx_EventTile_line {
                 padding: $spacing-block-start 0 $spacing-block-end;
                 padding-left: calc($left-gutter + 20px); // override padding-left $left-gutter

From c971486ff8c2048b211375aa1824e7194d2c4370 Mon Sep 17 00:00:00 2001
From: Suguru Hirahara <luixxiul@users.noreply.github.com>
Date: Wed, 6 Jul 2022 18:30:26 +0900
Subject: [PATCH 08/13] Maintain the style block for avatar on info event tile
 in IRC layout on _EventTile.scss

Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
---
 res/css/views/rooms/_EventTile.scss | 8 ++++++++
 res/css/views/rooms/_IRCLayout.scss | 6 ------
 2 files changed, 8 insertions(+), 6 deletions(-)

diff --git a/res/css/views/rooms/_EventTile.scss b/res/css/views/rooms/_EventTile.scss
index aeccecbb37d..2b2953f3de1 100644
--- a/res/css/views/rooms/_EventTile.scss
+++ b/res/css/views/rooms/_EventTile.scss
@@ -209,6 +209,14 @@ $left-gutter: 64px;
         .mx_MessageTimestamp {
             text-align: right;
         }
+
+        &.mx_EventTile_info {
+            .mx_EventTile_avatar {
+                left: calc(var(--name-width) + 10px + var(--icon-width));
+                top: 0;
+                margin-right: var(--right-padding);
+            }
+        }
     }
 
     &[data-layout=group] {
diff --git a/res/css/views/rooms/_IRCLayout.scss b/res/css/views/rooms/_IRCLayout.scss
index 566338f966b..15f7cae39e8 100644
--- a/res/css/views/rooms/_IRCLayout.scss
+++ b/res/css/views/rooms/_IRCLayout.scss
@@ -162,12 +162,6 @@ $irc-line-height: $font-18px;
     }
 
     .mx_EventTile.mx_EventTile_info {
-        .mx_EventTile_avatar {
-            left: calc(var(--name-width) + 10px + var(--icon-width));
-            top: 0;
-            margin-right: var(--right-padding);
-        }
-
         .mx_EventTile_line {
             left: calc(var(--name-width) + 10px + var(--icon-width));
         }

From 902a283b98e8a8af710564c6511c2e3ad1e86c80 Mon Sep 17 00:00:00 2001
From: Suguru Hirahara <luixxiul@users.noreply.github.com>
Date: Thu, 7 Jul 2022 00:54:13 +0900
Subject: [PATCH 09/13] Remove obsolete style block

Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
---
 res/css/views/rooms/_EventTile.scss | 4 ----
 1 file changed, 4 deletions(-)

diff --git a/res/css/views/rooms/_EventTile.scss b/res/css/views/rooms/_EventTile.scss
index 2b2953f3de1..f9bddf72e83 100644
--- a/res/css/views/rooms/_EventTile.scss
+++ b/res/css/views/rooms/_EventTile.scss
@@ -395,10 +395,6 @@ $left-gutter: 64px;
     }
 
     &[data-layout=irc] {
-        .mx_EventTile_info .mx_EventTile_line {
-            padding-left: 0; // Override .mx_EventTile:not([data-layout="bubble"]).mx_EventTile_info .mx_EventTile_line
-        }
-
         .mx_EventTile_line .mx_RedactedBody {
             padding-left: 24px; // 25px - 1px
 

From 997756e0d851df885d982a036a87c067e6163390 Mon Sep 17 00:00:00 2001
From: Suguru Hirahara <luixxiul@users.noreply.github.com>
Date: Thu, 7 Jul 2022 20:25:44 +0900
Subject: [PATCH 10/13] Remove inline padding setting from mx_EventTile_line

Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
---
 res/css/views/rooms/_EventTile.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/res/css/views/rooms/_EventTile.scss b/res/css/views/rooms/_EventTile.scss
index 6502e672dbd..364f14b7de2 100644
--- a/res/css/views/rooms/_EventTile.scss
+++ b/res/css/views/rooms/_EventTile.scss
@@ -349,7 +349,7 @@ $left-gutter: 64px;
             }
 
             .mx_EventTile_line {
-                padding: $spacing-block-start 0 $spacing-block-end;
+                padding-block: $spacing-block-start $spacing-block-end;
                 padding-left: calc($left-gutter + 20px); // override padding-left $left-gutter
 
                 .mx_MessageTimestamp {

From d8dde64d2e81f5bb8e720a5ed7346367a4edbae6 Mon Sep 17 00:00:00 2001
From: Suguru Hirahara <luixxiul@users.noreply.github.com>
Date: Sat, 9 Jul 2022 12:00:01 +0900
Subject: [PATCH 11/13] Use a correct variable

Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
---
 res/css/views/rooms/_EventTile.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/res/css/views/rooms/_EventTile.scss b/res/css/views/rooms/_EventTile.scss
index 1a922e75f1b..a5db667c23c 100644
--- a/res/css/views/rooms/_EventTile.scss
+++ b/res/css/views/rooms/_EventTile.scss
@@ -354,7 +354,7 @@ $left-gutter: 64px;
 
             .mx_EventTile_line {
                 padding-block: $spacing-block-start $spacing-block-end;
-                padding-left: calc($left-gutter + 20px); // override padding-left $left-gutter
+                padding-inline-start: calc(var(--EventTile_group_line-spacing-inline-start) + 20px); // 20px: avatar area
 
                 .mx_MessageTimestamp {
                     top: 0;

From b6f82825c4b3fbb96774abb2cff8d0f7eee20f49 Mon Sep 17 00:00:00 2001
From: Suguru Hirahara <luixxiul@users.noreply.github.com>
Date: Sat, 9 Jul 2022 13:22:47 +0900
Subject: [PATCH 12/13] Fix misalignment of avatars and textual events on IRC
 layout

Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
---
 res/css/views/rooms/_EventTile.scss | 6 ++----
 res/css/views/rooms/_IRCLayout.scss | 4 +++-
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/res/css/views/rooms/_EventTile.scss b/res/css/views/rooms/_EventTile.scss
index a5db667c23c..e6ac62e3e06 100644
--- a/res/css/views/rooms/_EventTile.scss
+++ b/res/css/views/rooms/_EventTile.scss
@@ -198,10 +198,6 @@ $left-gutter: 64px;
             .mx_EventTile_e2eIcon {
                 top: 0;
             }
-
-            .mx_EventTile_avatar {
-                height: 14px;
-            }
         }
 
         &.mx_EventTile_continuation .mx_EventTile_line {
@@ -263,6 +259,7 @@ $left-gutter: 64px;
                 left: var(--EventTile_irc_line_info-inset-inline-start);
                 top: 0;
                 margin-right: var(--right-padding);
+                padding-block: var(--EventTile_irc_line-padding-block);
             }
         }
     }
@@ -350,6 +347,7 @@ $left-gutter: 64px;
             .mx_EventTile_avatar {
                 top: initial;
                 inset-inline-start: $left-gutter;
+                height: 14px;
             }
 
             .mx_EventTile_line {
diff --git a/res/css/views/rooms/_IRCLayout.scss b/res/css/views/rooms/_IRCLayout.scss
index 673389e496b..ca3ab5505cc 100644
--- a/res/css/views/rooms/_IRCLayout.scss
+++ b/res/css/views/rooms/_IRCLayout.scss
@@ -24,6 +24,8 @@ $irc-line-height: $font-18px;
     line-height: $irc-line-height !important;
 
     .mx_EventTile {
+        --EventTile_irc_line-padding-block: 1px;
+
         // timestamps are links which shouldn't be underlined
         > a {
             text-decoration: none;
@@ -132,7 +134,7 @@ $irc-line-height: $font-18px;
             .mx_MTextBody {
                 display: inline-block;
                 // add a 1px padding top and bottom because our larger emoji font otherwise gets cropped by anti-zalgo
-                padding: 1px 0;
+                padding: var(--EventTile_irc_line-padding-block) 0;
             }
 
             .mx_ReplyTile {

From 90f1f3c1f7265b31ca712608175565e6d69fff3f Mon Sep 17 00:00:00 2001
From: Suguru Hirahara <luixxiul@users.noreply.github.com>
Date: Sat, 9 Jul 2022 13:39:53 +0900
Subject: [PATCH 13/13] Align avatars and hidden events on IRC layout

Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
---
 res/css/views/rooms/_IRCLayout.scss | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/res/css/views/rooms/_IRCLayout.scss b/res/css/views/rooms/_IRCLayout.scss
index ca3ab5505cc..cc358d212e9 100644
--- a/res/css/views/rooms/_IRCLayout.scss
+++ b/res/css/views/rooms/_IRCLayout.scss
@@ -131,6 +131,7 @@ $irc-line-height: $font-18px;
         .mx_EventTile_line {
             .mx_EventTile_e2eIcon,
             .mx_TextualEvent,
+            .mx_ViewSourceEvent,
             .mx_MTextBody {
                 display: inline-block;
                 // add a 1px padding top and bottom because our larger emoji font otherwise gets cropped by anti-zalgo
@@ -168,6 +169,7 @@ $irc-line-height: $font-18px;
             left: var(--EventTile_irc_line_info-inset-inline-start);
         }
 
+        .mx_ViewSourceEvent, // For hidden events
         .mx_TextualEvent {
             line-height: $irc-line-height;
         }