fix: Document icon overflow in ReferenceListItem (#2811)

* fix: Document icon overflow in ReferenceListItem

* fix: Icon shrinking

* fix: RTL document titles

Co-authored-by: Tom Moor <tom.moor@gmail.com>

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}
     >
-      <Title dir="auto">
+      <Flex gap={4} dir="auto">
         {document instanceof Document && document.emoji ? (
           <Emoji>{document.emoji}</Emoji>
         ) : (
           <StyledDocumentIcon color="currentColor" />
-        )}{" "}
-        {document instanceof Document && document.emoji
-          ? document.title.replace(new RegExp(`^${document.emoji}`), "")
-          : document.title}
-      </Title>
+        )}
+        <Title>
+          {document instanceof Document && document.emoji
+            ? document.title.replace(new RegExp(`^${document.emoji}`), "")
+            : document.title}
+        </Title>
+      </Flex>
       {document instanceof Document && document.updatedBy && (
         <DocumentMeta document={document} showCollection={showCollection} />
       )}