Fix conversation header overlapping at small widths.

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>
-            <ConversationHeaderButtonContainer>
+            <CallButton />
-              <CallButton />
+            <AvatarHeader
-              <AvatarHeader
+              onAvatarClick={() => {
-                onAvatarClick={() => {
+                dispatch(openRightPanel());
-                  dispatch(openRightPanel());
+              }}
-                }}
+              pubkey={selectedConvoKey}
-                pubkey={selectedConvoKey}
+              showBackButton={isMessageDetailOpened}
-                showBackButton={isMessageDetailOpened}
+            />
-              />
+          </ConversationHeaderButtonContainer>
-            </ConversationHeaderButtonContainer>
-          </RelativePositionAnchor>
         )}
 
         <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;