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

@@ -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"};
   `};
 `;
 

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