Fix padding of messages in threads (#8574)

* Apply the padding setting of EventTile_line of ThreadView to TimelineCard Set 2px padding-top and padding-bottom property to EventTile_line on IRC/modern layout of TimelineCard. Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> f Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Move position property of mx_EventTile_e2eIcon from ThreadPanel to TimelineCard The E2E icon is available only on TimelineCard. Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * yarn run lint:style Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
matrix-org · May 13, 2022 · 1fc8009 · 1fc8009
1 parent b331099
commit 1fc8009
Show file tree

Hide file tree

Showing 4 changed files with 13 additions and 19 deletions.
diff --git a/res/css/views/right_panel/_BaseCard.scss b/res/css/views/right_panel/_BaseCard.scss
@@ -15,6 +15,8 @@ limitations under the License.
 */
 
 .mx_BaseCard {
+    --BaseCard_EventTile_line-padding-block: 2px;
+
     padding: 0 8px;
     overflow: hidden;
     display: flex;

diff --git a/res/css/views/right_panel/_ThreadPanel.scss b/res/css/views/right_panel/_ThreadPanel.scss
@@ -201,12 +201,6 @@ limitations under the License.
         }
     }
 
-    .mx_EventTile:not([data-layout=bubble]) {
-        .mx_EventTile_e2eIcon {
-            left: 8px;
-        }
-    }
-
     .mx_MessageComposer {
         background-color: $background;
         border-radius: 8px;

diff --git a/res/css/views/right_panel/_TimelineCard.scss b/res/css/views/right_panel/_TimelineCard.scss
@@ -57,6 +57,12 @@ limitations under the License.
         .mx_EventTile_line {
             padding-inline-start: $left-gutter;
             padding-inline-end: 36px;
+            padding-top: var(--BaseCard_EventTile_line-padding-block);
+            padding-bottom: var(--BaseCard_EventTile_line-padding-block);
+
+            .mx_EventTile_e2eIcon {
+                inset-inline-start: 8px;
+            }
         }
 
         .mx_DisambiguatedProfile,
@@ -109,10 +115,6 @@ limitations under the License.
             > .mx_DisambiguatedProfile {
                 margin-left: 36px;
             }
-
-            .mx_EventTile_line {
-                padding-bottom: 8px;
-            }
         }
     }
 

diff --git a/res/css/views/rooms/_EventTile.scss b/res/css/views/rooms/_EventTile.scss
@@ -869,6 +869,11 @@ $threadInfoLineHeight: calc(2 * $font-12px); // See: _commons.scss
 
         &:not([data-layout=bubble]) {
             padding-top: $spacing-16;
+
+            .mx_EventTile_line {
+                padding-top: var(--BaseCard_EventTile_line-padding-block);
+                padding-bottom: var(--BaseCard_EventTile_line-padding-block);
+            }
         }
     }
 
@@ -980,13 +985,4 @@ $threadInfoLineHeight: calc(2 * $font-12px); // See: _commons.scss
         padding-right: 11px; // align with right edge of input
         margin-right: 0; // align with right edge of background
     }
-
-    .mx_GroupLayout {
-        .mx_EventTile {
-            .mx_EventTile_line {
-                padding-top: 2px;
-                padding-bottom: 2px;
-            }
-        }
-    }
 }