From b5c1fc0c1abc22b8f4bf3d8705faa9dd0ef55430 Mon Sep 17 00:00:00 2001
From: Cyprien P <cyprien.pindat@gmail.com>
Date: Tue, 26 Jan 2021 15:54:59 +0100
Subject: [PATCH] (core) Fix page panels scrolling out of the viewport.

Summary:
Side panels sliding out of the viewport was causing the
browser window to be scrollable, hence it was possible to scroll the
page panels out of the viewport. Solution is to use fixed positioning
instead of absolute.

Test Plan: Tested manually on FF and Chrome.

Reviewers: paulfitz

Reviewed By: paulfitz

Differential Revision: https://phab.getgrist.com/D2714
---
 app/client/ui/PagePanels.ts | 14 ++++++++++----
 1 file changed, 10 insertions(+), 4 deletions(-)

diff --git a/app/client/ui/PagePanels.ts b/app/client/ui/PagePanels.ts
index 19d91aad..f42fd2c2 100644
--- a/app/client/ui/PagePanels.ts
+++ b/app/client/ui/PagePanels.ts
@@ -194,16 +194,19 @@ export const cssLeftPane = styled(cssVBox, `
   @media ${mediaSmall} {
     .${cssPageContainer.className}-optimizeNarrowScreen & {
       width: 240px;
-      position: absolute;
+      position: fixed;
       z-index: 10;
       top: 0;
       bottom: 0;
       left: -${240 + 15}px; /* adds an extra 15 pixels to also hide the box shadow */
+      visibility: hidden;
       box-shadow: 10px 0 5px rgba(0, 0, 0, 0.2);
-      transition: left 0.4s;
+      transition: left 0.4s, visibility 0.4s;
+      will-change: left;
     }
     .${cssPageContainer.className}-optimizeNarrowScreen &-open {
       left: 0;
+      visibility: visible;
     }
   }
   &-open {
@@ -238,16 +241,19 @@ const cssRightPane = styled(cssVBox, `
   @media ${mediaSmall} {
     .${cssPageContainer.className}-optimizeNarrowScreen & {
       width: 240px;
-      position: absolute;
+      position: fixed;
       z-index: 10;
       top: 0;
       bottom: 0;
       right: -${240 + 15}px; /* adds an extra 15 pixels to also hide the box shadow */
       box-shadow: -10px 0 5px rgba(0, 0, 0, 0.2);
-      transition: right 0.4s;
+      visibility: hidden;
+      transition: right 0.4s, visibility 0.4s;
+      will-change: right;
     }
     .${cssPageContainer.className}-optimizeNarrowScreen &-open {
       right: 0;
+      visibility: visible;
     }
   }
   &-open {