Normalize inline spacing of image and file button on ThreadView (#8664)

element-hq · May 21, 2022 · 23babbb · 23babbb
1 parent 5082d67
commit 23babbb
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 17 deletions.
diff --git 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
@@ -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 {