fix: add ellipsis for menu items with long words

Redocly · Nov 24, 2017 · 3421be2 · 3421be2
1 parent 335deb9
commit 3421be2
Show file tree

Hide file tree

Showing 2 changed files with 3 additions and 1 deletion.
diff --git a/src/components/SideMenu/MenuItem.tsx b/src/components/SideMenu/MenuItem.tsx
@@ -26,7 +26,7 @@ export class MenuItem extends React.Component<MenuItemProps> {
           <OperationMenuItemContent item={item as OperationModel} />
         ) : (
           <MenuItemLabel depth={item.depth} active={item.active}>
-            <MenuItemTitle>{item.name}</MenuItemTitle>
+            <MenuItemTitle title={item.name}>{item.name}</MenuItemTitle>
             {(item.depth > 0 &&
               item.items.length > 0 && (
                 <ShelfIcon float={'right'} direction={item.active ? 'down' : 'right'} />

diff --git a/src/components/SideMenu/styled.elements.ts b/src/components/SideMenu/styled.elements.ts
@@ -136,4 +136,6 @@ export const MenuItemTitle = withProps<{ width?: string }>(styled.span).attrs({
   display: inline-block;
   vertical-align: middle;
   width: ${props => (props.width ? props.width : 'auto')};
+  overflow: hidden;
+  text-overflow: ellipsis;
 `;