fix: mobile header layout overlap (#1066)

* fix: prevent header icon row from overlapping channel name on mobile

* fix: prevent header icon row from overlapping channel name on mobile

- Add flex-wrap to header for natural content wrapping
- Set min-width on channel description to prevent over-shrinking
- Add responsive styles for icon row at narrow widths (≤380px)

---------

Co-authored-by: dodaa08 <dodaa08@users.noreply.github.com>

Author: dodaa08

packages/react/src/views/ChatHeader/ChatHeader.js

@@ -399,6 +399,9 @@ const ChatHeader = ({
                       <div
                         css={css`
                           font-size: ${fullScreen ? '1.3rem' : '1.25rem'};
+                          overflow: hidden;
+                          text-overflow: ellipsis;
+                          white-space: nowrap;
                         `}
                       >
                         {channelInfo.name || channelName || 'channelName'}

packages/react/src/views/ChatHeader/ChatHeader.styles.js

@@ -18,6 +18,8 @@ const getChatHeaderStyles = ({ theme, mode }) => {
       padding: 0 0.75rem;
       justify-content: space-between;
       width: 100%;
+      flex-wrap: wrap;
+      gap: 0.5rem;
     `,
 
     chatHeaderParent: css`
@@ -42,20 +44,30 @@ const getChatHeaderStyles = ({ theme, mode }) => {
     channelDescription: css`
       ${rowCentreAlign}
       flex: 1;
-      min-width: 0;
+      min-width: 120px;
       gap: 0.5rem;
+      overflow: hidden;
     `,
 
     chatHeaderIconRow: css`
       ${rowCentreAlign}
-      position:relative;
+      position: relative;
       gap: 0.5rem;
+      flex-shrink: 0;
+      @media (max-width: 380px) {
+        gap: 0.25rem;
+        flex-wrap: wrap;
+        justify-content: flex-end;
+      }
     `,
     channelName: css`
       display: flex;
       align-items: center;
       gap: 0.1rem;
       cursor: pointer;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
     `,
     channelTopic: css`
       opacity: 0.8rem;