diff --git a/app/components/DocumentPreview/DocumentPreview.js b/app/components/DocumentPreview/DocumentPreview.js index 6f3ca44c..daa0db98 100644 --- a/app/components/DocumentPreview/DocumentPreview.js +++ b/app/components/DocumentPreview/DocumentPreview.js @@ -20,6 +20,7 @@ type Props = { const StyledStar = withTheme(styled(({ solid, theme, ...props }) => ( ))` + flex-shrink: 0; opacity: ${props => (props.solid ? '1 !important' : 0)}; transition: all 100ms ease-in-out; @@ -80,6 +81,8 @@ const Heading = styled.h3` height: 24px; margin-top: 0; margin-bottom: 0.25em; + overflow: hidden; + white-space: nowrap; `; const Actions = styled(Flex)` @@ -87,6 +90,12 @@ const Actions = styled(Flex)` align-items: center; `; +const Title = styled(Highlight)` + max-width: 90%; + overflow: hidden; + text-overflow: ellipsis; +`; + @observer class DocumentPreview extends React.Component { star = (ev: SyntheticEvent<*>) => { @@ -120,7 +129,7 @@ class DocumentPreview extends React.Component { {...rest} > - + {document.publishedAt && ( <Actions> {document.starred ? ( diff --git a/app/components/Sidebar/components/SidebarLink.js b/app/components/Sidebar/components/SidebarLink.js index 55c88215..0ca4c3c9 100644 --- a/app/components/Sidebar/components/SidebarLink.js +++ b/app/components/Sidebar/components/SidebarLink.js @@ -161,6 +161,7 @@ const Wrapper = styled(Flex)` const Content = styled.div` width: 100%; + max-height: 4em; `; export default withRouter(withTheme(SidebarLink)); diff --git a/app/scenes/Document/components/Header.js b/app/scenes/Document/components/Header.js index 3ca4132a..8d7f315c 100644 --- a/app/scenes/Document/components/Header.js +++ b/app/scenes/Document/components/Header.js @@ -214,7 +214,7 @@ const Title = styled.div` ${breakpoint('tablet')` display: block; - width: 33.3%; + flex-grow: 1; `}; `;