From c8e67b969d8c223fa7a9587b4ef24deb9be7b7bf Mon Sep 17 00:00:00 2001
From: Tom Moor <tom.moor@gmail.com>
Date: Tue, 2 Jul 2024 20:28:37 -0400
Subject: [PATCH] fix: Gap between icon picker and title

---
 app/scenes/Document/components/DocumentTitle.tsx | 9 +++++++--
 1 file changed, 7 insertions(+), 2 deletions(-)

diff --git a/app/scenes/Document/components/DocumentTitle.tsx b/app/scenes/Document/components/DocumentTitle.tsx
index 75718ba1d..fa43b9ef1 100644
--- a/app/scenes/Document/components/DocumentTitle.tsx
+++ b/app/scenes/Document/components/DocumentTitle.tsx
@@ -8,7 +8,7 @@ import styled from "styled-components";
 import breakpoint from "styled-components-breakpoint";
 import isMarkdown from "@shared/editor/lib/isMarkdown";
 import normalizePastedMarkdown from "@shared/editor/lib/markdown/normalize";
-import { s } from "@shared/styles";
+import { extraArea, s } from "@shared/styles";
 import { light } from "@shared/styles/theme";
 import {
   getCurrentDateAsString,
@@ -256,7 +256,7 @@ const DocumentTitle = React.forwardRef(function _DocumentTitle(
       {can.update && !readOnly ? (
         <IconWrapper align="center" justify="center" dir={dir}>
           <React.Suspense fallback={fallbackIcon}>
-            <IconPicker
+            <StyledIconPicker
               icon={icon ?? null}
               color={color}
               size={40}
@@ -283,6 +283,11 @@ type TitleProps = {
   $iconPickerIsOpen: boolean;
 };
 
+// Extra area prevents gap between icon and beginning of title
+const StyledIconPicker = styled(IconPicker)`
+  ${extraArea(8)}
+`;
+
 const Title = styled(ContentEditable)<TitleProps>`
   position: relative;
   line-height: ${lineHeight};