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 dadf4c065ea7f..6bfff017314cb 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.tsx b/webapp/channels/src/components/widgets/menu/menu_items/menu_item.tsx
index 999ca62d2241d..c3c0b85646a6a 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>
                     </>
                 );
             }