From 9a6c414a5b7cfc3abe17a4441eaa60b9eb34bd00 Mon Sep 17 00:00:00 2001
From: lukaw3d <lukajeran@oasislabs.com>
Date: Mon, 18 Dec 2023 22:46:54 +0100
Subject: [PATCH] Fix hiding body scrollbar in Chrome extension and nested
 layers

---
 .changelog/1811.bugfix.md                     |  1 +
 src/app/components/ResponsiveLayer/index.tsx  |  7 ++++++-
 .../__snapshots__/AddContact.test.tsx.snap    |  2 +-
 .../__snapshots__/index.test.tsx.snap         |  2 +-
 src/styles/main.css                           | 21 +++++++++++++++++++
 5 files changed, 30 insertions(+), 3 deletions(-)
 create mode 100644 .changelog/1811.bugfix.md

diff --git a/.changelog/1811.bugfix.md b/.changelog/1811.bugfix.md
new file mode 100644
index 0000000000..91cd3b04c6
--- /dev/null
+++ b/.changelog/1811.bugfix.md
@@ -0,0 +1 @@
+Fix hiding body scrollbar in Chrome extension and nested layers
diff --git a/src/app/components/ResponsiveLayer/index.tsx b/src/app/components/ResponsiveLayer/index.tsx
index edb3a69c1b..6fa615d190 100644
--- a/src/app/components/ResponsiveLayer/index.tsx
+++ b/src/app/components/ResponsiveLayer/index.tsx
@@ -35,7 +35,12 @@ export function ResponsiveLayer(props: LayerExtendedProps) {
   )
 
   return (
-    <Layer {...props} ref={layerRef} style={{ overflowY: 'auto', ...props.style }}>
+    <Layer
+      {...props}
+      ref={layerRef}
+      className="fix-responsive-layer"
+      style={{ overflowY: 'auto', ...props.style }}
+    >
       <Box
         // Prevents Grommet flex overlap issue in smaller viewport
         flex={{ shrink: 0, grow: 1 }}
diff --git a/src/app/components/Toolbar/Features/Contacts/__tests__/__snapshots__/AddContact.test.tsx.snap b/src/app/components/Toolbar/Features/Contacts/__tests__/__snapshots__/AddContact.test.tsx.snap
index 9f4ca018f4..60da2ce185 100644
--- a/src/app/components/Toolbar/Features/Contacts/__tests__/__snapshots__/AddContact.test.tsx.snap
+++ b/src/app/components/Toolbar/Features/Contacts/__tests__/__snapshots__/AddContact.test.tsx.snap
@@ -838,7 +838,7 @@ exports[`<AddContact  /> should match snapshot 1`] = `
           class="c2"
         />
         <div
-          class="c3"
+          class="c3 fix-responsive-layer"
           data-g-portal-id="0"
           style="overflow-y: auto; width: 100%; max-width: none; min-height: min(550px, 90dvh);"
         >
diff --git a/src/app/pages/OpenWalletPage/Features/ImportAccountsSelectionModal/__tests__/__snapshots__/index.test.tsx.snap b/src/app/pages/OpenWalletPage/Features/ImportAccountsSelectionModal/__tests__/__snapshots__/index.test.tsx.snap
index a81a9ccefb..6fe75f0ded 100644
--- a/src/app/pages/OpenWalletPage/Features/ImportAccountsSelectionModal/__tests__/__snapshots__/index.test.tsx.snap
+++ b/src/app/pages/OpenWalletPage/Features/ImportAccountsSelectionModal/__tests__/__snapshots__/index.test.tsx.snap
@@ -635,7 +635,7 @@ exports[`<ImportAccountsSelectionModal  /> should match snapshot 1`] = `
           class="c2"
         />
         <div
-          class="c3"
+          class="c3 fix-responsive-layer"
           data-g-portal-id="0"
           style="overflow-y: auto;"
         >
diff --git a/src/styles/main.css b/src/styles/main.css
index 41481550bd..a50fad838b 100644
--- a/src/styles/main.css
+++ b/src/styles/main.css
@@ -42,6 +42,27 @@ html {
   max-height: 16px;
 }
 
+/*
+ * Grommet and ResponsiveLayer do not handle nesting layers well:
+ * If user opens settings, clicks manage account (nested layer), and cancels:
+ * settings modal is still open, but `overflow: hidden` is removed from body.
+ * Workaround: set overflow hidden when any responsive layer exists.
+ */
+body:has(.fix-responsive-layer) {
+  overflow: hidden;
+}
+/*
+ * In chrome extension popup: `overflow: hidden` does not work on document.body,
+ * so main scrollbar is still displayed after modal tries to hide it. Workaround:
+ * change scrollbar width to 0 when any responsive layer exists.
+ */
+body:has(.fix-responsive-layer) {
+  scrollbar-width: none;
+}
+body:has(.fix-responsive-layer)::-webkit-scrollbar {
+  display: none;
+}
+
 /* Visually warn developers about sensitive input fields missing preventSavingInputsToUserData */
 :is(input, textarea):is(
 [type="password"], [name="password"], [name="privatekey"], [name="mnemonic"], #privatekey, #mnemonic