From fae54c795756ae0abf78888c9fa29fb146b1e00f Mon Sep 17 00:00:00 2001
From: Tom Moor <tom.moor@gmail.com>
Date: Thu, 18 Feb 2021 23:20:12 -0800
Subject: [PATCH] fix: Mispositioned sticky headers in modals

---
 app/components/Subheading.js | 13 +++++++------
 app/scenes/Archive.js        |  2 +-
 app/scenes/Collection.js     |  2 +-
 app/scenes/Drafts.js         |  2 +-
 app/scenes/Trash.js          |  2 +-
 5 files changed, 11 insertions(+), 10 deletions(-)

diff --git a/app/components/Subheading.js b/app/components/Subheading.js
index eecb044ab..a55d128a4 100644
--- a/app/components/Subheading.js
+++ b/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>
   );
 };
 
diff --git a/app/scenes/Archive.js b/app/scenes/Archive.js
index 3290ff71e..be6294da4 100644
--- a/app/scenes/Archive.js
+++ b/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>
         }
diff --git a/app/scenes/Collection.js b/app/scenes/Collection.js
index e1a1b45a9..bf406231c 100644
--- a/app/scenes/Collection.js
+++ b/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 />
diff --git a/app/scenes/Drafts.js b/app/scenes/Drafts.js
index 569f5df67..f5e6acbfe 100644
--- a/app/scenes/Drafts.js
+++ b/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
diff --git a/app/scenes/Trash.js b/app/scenes/Trash.js
index 790c6b0c4..37dda1e6d 100644
--- a/app/scenes/Trash.js
+++ b/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