From 23babbb8ab5e81b3d0e9c4cac0af235b38347549 Mon Sep 17 00:00:00 2001
From: Suguru Hirahara <luixxiul@users.noreply.github.com>
Date: Sat, 21 May 2022 20:19:56 +0000
Subject: [PATCH] Normalize inline spacing of image and file button on
 ThreadView (#8664)

---
 res/css/views/rooms/_EventBubbleTile.scss |  4 +++-
 res/css/views/rooms/_EventTile.scss       | 25 ++++++++---------------
 2 files changed, 12 insertions(+), 17 deletions(-)

diff --git a/res/css/views/rooms/_EventBubbleTile.scss b/res/css/views/rooms/_EventBubbleTile.scss
index 1625c3171ae..f21fa5cd9f0 100644
--- a/res/css/views/rooms/_EventBubbleTile.scss
+++ b/res/css/views/rooms/_EventBubbleTile.scss
@@ -243,10 +243,12 @@ limitations under the License.
     }
 
     .mx_EventTile_line {
+        --EventBubbleTile_line-margin-inline-end: -12px;
+
         position: relative;
         display: flex;
         gap: 5px;
-        margin: 0 -12px 0 -9px;
+        margin: 0 var(--EventBubbleTile_line-margin-inline-end) 0 -9px;
         border-top-left-radius: var(--cornerRadius);
         border-top-right-radius: var(--cornerRadius);
 
diff --git a/res/css/views/rooms/_EventTile.scss b/res/css/views/rooms/_EventTile.scss
index f49ac7da7e4..60f66339b23 100644
--- a/res/css/views/rooms/_EventTile.scss
+++ b/res/css/views/rooms/_EventTile.scss
@@ -895,7 +895,7 @@ $threadInfoLineHeight: calc(2 * $font-12px); // See: _commons.scss
             margin-inline-end: var(--BaseCard_EventTile-spacing-horizontal);
 
             .mx_EventTile_line.mx_EventTile_mediaLine {
-                padding: 0 !important;
+                padding: 0;
                 max-width: 100%;
 
                 .mx_MFileBody {
@@ -907,7 +907,7 @@ $threadInfoLineHeight: calc(2 * $font-12px); // See: _commons.scss
                 align-items: flex-end;
 
                 .mx_EventTile_line.mx_EventTile_mediaLine {
-                    margin: 0 -13px 0 0; // align with normal messages
+                    margin: 0 var(--EventBubbleTile_line-margin-inline-end) 0 0; // align with normal messages
                 }
             }
         }
@@ -935,6 +935,13 @@ $threadInfoLineHeight: calc(2 * $font-12px); // See: _commons.scss
             }
         }
 
+        .mx_MFileBody,
+        .mx_MImageBody {
+            display: block; // Apply margin to span element
+            margin-inline-start: var(--ThreadView_group_spacing-start);
+            margin-inline-end: var(--ThreadView_group_spacing-end);
+        }
+
         .mx_ReplyChain_wrapper {
             .mx_MLocationBody {
                 margin-inline-start: 0;
@@ -965,20 +972,6 @@ $threadInfoLineHeight: calc(2 * $font-12px); // See: _commons.scss
                 }
             }
         }
-
-        .mx_EventTile_mediaLine {
-            padding-inline-start: var(--ThreadView_group_spacing-start);
-        }
-    }
-
-    .mx_EventTile_mediaLine {
-        padding-inline-start: var(--BaseCard_EventTile-spacing-horizontal);
-        padding-right: 50px;
-
-        .mx_MImageBody {
-            margin: 0;
-            padding: 0;
-        }
     }
 
     .mx_MessageComposer_sendMessage {