From ad019d0094eb9b6c1f6146f52e511e3d09c038ca Mon Sep 17 00:00:00 2001
From: Alexander Zinchuk <alx.zinchuk@gmail.com>
Date: Tue, 20 Apr 2021 18:20:06 +0300
Subject: [PATCH] Message: Fixes for appendix (#1037)

---
 src/components/middle/composer/Composer.scss        | 2 +-
 src/components/middle/composer/Composer.tsx         | 4 ++--
 src/components/middle/message/Message.tsx           | 4 ++--
 src/components/middle/message/_message-content.scss | 4 ++--
 4 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/src/components/middle/composer/Composer.scss b/src/components/middle/composer/Composer.scss
index ccbc41a0b..b1a2729de 100644
--- a/src/components/middle/composer/Composer.scss
+++ b/src/components/middle/composer/Composer.scss
@@ -161,7 +161,7 @@
   .svg-appendix {
     position: absolute;
     bottom: -.1875rem;
-    right: -.5625rem;
+    right: -.562rem; // This value is correct. Safari fix
     width: .5625rem;
     height: 1.25rem;
     transition: opacity 200ms;
diff --git a/src/components/middle/composer/Composer.tsx b/src/components/middle/composer/Composer.tsx
index 485941f32..008a56268 100644
--- a/src/components/middle/composer/Composer.tsx
+++ b/src/components/middle/composer/Composer.tsx
@@ -1,5 +1,5 @@
 import React, {
-  FC, memo, useCallback, useEffect, useMemo, useRef, useState,
+  FC, memo, useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState,
 } from '../../../lib/teact/teact';
 import { withGlobal } from '../../../lib/teact/teactn';
 
@@ -212,7 +212,7 @@ const Composer: FC<OwnProps & StateProps & DispatchProps> = ({
     }
   }, [chatId, loadScheduledHistory, lastSyncTime, threadId]);
 
-  useEffect(() => {
+  useLayoutEffect(() => {
     if (!appendixRef.current) {
       return;
     }
diff --git a/src/components/middle/message/Message.tsx b/src/components/middle/message/Message.tsx
index d31e7e2b4..90cb133af 100644
--- a/src/components/middle/message/Message.tsx
+++ b/src/components/middle/message/Message.tsx
@@ -3,7 +3,7 @@ import React, {
   FC,
   memo,
   useCallback,
-  useEffect,
+  useLayoutEffect,
   useMemo,
   useRef,
 } from '../../../lib/teact/teact';
@@ -282,7 +282,7 @@ const Message: FC<OwnProps & StateProps & DispatchProps> = ({
 
   useEnsureMessage(chatId, hasReply ? message.replyToMessageId : undefined, replyMessage, message.id);
   useFocusMessage(ref, chatId, isFocused, focusDirection, noFocusHighlight);
-  useEffect(() => {
+  useLayoutEffect(() => {
     if (!appendixRef.current) {
       return;
     }
diff --git a/src/components/middle/message/_message-content.scss b/src/components/middle/message/_message-content.scss
index 9897bef91..ab99148b7 100644
--- a/src/components/middle/message/_message-content.scss
+++ b/src/components/middle/message/_message-content.scss
@@ -130,11 +130,11 @@
       fill: var(--background-color);
     }
     .Message.own & {
-      right: -.5625rem;
+      right: -.562rem; // This value is correct. Safari fix
     }
 
     .Message:not(.own) & {
-      left: -.5625rem;
+      left: -.562rem; // This value is correct. Safari fix
     }
   }