[MM-57900] With long instance names, the About message gets cutoff in menu item (#26955)

webapp/channels/src/components/widgets/menu/menu_items/menu_item.scss

@@ -46,8 +46,15 @@
             line-height: 16px;
         }
 
+        div.text{
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+        }
+
         span.MenuItem__primary-text {
             display: inline-flex;
+            max-width: 100%;
             padding: 5px 0;
             line-height: 22px;
             white-space: nowrap;

webapp/channels/src/components/widgets/menu/menu_items/menu_item.test.tsx

@@ -44,7 +44,11 @@ describe('components/MenuItem', () => {
                     >
                       test-icon
                     </span>
-                    test-text
+                    <div
+                      className="text"
+                    >
+                      test-text
+                    </div>
                   </React.Fragment>
                 }
               />

webapp/channels/src/components/widgets/menu/menu_items/menu_item.tsx

@@ -34,7 +34,7 @@ export default function menuItem(Component: React.ComponentType<any>) {
                 textProp = (
                     <>
                         <span className='icon'>{icon}</span>
-                        {text}
+                        <div className='text'>{text}</div>
                     </>
                 );
             }