[MM-50324]: Increased nickname length from 22 to 64 (#22670)

webapp/channels/src/components/channel_invite_modal/__snapshots__/channel_invite_modal.test.tsx.snap

@@ -248,15 +248,12 @@ exports[`components/channel_invite_modal should match snapshot for channel_invit
     <div
       className="more-modal__name"
     >
-      <span>
+      <span
+        className="d-flex"
+      >
+        <span />
         <span
-          className="light"
-          style={
-            Object {
-              "position": "absolute",
-              "right": 20,
-            }
-          }
+          className="ml-2 light flex-auto"
         />
       </span>
     </div>

webapp/channels/src/components/channel_invite_modal/channel_invite_modal.tsx

@@ -271,22 +271,20 @@ export default class ChannelInviteModal extends React.PureComponent<Props, State
                 />
                 <div className='more-modal__details'>
                     <div className='more-modal__name'>
-                        <span>
-                            {displayName}
+                        <span className='d-flex'>
+                            <span>{displayName}</span>
                             {option.is_bot && <BotTag/>}
                             {isGuest(option.roles) && <GuestTag className='popoverlist'/>}
                             {displayName === option.username ?
                                 null :
                                 <span
-                                    className='ml-2 light'
-                                    style={{fontSize: '12px'}}
+                                    className='ml-2 light flex-auto'
                                 >
                                     {'@'}{option.username}
                                 </span>
                             }
                             <span
-                                style={{position: 'absolute', right: 20}}
-                                className='light'
+                                className='ml-2 light flex-auto'
                             >
                                 {userMapping[option.id]}
                             </span>

webapp/channels/src/components/channel_members_rhs/member.tsx

@@ -33,43 +33,49 @@ const Avatar = styled.div`
 `;
 
 const UserInfo = styled.div`
+    display: flex;
     flex: 1;
+    cursor: pointer;
     overflow-x: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
-    cursor: pointer;
 `;
 
 const DisplayName = styled.span`
-    display: inline-flex;
-    gap: 8px;
+    display: inline;
+    overflow: hidden;
     margin-left: 8px;
-    font-size: 14px;
-    line-height: 20px;
     color: var(--center-channel-color);
+    font-size: 14px;
+    gap: 8px;
+    line-height: 20px;
+    text-overflow: ellipsis;
 `;
 
 const Username = styled.span`
-    margin-left: 8px;
+    margin-left: 4px;
+    color: rgba(var(--center-channel-color-rgb), 0.56);
     font-size: 12px;
     line-height: 18px;
-    color: rgba(var(--center-channel-color-rgb), 0.56);
 `;
 
 const SendMessage = styled.button`
     display: none;
-    border: 0;
-    background-color: transparent;
-    padding: 0;
     width: 24px;
     height: 24px;
+    padding: 0;
+    border: 0;
+    margin-left: 8px;
+    background-color: transparent;
     border-radius: 4px;
+
     &:hover {
         background-color: rgba(var(--center-channel-color-rgb), 0.12);
     }
+
     .icon {
-        font-size: 14.4px;
         color: rgba(var(--center-channel-color-rgb), 0.56);
+        font-size: 14.4px;
     };
 `;
 
@@ -123,6 +129,7 @@ const Member = ({className, channel, member, index, totalUsers, editing, actions
     return (
         <div
             className={className}
+            style={{height: '48px'}}
             data-testid={`memberline-${member.user.id}`}
         >
 
@@ -167,8 +174,14 @@ const Member = ({className, channel, member, index, totalUsers, editing, actions
                             userID={member.user.id}
                             showTooltip={true}
                             emojiSize={16}
+                            spanStyle={{
+                                display: 'flex',
+                                flex: '0 0 auto',
+                                alignItems: 'center',
+                            }}
                             emojiStyle={{
                                 marginLeft: '8px',
+                                alignItems: 'center',
                             }}
                         />
                     </UserInfo>
@@ -242,18 +255,23 @@ export default styled(Member)`
 
         ${SendMessage} {
             display: block;
+            flex: 0 0 auto;
         }
     }
 
     .ProfileSpan {
         display: flex;
+        overflow: hidden;
+        width: 100%;
         flex-direction: row;
         align-items: center;
+        // This padding is to make sure the status icon doesnt get clipped off because of the overflow
+        padding: 4px 0;
         margin-right: auto;
     }
 
     .MenuWrapper {
-        font-weight: 600;
         font-size: 11px;
+        font-weight: 600;
     }
 `;

webapp/channels/src/components/more_direct_channels/list_item/user_details/user_details.tsx

@@ -76,6 +76,11 @@ export default function UserDetails(props: Props): JSX.Element {
                         userID={option.id}
                         showTooltip={true}
                         emojiSize={15}
+                        spanStyle={{
+                            display: 'flex',
+                            flex: '0 0 auto',
+                            alignItems: 'center',
+                        }}
                     />
                 </div>
                 {!isBot && (

webapp/channels/src/components/user_list_row/user_list_row.tsx

@@ -153,6 +153,11 @@ const UserListRow = ({user, status, extraInfo = [], actions = [], actionProps, a
                             userID={user.id}
                             emojiSize={16}
                             showTooltip={true}
+                            spanStyle={{
+                                display: 'flex',
+                                flex: '0 0 auto',
+                                alignItems: 'center',
+                            }}
                         />
                     </CustomStatus>
 

webapp/channels/src/components/widgets/inputs/users_emails_input.scss

@@ -160,7 +160,9 @@
         }
 
         .fullname {
+            overflow: hidden;
             opacity: 0.5;
+            text-overflow: ellipsis;
 
             &::before {
                 padding: 5px;
@@ -169,7 +171,9 @@
         }
 
         .nickname {
+            overflow: hidden;
             opacity: 0.5;
+            text-overflow: ellipsis;
 
             &::before {
                 content: "(";

webapp/channels/src/sass/components/_suggestion-list.scss

@@ -204,6 +204,7 @@
         white-space: nowrap;
 
         .suggestion-list__main {
+            display: flex;
             overflow: hidden;
             width: 100%;
             color: rgba(var(--center-channel-color-rgb), 1);
@@ -225,7 +226,11 @@
 
         .suggestion-list__main {
             width: unset;
-            max-width: 70%;
+
+            > span:first-child {
+                overflow: hidden;
+                text-overflow: ellipsis;
+            }
         }
 
         .badge {

webapp/channels/src/sass/layout/_headers.scss

@@ -555,6 +555,7 @@
         padding: 10px 15px;
         background: $bg--gray;
         border-radius: 3px;
+        word-break: break-word;
     }
 }
 

webapp/channels/src/sass/utils/_flex.scss

@@ -18,6 +18,10 @@
     -ms-flex-preferred-size: 0;
 }
 
+.flex-auto {
+    flex: 0 0 auto;
+}
+
 .flex-wrap {
     flex-wrap: wrap;
 }

webapp/channels/src/utils/constants.tsx

@@ -1923,7 +1923,7 @@ export const Constants = {
     MAX_EMAIL_LENGTH: 128,
     MIN_USERNAME_LENGTH: 3,
     MAX_USERNAME_LENGTH: 22,
-    MAX_NICKNAME_LENGTH: 22,
+    MAX_NICKNAME_LENGTH: 64,
     MIN_PASSWORD_LENGTH: 5,
     MAX_PASSWORD_LENGTH: 64,
     MAX_POSITION_LENGTH: 128,