From ea12ebea0e1a85e133aadbc3c1a52c23c95f7ecc Mon Sep 17 00:00:00 2001
From: Nan Yu <nan@getoutline.com>
Date: Tue, 2 Nov 2021 18:30:37 -0700
Subject: [PATCH] Fix: increase left gutter spacing on mobile edit mode (#2720)

* fix: adds space to the left gutter in edit mode so heading annotations have room on mobile
---
 app/scenes/Document/components/Document.js | 9 +++++++--
 1 file changed, 7 insertions(+), 2 deletions(-)

diff --git a/app/scenes/Document/components/Document.js b/app/scenes/Document/components/Document.js
index 77c92a1c9..5f0f348ad 100644
--- a/app/scenes/Document/components/Document.js
+++ b/app/scenes/Document/components/Document.js
@@ -464,6 +464,7 @@ class DocumentScene extends React.Component<Props> {
             <MaxWidth
               archived={document.isArchived}
               showContents={showContents}
+              isEditing={!readOnly}
               column
               auto
             >
@@ -600,11 +601,15 @@ const ReferencesWrapper = styled("div")`
 const MaxWidth = styled(Flex)`
   ${(props) =>
     props.archived && `* { color: ${props.theme.textSecondary} !important; } `};
-  padding: 0 12px;
+
+  // Adds space to the left gutter to make room for heading annotations on mobile
+  padding: ${(props) => (props.isEditing ? "0 12px 0 32px" : "0 12px")};
+  transition: padding 100ms;
+
   max-width: 100vw;
   width: 100%;
 
-  ${breakpoint("tablet")`	
+  ${breakpoint("tablet")`
     padding: 0 24px;
     margin: 4px auto 12px;
     max-width: calc(48px + ${(props) =>