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 && (
{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;
`};
`;