Fix some issues with threads rendering (#8305)

matrix-org · Apr 13, 2022 · fe4683d · fe4683d
1 parent e59edb7
commit fe4683d
Show file tree

Hide file tree

Showing 7 changed files with 19 additions and 5 deletions.
diff --git a/res/css/views/right_panel/_ThreadPanel.scss b/res/css/views/right_panel/_ThreadPanel.scss
@@ -165,6 +165,10 @@ limitations under the License.
         }
     }
 
+    .mx_GenericEventListSummary > .mx_EventTile_line {
+        padding-left: 30px !important; // Override main timeline styling - align summary text with message text
+    }
+
     .mx_EventTile:not([data-layout=bubble]) {
         .mx_EventTile_e2eIcon {
             left: 8px;
@@ -212,19 +216,21 @@ limitations under the License.
     }
 
     // handling for hidden events (e.g reactions) in the thread view
-    &.mx_ThreadView .mx_GenericEventListSummary_unstyledList .mx_EventTile_info {
+    &.mx_ThreadView .mx_EventTile_info {
+        padding-top: 0 !important; // override main timeline padding
+
         .mx_EventTile_line {
             padding-left: 0 !important; // override main timeline padding
 
             .mx_EventTile_content {
-                margin-left: 54px; // align with text
-                width: calc(100% - 54px - 8px); // match width of parent
+                margin-left: 48px; // align with text
+                width: calc(100% - 48px - 8px); // match width of parent
             }
         }
 
         .mx_EventTile_avatar {
             position: absolute;
-            left: 36px !important; // override main timeline positioning
+            left: 30px !important; // override main timeline positioning
             z-index: 9; // position above the hover styling
         }
 

diff --git a/res/css/views/rooms/_EventTile.scss b/res/css/views/rooms/_EventTile.scss
@@ -762,7 +762,8 @@ $left-gutter: 64px;
         bottom: 0;
         width: 60px;
         box-sizing: border-box;
-        background: linear-gradient(270deg, $system 52.6%, transparent 100%);
+        // XXX: We use `$system-transparent` instead of `transparent` to work around a Safari <15.4 bug
+        background: linear-gradient(270deg, $system 50%, $system-transparent 100%);
 
         opacity: 0;
         transform: translateX(60px);

diff --git a/res/themes/dark/css/_dark.scss b/res/themes/dark/css/_dark.scss
@@ -7,6 +7,7 @@ $quaternary-content: #6F7882;
 $quinary-content: #394049;
 
 $system: #21262C;
+$system-transparent: rgba($system, 0.0); // XXX: workaround for Safari 15.3 linear-gradient bug
 $background: #15191E;
 $overlay-background: rgba($background, 0.85);
 

diff --git a/res/themes/legacy-dark/css/_legacy-dark.scss b/res/themes/legacy-dark/css/_legacy-dark.scss
@@ -1,5 +1,6 @@
 // Colors from Figma Compound https://www.figma.com/file/X4XTH9iS2KGJ2wFKDqkyed/Compound?node-id=559%3A741
 $system: #21262C;
+$system-transparent: rgba($system, 0.0); // XXX: workaround for Safari 15.3 linear-gradient bug
 
 // unified palette
 // try to use these colors when possible
@@ -97,6 +98,7 @@ $tertiary-content: $tertiary-fg-color;
 $quaternary-content: #6F7882;
 $quinary-content: $quaternary-content;
 $system: #21262C;
+$system-transparent: rgba($system, 0.0); // XXX: workaround for Safari 15.3 linear-gradient bug
 $background: $primary-bg-color;
 $overlay-background: rgba($background, 0.85);
 

diff --git a/res/themes/legacy-light/css/_legacy-light.scss b/res/themes/legacy-light/css/_legacy-light.scss
@@ -150,6 +150,7 @@ $tertiary-content: $tertiary-fg-color;
 $quaternary-content: #6F7882;
 $quinary-content: $quaternary-content;
 $system: #F4F6FA;
+$system-transparent: rgba($system, 0.0); // XXX: workaround for Safari 15.3 linear-gradient bug
 $background: $primary-bg-color;
 $overlay-background: rgba($background, 0.85);
 

diff --git a/res/themes/light-custom/css/_custom.scss b/res/themes/light-custom/css/_custom.scss
@@ -26,6 +26,8 @@ $secondary-content: var(--secondary-content, $secondary-content);
 $tertiary-content: var(--tertiary-content, $tertiary-content);
 $quaternary-content: var(--quaternary-content, $quaternary-content);
 $quinary-content: var(--quinary-content, $quinary-content);
+// XXX: workaround for Safari 15.3 linear-gradient bug https://github.com/vector-im/element-web/issues/21670
+$system-transparent: var(--system-transparent, rgba($system, 0.0));
 $system: var(--system, $system);
 $background: var(--background, $background);
 $panels: rgba($system, 0.9);

diff --git a/res/themes/light/css/_light.scss b/res/themes/light/css/_light.scss
@@ -34,6 +34,7 @@ $quaternary-content: #c1c6cd;
 $quinary-content: #E3E8F0;
 
 $system: #F4F6FA;
+$system-transparent: rgba($system, 0.0); // XXX: workaround for Safari 15.3 linear-gradient bug
 $background: #ffffff;
 $overlay-background: rgba($background, 0.85);