diff --git a/app/scenes/Document/components/ReferenceListItem.tsx b/app/scenes/Document/components/ReferenceListItem.tsx index 920e42361..5f9305ebf 100644 --- a/app/scenes/Document/components/ReferenceListItem.tsx +++ b/app/scenes/Document/components/ReferenceListItem.tsx @@ -5,6 +5,7 @@ import { Link } from "react-router-dom"; import styled from "styled-components"; import Document from "~/models/Document"; import DocumentMeta from "~/components/DocumentMeta"; +import Flex from "~/components/Flex"; import { NavigationNode } from "~/types"; type Props = { @@ -31,14 +32,13 @@ const DocumentLink = styled(Link)` } `; -const Title = styled.h3` - display: flex; - align-items: center; +const Title = styled.div` overflow: hidden; text-overflow: ellipsis; font-size: 14px; - margin-top: 0; - margin-bottom: 0.25em; + font-weight: 500; + line-height: 1.25; + padding-top: 3px; white-space: nowrap; color: ${(props) => props.theme.text}; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, @@ -48,6 +48,7 @@ const Title = styled.h3` const StyledDocumentIcon = styled(DocumentIcon)` margin-left: -4px; color: ${(props) => props.theme.textSecondary}; + flex-shrink: 0; `; const Emoji = styled.span` @@ -78,16 +79,18 @@ function ReferenceListItem({ }} {...rest} > -