From 049f86a6e950255a91a70ed32d7c22f555d9c754 Mon Sep 17 00:00:00 2001
From: warrickct <warrickct@gmail.com>
Date: Mon, 28 Feb 2022 10:39:23 +1100
Subject: [PATCH] Fix conversation header centering alignment.

---
 .../conversation/ConversationHeader.tsx       | 34 +++++++++++++------
 1 file changed, 24 insertions(+), 10 deletions(-)

diff --git a/ts/components/conversation/ConversationHeader.tsx b/ts/components/conversation/ConversationHeader.tsx
index 93d0118d1..8aee1d9d2 100644
--- a/ts/components/conversation/ConversationHeader.tsx
+++ b/ts/components/conversation/ConversationHeader.tsx
@@ -367,16 +367,18 @@ export const ConversationHeaderWithDetails = () => {
         {!isKickedFromGroup && <ExpirationLength expirationSettingName={expirationSettingName} />}
 
         {!isSelectionMode && (
-          <>
-            <CallButton />
-            <AvatarHeader
-              onAvatarClick={() => {
-                dispatch(openRightPanel());
-              }}
-              pubkey={selectedConvoKey}
-              showBackButton={isMessageDetailOpened}
-            />
-          </>
+          <RelativePositionAnchor>
+            <ConversationHeaderButtonContainer>
+              <CallButton />
+              <AvatarHeader
+                onAvatarClick={() => {
+                  dispatch(openRightPanel());
+                }}
+                pubkey={selectedConvoKey}
+                showBackButton={isMessageDetailOpened}
+              />
+            </ConversationHeaderButtonContainer>
+          </RelativePositionAnchor>
         )}
 
         <ConversationHeaderMenu triggerId={triggerId} />
@@ -386,3 +388,15 @@ export const ConversationHeaderWithDetails = () => {
     </div>
   );
 };
+
+export const RelativePositionAnchor = styled.div`
+  position: relative;
+`;
+
+export const ConversationHeaderButtonContainer = styled.div`
+  position: absolute;
+  transform: translate(-100%, -50%);
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+`;