From f5bc3478983b8dd702649b422d8f268b48492da3 Mon Sep 17 00:00:00 2001
From: warrickct <warrickct@gmail.com>
Date: Wed, 2 Mar 2022 12:29:44 +1100
Subject: [PATCH] Fix conversation header overlapping at small widths.

---
 .../conversation/ConversationHeader.tsx       | 30 +++++++------------
 1 file changed, 11 insertions(+), 19 deletions(-)

diff --git a/ts/components/conversation/ConversationHeader.tsx b/ts/components/conversation/ConversationHeader.tsx
index 8aee1d9d2..877a948b3 100644
--- a/ts/components/conversation/ConversationHeader.tsx
+++ b/ts/components/conversation/ConversationHeader.tsx
@@ -363,22 +363,20 @@ export const ConversationHeaderWithDetails = () => {
             <TripleDotsMenu triggerId={triggerId} showBackButton={isMessageDetailOpened} />
             <ConversationHeaderTitle />
           </div>
+          {!isKickedFromGroup && <ExpirationLength expirationSettingName={expirationSettingName} />}
         </div>
-        {!isKickedFromGroup && <ExpirationLength expirationSettingName={expirationSettingName} />}
 
         {!isSelectionMode && (
-          <RelativePositionAnchor>
-            <ConversationHeaderButtonContainer>
-              <CallButton />
-              <AvatarHeader
-                onAvatarClick={() => {
-                  dispatch(openRightPanel());
-                }}
-                pubkey={selectedConvoKey}
-                showBackButton={isMessageDetailOpened}
-              />
-            </ConversationHeaderButtonContainer>
-          </RelativePositionAnchor>
+          <ConversationHeaderButtonContainer>
+            <CallButton />
+            <AvatarHeader
+              onAvatarClick={() => {
+                dispatch(openRightPanel());
+              }}
+              pubkey={selectedConvoKey}
+              showBackButton={isMessageDetailOpened}
+            />
+          </ConversationHeaderButtonContainer>
         )}
 
         <ConversationHeaderMenu triggerId={triggerId} />
@@ -389,13 +387,7 @@ export const ConversationHeaderWithDetails = () => {
   );
 };
 
-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;