From 5520317ce13d2da7cc083b434f9ec45aca70eaaf Mon Sep 17 00:00:00 2001
From: Nan Yu <nan@getoutline.com>
Date: Mon, 11 Apr 2022 19:48:05 -0700
Subject: [PATCH] fix: prevent the interactive gutter elements from interfering
 with the sidebar collapse button (#3350)

* fix: prevent the interactive gutter elements from interfering with the sidebar collapse button

* keep mobile padding the same on documents

Co-authored-by: Tom Moor <tom.moor@gmail.com>
---
 app/components/CenteredContent.tsx          | 4 ++--
 app/scenes/Document/components/Document.tsx | 1 +
 2 files changed, 3 insertions(+), 2 deletions(-)

diff --git a/app/components/CenteredContent.tsx b/app/components/CenteredContent.tsx
index a3a2645b1..7ddb94255 100644
--- a/app/components/CenteredContent.tsx
+++ b/app/components/CenteredContent.tsx
@@ -12,8 +12,8 @@ const Container = styled.div<Props>`
   padding: ${(props) => (props.withStickyHeader ? "4px 12px" : "60px 12px")};
 
   ${breakpoint("tablet")`
-    padding: ${(props: Props) =>
-      props.withStickyHeader ? "4px 60px 60px" : "60px"};
+    padding: ${(props: any) =>
+      props.withStickyHeader ? "4px 44px 60px" : "60px 44px"};
   `};
 `;
 
diff --git a/app/scenes/Document/components/Document.tsx b/app/scenes/Document/components/Document.tsx
index c9d233d97..955a1fd52 100644
--- a/app/scenes/Document/components/Document.tsx
+++ b/app/scenes/Document/components/Document.tsx
@@ -657,6 +657,7 @@ const MaxWidth = styled(Flex)<MaxWidthProps>`
   padding-bottom: 16px;
 
   ${breakpoint("tablet")`
+    padding: 0 44px;
     margin: 4px auto 12px;
     max-width: ${(props: MaxWidthProps) =>
       props.isFullWidth