Fix padding of messages in threads (#8574)

luixxiul · web-flow · commit 1fc80091091a · 2022-05-13T12:04:27.000-06:00
* 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 &lt;luixxiul@users.noreply.github.com&gt;

f

Signed-off-by: Suguru Hirahara &lt;luixxiul@users.noreply.github.com&gt;

* Move position property of mx_EventTile_e2eIcon from ThreadPanel to TimelineCard

The E2E icon is available only on TimelineCard.

Signed-off-by: Suguru Hirahara &lt;luixxiul@users.noreply.github.com&gt;

* yarn run lint:style

Signed-off-by: Suguru Hirahara &lt;luixxiul@users.noreply.github.com&gt;
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;
-            }
-        }
-    }
 }

Original file line number	Diff line number	Diff line change
`@@ -201,12 +201,6 @@ limitations under the License.`
`201`	`201`	`}`
`202`	`202`	`}`
`203`	`203`
`204`		`- .mx_EventTile:not([data-layout=bubble]) {`
`205`		`- .mx_EventTile_e2eIcon {`
`206`		`- left: 8px;`
`207`		`- }`
`208`		`- }`
`209`		`-`
`210`	`204`	`.mx_MessageComposer {`
`211`	`205`	`background-color: $background;`
`212`	`206`	`border-radius: 8px;`
Original file line number	Diff line number	Diff line change
`@@ -57,6 +57,12 @@ limitations under the License.`
`57`	`57`	`.mx_EventTile_line {`
`58`	`58`	`padding-inline-start: $left-gutter;`
`59`	`59`	`padding-inline-end: 36px;`
	`60`	`+ padding-top: var(--BaseCard_EventTile_line-padding-block);`
	`61`	`+ padding-bottom: var(--BaseCard_EventTile_line-padding-block);`
	`62`	`+`
	`63`	`+ .mx_EventTile_e2eIcon {`
	`64`	`+ inset-inline-start: 8px;`
	`65`	`+ }`
`60`	`66`	`}`
`61`	`67`
`62`	`68`	`.mx_DisambiguatedProfile,`
`@@ -109,10 +115,6 @@ limitations under the License.`
`109`	`115`	`> .mx_DisambiguatedProfile {`
`110`	`116`	`margin-left: 36px;`
`111`	`117`	`}`
`112`		`-`
`113`		`- .mx_EventTile_line {`
`114`		`- padding-bottom: 8px;`
`115`		`- }`
`116`	`118`	`}`
`117`	`119`	`}`
`118`	`120`
Original file line number	Diff line number	Diff line change
`@@ -869,6 +869,11 @@ $threadInfoLineHeight: calc(2 * $font-12px); // See: _commons.scss`
`869`	`869`
`870`	`870`	`&:not([data-layout=bubble]) {`
`871`	`871`	`padding-top: $spacing-16;`
	`872`	`+`
	`873`	`+ .mx_EventTile_line {`
	`874`	`+ padding-top: var(--BaseCard_EventTile_line-padding-block);`
	`875`	`+ padding-bottom: var(--BaseCard_EventTile_line-padding-block);`
	`876`	`+ }`
`872`	`877`	`}`
`873`	`878`	`}`
`874`	`879`
`@@ -980,13 +985,4 @@ $threadInfoLineHeight: calc(2 * $font-12px); // See: _commons.scss`
`980`	`985`	`padding-right: 11px; // align with right edge of input`
`981`	`986`	`margin-right: 0; // align with right edge of background`
`982`	`987`	`}`
`983`		`-`
`984`		`- .mx_GroupLayout {`
`985`		`- .mx_EventTile {`
`986`		`- .mx_EventTile_line {`
`987`		`- padding-top: 2px;`
`988`		`- padding-bottom: 2px;`
`989`		`- }`
`990`		`- }`
`991`		`- }`
`992`	`988`	`}`