make the unread message banner on a single line

ts/components/conversation/SessionLastSeenIndicator.tsx

@@ -6,16 +6,20 @@ import { ScrollToLoadedMessageContext } from './SessionMessagesListContainer';
 
 const LastSeenBarContainer = styled.div`
   padding-bottom: 35px;
-  margin-inline-start: 10rem;
-  margin-inline-end: 10rem;
+  max-width: 300px;
+  align-self: center;
   padding-top: 28px;
-  overflow: hidden;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
 `;
 
 const LastSeenBar = styled.div`
-  width: 100%;
   height: 2px;
   background-color: var(--color-last-seen-indicator);
+  flex-grow: 1;
+  min-width: 60px;
+  flex-shrink: 0;
 `;
 
 const LastSeenText = styled.div`
@@ -25,6 +29,8 @@ const LastSeenText = styled.div`
   letter-spacing: 0.3px;
   text-transform: uppercase;
   text-align: center;
+  flex-shrink: 0;
+  margin-inline: 1rem;
 
   color: var(--color-last-seen-indicator);
 `;
@@ -50,9 +56,10 @@ export const SessionLastSeenIndicator = (props: { messageId: string }) => {
 
   return (
     <LastSeenBarContainer id="unread-indicator">
-      <LastSeenBar>
-        <LastSeenText>{window.i18n('unreadMessages')}</LastSeenText>
-      </LastSeenBar>
+      <LastSeenBar />
+      <LastSeenText>{window.i18n('unreadMessages')}</LastSeenText>
+
+      <LastSeenBar />
     </LastSeenBarContainer>
   );
 };