From 274fbc44441782f5e64b2bea4b629481cea519f8 Mon Sep 17 00:00:00 2001
From: automated-signal <37887102+automated-signal@users.noreply.github.com>
Date: Wed, 28 Feb 2024 15:01:07 -0600
Subject: [PATCH] Fix message gradients in ConversationPanel

Co-authored-by: Fedor Indutny <79877362+indutny-signal@users.noreply.github.com>
---
 ts/state/smart/ConversationPanel.tsx | 11 ++++++++---
 1 file changed, 8 insertions(+), 3 deletions(-)

diff --git a/ts/state/smart/ConversationPanel.tsx b/ts/state/smart/ConversationPanel.tsx
index 70dae4d0ee4..8b196e6f023 100644
--- a/ts/state/smart/ConversationPanel.tsx
+++ b/ts/state/smart/ConversationPanel.tsx
@@ -58,7 +58,9 @@ function doAnimate({
   onAnimationStarted: () => unknown;
   onAnimationDone: () => unknown;
   overlay: AnimationProps<{ backgroundColor: string }>;
-  panel: AnimationProps<{ transform: string }>;
+  panel: AnimationProps<
+    { transform: string } | { left: string } | { right: string }
+  >;
 }) {
   const animateNode = panel.ref.current;
   if (!animateNode) {
@@ -176,8 +178,11 @@ export function ConversationPanel({
         panel: {
           ref: animateRef,
           keyframes: [
-            { transform: isRTL ? 'translateX(-100%)' : 'translateX(100%)' },
-            { transform: 'translateX(0%)' },
+            // Note that we can't use translateX here because it breaks
+            // gradients for the message in message details screen.
+            // See: https://issues.chromium.org/issues/327027598
+            isRTL ? { right: '100%' } : { left: '100%' },
+            isRTL ? { right: '0' } : { left: '0' },
           ],
         },
       });