Fix hiding body scrollbar in Chrome extension and nested layers

.changelog/1811.bugfix.md

@@ -0,0 +1 @@
+Fix hiding body scrollbar in Chrome extension and nested layers

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 }}

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);"
         >

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;"
         >

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