Show collaborators on mobile, normalize margins

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);

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;