From 3421be2ea301cbf600363d561d1aa4785c2e041b Mon Sep 17 00:00:00 2001 From: Roman Hotsiy Date: Fri, 24 Nov 2017 11:47:57 +0200 Subject: [PATCH] fix: add ellipsis for menu items with long words --- src/components/SideMenu/MenuItem.tsx | 2 +- src/components/SideMenu/styled.elements.ts | 2 ++ 2 files changed, 3 insertions(+), 1 deletion(-) diff --git a/src/components/SideMenu/MenuItem.tsx b/src/components/SideMenu/MenuItem.tsx index 0c31ed46a9..489b9e3721 100644 --- a/src/components/SideMenu/MenuItem.tsx +++ b/src/components/SideMenu/MenuItem.tsx @@ -26,7 +26,7 @@ export class MenuItem extends React.Component { ) : ( - {item.name} + {item.name} {(item.depth > 0 && item.items.length > 0 && ( diff --git a/src/components/SideMenu/styled.elements.ts b/src/components/SideMenu/styled.elements.ts index fa8682a877..90ccdf5dfa 100644 --- 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; `;