fix: Mispositioned sticky headers in modals

app/components/Subheading.js

@@ -4,6 +4,7 @@ import styled from "styled-components";
 
 type Props = {|
   children: React.Node,
+  sticky?: boolean,
 |};
 
 const H3 = styled.h3`
@@ -26,9 +27,9 @@ const Underline = styled.div`
 
 // When sticky we need extra background coverage around the sides otherwise
 // items that scroll past can "stick out" the sides of the heading
-const Sticky = styled.div`
-  position: sticky;
-  top: 54px;
+const Background = styled.div`
+  position: ${(props) => (props.sticky ? "sticky" : "relative")};
+  ${(props) => (props.sticky ? "top: 54px;" : "")}
   margin: 0 -8px;
   padding: 0 8px;
   background: ${(props) => props.theme.background};
@@ -36,13 +37,13 @@ const Sticky = styled.div`
   z-index: 1;
 `;
 
-const Subheading = ({ children, ...rest }: Props) => {
+const Subheading = ({ children, sticky, ...rest }: Props) => {
   return (
-    <Sticky>
+    <Background sticky={sticky}>
       <H3 {...rest}>
         <Underline>{children}</Underline>
       </H3>
-    </Sticky>
+    </Background>
   );
 };
 

app/scenes/Archive.js

@@ -26,7 +26,7 @@ function Archive(props: Props) {
       <PaginatedDocumentList
         documents={documents.archived}
         fetch={documents.fetchArchived}
-        heading={<Subheading>{t("Documents")}</Subheading>}
+        heading={<Subheading sticky>{t("Documents")}</Subheading>}
         empty={
           <Empty>{t("The document archive is empty at the moment.")}</Empty>
         }

app/scenes/Collection.js

@@ -258,7 +258,7 @@ class CollectionScene extends React.Component<Props> {
 
             {hasPinnedDocuments && (
               <>
-                <Subheading>
+                <Subheading sticky>
                   <TinyPinIcon size={18} /> {t("Pinned")}
                 </Subheading>
                 <DocumentList documents={pinnedDocuments} showPin />

app/scenes/Drafts.js

@@ -96,7 +96,7 @@ class Drafts extends React.Component<Props> {
         }
       >
         <Heading>{t("Drafts")}</Heading>
-        <Subheading>
+        <Subheading sticky>
           {t("Documents")}
           <Filters>
             <CollectionFilter

app/scenes/Trash.js

@@ -20,7 +20,7 @@ function Trash() {
       <PaginatedDocumentList
         documents={documents.deleted}
         fetch={documents.fetchDeleted}
-        heading={<Subheading>{t("Documents")}</Subheading>}
+        heading={<Subheading sticky>{t("Documents")}</Subheading>}
         empty={<Empty>{t("Trash is empty at the moment.")}</Empty>}
         showCollection
         showTemplate