From 9712b8d205e07b96456ddbb6e3fd6f73f58af202 Mon Sep 17 00:00:00 2001
From: Tom Moor <tom.moor@gmail.com>
Date: Sun, 5 Apr 2020 13:07:16 -0700
Subject: [PATCH] fix: Document history should scroll separate to page content
 closes #1225

---
 .../DocumentHistory/DocumentHistory.js        | 60 +++++++++++--------
 1 file changed, 36 insertions(+), 24 deletions(-)

diff --git a/app/components/DocumentHistory/DocumentHistory.js b/app/components/DocumentHistory/DocumentHistory.js
index 2de8c4e1..257b3f02 100644
--- a/app/components/DocumentHistory/DocumentHistory.js
+++ b/app/components/DocumentHistory/DocumentHistory.js
@@ -100,30 +100,32 @@ class DocumentHistory extends React.Component<Props> {
     const showLoading = !this.isLoaded && this.isFetching;
 
     return (
-      <Wrapper column>
-        {showLoading ? (
-          <Loading>
-            <ListPlaceholder count={5} />
-          </Loading>
-        ) : (
-          <ArrowKeyNavigation
-            mode={ArrowKeyNavigation.mode.VERTICAL}
-            defaultActiveChildIndex={0}
-          >
-            {this.revisions.map((revision, index) => (
-              <Revision
-                key={revision.id}
-                revision={revision}
-                document={this.document}
-                showMenu={index !== 0}
-              />
-            ))}
-          </ArrowKeyNavigation>
-        )}
-        {this.allowLoadMore && (
-          <Waypoint key={this.offset} onEnter={this.loadMoreResults} />
-        )}
-      </Wrapper>
+      <Sidebar>
+        <Wrapper column>
+          {showLoading ? (
+            <Loading>
+              <ListPlaceholder count={5} />
+            </Loading>
+          ) : (
+            <ArrowKeyNavigation
+              mode={ArrowKeyNavigation.mode.VERTICAL}
+              defaultActiveChildIndex={0}
+            >
+              {this.revisions.map((revision, index) => (
+                <Revision
+                  key={revision.id}
+                  revision={revision}
+                  document={this.document}
+                  showMenu={index !== 0}
+                />
+              ))}
+            </ArrowKeyNavigation>
+          )}
+          {this.allowLoadMore && (
+            <Waypoint key={this.offset} onEnter={this.loadMoreResults} />
+          )}
+        </Wrapper>
+      </Sidebar>
     );
   }
 }
@@ -133,6 +135,16 @@ const Loading = styled.div`
 `;
 
 const Wrapper = styled(Flex)`
+  position: fixed;
+  top: 0;
+  right: 0;
+  z-index: 1;
+  min-width: ${props => props.theme.sidebarWidth};
+  overflow: scroll;
+  overscroll-behavior: none;
+`;
+
+const Sidebar = styled(Flex)`
   background: ${props => props.theme.background};
   min-width: ${props => props.theme.sidebarWidth};
   border-left: 1px solid ${props => props.theme.divider};