From 39018f16b5c6d634edbccd9b5a71eea25e6a99f2 Mon Sep 17 00:00:00 2001
From: Tom Moor <tom.moor@gmail.com>
Date: Fri, 17 Dec 2021 16:50:34 -0800
Subject: [PATCH] Show collaborators on mobile, normalize margins

---
 app/components/Collaborators.tsx            | 10 +---------
 app/scenes/Document/components/Document.tsx |  4 ++--
 2 files changed, 3 insertions(+), 11 deletions(-)

diff --git a/app/components/Collaborators.tsx b/app/components/Collaborators.tsx
index 3870974c3..a67ac265d 100644
--- a/app/components/Collaborators.tsx
+++ b/app/components/Collaborators.tsx
@@ -3,8 +3,6 @@ import { observer } from "mobx-react";
 import * as React from "react";
 import { useTranslation } from "react-i18next";
 import { usePopoverState, PopoverDisclosure } from "reakit/Popover";
-import styled from "styled-components";
-import breakpoint from "styled-components-breakpoint";
 import Document from "~/models/Document";
 import { AvatarWithPresence } from "~/components/Avatar";
 import DocumentViews from "~/components/DocumentViews";
@@ -78,7 +76,7 @@ function Collaborators(props: Props) {
       <PopoverDisclosure {...popover}>
         {(props) => (
           <NudeButton width={collaborators.length * 32} height={32} {...props}>
-            <FacepileHiddenOnMobile
+            <Facepile
               users={collaborators}
               renderAvatar={(collaborator) => {
                 const isPresent = presentIds.includes(collaborator.id);
@@ -123,10 +121,4 @@ function Collaborators(props: Props) {
   );
 }
 
-const FacepileHiddenOnMobile = styled(Facepile)`
-  ${breakpoint("mobile", "tablet")`
-    display: none;
-  `};
-`;
-
 export default observer(Collaborators);
diff --git a/app/scenes/Document/components/Document.tsx b/app/scenes/Document/components/Document.tsx
index 81cc24db9..c7fc2399d 100644
--- a/app/scenes/Document/components/Document.tsx
+++ b/app/scenes/Document/components/Document.tsx
@@ -636,8 +636,8 @@ const MaxWidth = styled(Flex)<MaxWidthProps>`
   ${(props) =>
     props.archived && `* { color: ${props.theme.textSecondary} !important; } `};
 
-  // Adds space to the left gutter to make room for heading annotations on mobile
-  padding: ${(props) => (props.isEditing ? "0 12px 0 32px" : "0 12px")};
+  // Adds space to the gutter to make room for heading annotations on mobile
+  padding: 0 32px;
   transition: padding 100ms;
 
   max-width: 100vw;