Fixes various overflow issues, #724

app/components/DocumentPreview/DocumentPreview.js

@@ -20,6 +20,7 @@ type Props = {
 const StyledStar = withTheme(styled(({ solid, theme, ...props }) => (
   <StarredIcon color={solid ? theme.black : theme.text} {...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<Props> {
   star = (ev: SyntheticEvent<*>) => {
@@ -120,7 +129,7 @@ class DocumentPreview extends React.Component<Props> {
         {...rest}
       >
         <Heading>
-          <Highlight text={document.title} highlight={highlight} />
+          <Title text={document.title} highlight={highlight} />
           {document.publishedAt && (
             <Actions>
               {document.starred ? (

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));

app/scenes/Document/components/Header.js

@@ -214,7 +214,7 @@ const Title = styled.div`
 
   ${breakpoint('tablet')`	
     display: block;
-    width: 33.3%;
+    flex-grow: 1;
   `};
 `;