From 503495fdcf23032f57c1f8d98e1271d0adec7015 Mon Sep 17 00:00:00 2001
From: James Acklin <james.acklin@gmail.com>
Date: Fri, 19 Mar 2021 15:11:11 -0400
Subject: [PATCH] chat: prevent marker text from wrapping

---
 .../apps/chat/components/ChatMessage.tsx      | 29 ++++++++++++++-----
 1 file changed, 22 insertions(+), 7 deletions(-)

diff --git a/pkg/interface/src/views/apps/chat/components/ChatMessage.tsx b/pkg/interface/src/views/apps/chat/components/ChatMessage.tsx
index 13bab6db49..8f44bf2b77 100644
--- a/pkg/interface/src/views/apps/chat/components/ChatMessage.tsx
+++ b/pkg/interface/src/views/apps/chat/components/ChatMessage.tsx
@@ -58,7 +58,14 @@ export const DayBreak = ({ when, shimTop = false }: DayBreakProps) => (
     mt={shimTop ? '-8px' : '0'}
   >
     <Rule borderColor='lightGray' />
-    <Text gray flexShrink='0' fontSize={0} px={2}>
+    <Text
+      gray
+      flexShrink='0'
+      whiteSpace='nowrap'
+      textAlign='center'
+      fontSize={0}
+      px={2}
+    >
       {moment(when).calendar(null, { sameElse: DATESTAMP_FORMAT })}
     </Text>
     <Rule borderColor='lightGray' />
@@ -92,7 +99,14 @@ export const UnreadMarker = React.forwardRef(
       >
         <Rule borderColor='lightBlue' />
         <VisibilitySensor onChange={setVisible}>
-          <Text color='blue' fontSize={0} flexShrink='0' px={2}>
+          <Text
+            color='blue'
+            fontSize={0}
+            flexShrink='0'
+            whiteSpace='nowrap'
+            textAlign='center'
+            px={2}
+          >
             New messages below
           </Text>
         </VisibilitySensor>
@@ -370,10 +384,11 @@ export const MessageAuthor = ({
     .unix(msg['time-sent'] / 1000)
     .format(DATESTAMP_FORMAT);
   const contact =
-    ( ( (msg.author === window.ship && showOurContact) ||
-         msg.author !== window.ship) &&
-      `~${msg.author}` in contacts
-    ) ? contacts[`~${msg.author}`] : false;
+    ((msg.author === window.ship && showOurContact) ||
+      msg.author !== window.ship) &&
+    `~${msg.author}` in contacts
+      ? contacts[`~${msg.author}`]
+      : false;
 
   const showNickname = useShowNickname(contact);
   const { hideAvatars } = useSettingsState(selectCalmState);
@@ -416,7 +431,7 @@ export const MessageAuthor = ({
     contact?.avatar && !hideAvatars ? (
       <BaseImage
         display='inline-block'
-        referrerPolicy="no-referrer"
+        referrerPolicy='no-referrer'
         style={{ objectFit: 'cover' }}
         src={contact.avatar}
         height={24}