Middle Header: Fix overflowing status text (#1664)

src/components/common/GroupChatInfo.tsx

@@ -102,7 +102,7 @@ const GroupChatInfo: FC<OwnProps & StateProps> = ({
 
     if (withChatType) {
       return (
-        <div className="status" dir="auto">{lang(getChatTypeString(chat))}</div>
+        <span className="status" dir="auto">{lang(getChatTypeString(chat))}</span>
       );
     }
 
@@ -111,11 +111,11 @@ const GroupChatInfo: FC<OwnProps & StateProps> = ({
     const onlineStatus = onlineCount ? `, ${lang('OnlineCount', onlineCount, 'i')}` : undefined;
 
     return (
-      <div className="status">
+      <span className="status">
         {handle && <span className="handle">{handle}</span>}
         <span className="group-status">{groupStatus}</span>
         {onlineStatus && <span className="online-status">{onlineStatus}</span>}
-      </div>
+      </span>
     );
   }
 

src/components/common/PrivateChatInfo.tsx

@@ -110,10 +110,10 @@ const PrivateChatInfo: FC<OwnProps & StateProps> = ({
     }
 
     return (
-      <div className={`status ${isUserOnline(user, userStatus) ? 'online' : ''}`}>
+      <span className={`status ${isUserOnline(user, userStatus) ? 'online' : ''}`}>
         {withUsername && user.username && <span className="handle">{user.username}</span>}
         <span className="user-status" dir="auto">{getUserStatus(lang, user, userStatus, serverTimeOffset)}</span>
-      </div>
+      </span>
     );
   }
 

src/components/middle/MiddleHeader.scss

@@ -282,9 +282,15 @@
       }
     }
 
-    .status {
-      display: flex;
+    .status, .typing-status {
+      display: inline;
       unicode-bidi: plaintext;
+
+      @media (min-width: 1275px) {
+        #Main.right-column-open & {
+          max-width: calc(100% - var(--right-column-width));
+        }
+      }
     }
 
     .user-status {