diff --git a/webapp/channels/src/components/widgets/menu/menu_items/menu_item.scss b/webapp/channels/src/components/widgets/menu/menu_items/menu_item.scss
index b56ade7dd0..0c6e4c2e06 100644
--- a/webapp/channels/src/components/widgets/menu/menu_items/menu_item.scss
+++ b/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;
diff --git a/webapp/channels/src/components/widgets/menu/menu_items/menu_item.test.tsx b/webapp/channels/src/components/widgets/menu/menu_items/menu_item.test.tsx
index b6502b2254..d44ced4495 100644
--- a/webapp/channels/src/components/widgets/menu/menu_items/menu_item.test.tsx
+++ b/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>
                 }
               />
diff --git a/webapp/channels/src/components/widgets/menu/menu_items/menu_item.tsx b/webapp/channels/src/components/widgets/menu/menu_items/menu_item.tsx
index c5a1f48636..57ebb2e0ba 100644
--- a/webapp/channels/src/components/widgets/menu/menu_items/menu_item.tsx
+++ b/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>
                     </>
                 );
             }