From 551fc4e2d7e9cd0879fc9b2a81647e49598ba88d Mon Sep 17 00:00:00 2001
From: Audric Ackermann <audric@loki.network>
Date: Thu, 10 Mar 2022 14:52:47 +1100
Subject: [PATCH] make the unread message banner on a single line

---
 .../conversation/SessionLastSeenIndicator.tsx | 21 ++++++++++++-------
 1 file changed, 14 insertions(+), 7 deletions(-)

diff --git a/ts/components/conversation/SessionLastSeenIndicator.tsx b/ts/components/conversation/SessionLastSeenIndicator.tsx
index f7efd83d0..ca41d3e44 100644
--- a/ts/components/conversation/SessionLastSeenIndicator.tsx
+++ b/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>
   );
 };