Fix conversation header overlapping at small widths.

ts/components/conversation/ConversationHeader.tsx

@@ -363,11 +363,10 @@ export const ConversationHeaderWithDetails = () => {
             <TripleDotsMenu triggerId={triggerId} showBackButton={isMessageDetailOpened} />
             <ConversationHeaderTitle />
           </div>
-        </div>
           {!isKickedFromGroup && <ExpirationLength expirationSettingName={expirationSettingName} />}
+        </div>
 
         {!isSelectionMode && (
-          <RelativePositionAnchor>
           <ConversationHeaderButtonContainer>
             <CallButton />
             <AvatarHeader
@@ -378,7 +377,6 @@ export const ConversationHeaderWithDetails = () => {
               showBackButton={isMessageDetailOpened}
             />
           </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;