Merge pull request #2121 from daostack/bugfix/CW-2106-body-scroll-width

Right pane slightly moves right upon clicking the breadcrumb #2106

src/index.scss

@@ -31,6 +31,10 @@
   font-display: swap;
 }
 
+:root {
+  --page-extra-pr: 0px;
+}
+
 body {
   --safe-area-inset-bottom: 0;
 

src/pages/commonFeed/components/FeedLayout/FeedLayout.module.scss

@@ -25,7 +25,7 @@
 }
 
 .desktopRightPane {
-  right: var(--sb-h-indent);
+  right: calc(var(--page-extra-pr) + var(--sb-h-indent));
   width: var(--chat-w, 22rem);
   border-right: 0.0625rem solid $c-light-gray;
 }

src/shared/hooks/useLockedBody.ts

@@ -5,6 +5,8 @@ interface Return {
   unlockBodyScroll: () => void;
 }
 
+const PAGE_EXTRA_PR_NAME = "--page-extra-pr";
+
 const useLockedBody = (initialLocked = false, rootId = "root"): Return => {
   const [locked, setLocked] = useState(initialLocked);
 
@@ -24,25 +26,35 @@ const useLockedBody = (initialLocked = false, rootId = "root"): Return => {
 
     // Save initial body style
     const originalOverflow = document.body.style.overflow;
-    const originalPaddingRight = document.body.style.paddingRight;
+    const originalPaddingRight = parseInt(
+      window.getComputedStyle(document.body).getPropertyValue("padding-right"),
+      10,
+    );
+
+    // Get the scrollBar width
+    const scrollBarWidth =
+      window.innerWidth - document.documentElement.clientWidth;
 
     // Lock body scroll
     document.body.style.overflow = "hidden";
 
-    // Get the scrollBar width
-    const root = document.getElementById(rootId); // or root
-    const scrollBarWidth = root ? root.offsetWidth - root.scrollWidth : 0;
-
     // Avoid width reflow
     if (scrollBarWidth) {
-      document.body.style.paddingRight = `${scrollBarWidth}px`;
+      document.body.style.paddingRight = `${
+        originalPaddingRight + scrollBarWidth
+      }px`;
+      document.documentElement.style.setProperty(
+        PAGE_EXTRA_PR_NAME,
+        `${scrollBarWidth}px`,
+      );
     }
 
     return () => {
       document.body.style.overflow = originalOverflow;
 
       if (scrollBarWidth) {
-        document.body.style.paddingRight = originalPaddingRight;
+        document.body.style.paddingRight = `${originalPaddingRight}px`;
+        document.documentElement.style.setProperty(PAGE_EXTRA_PR_NAME, "0px");
       }
     };
   }, [locked]);

src/shared/layouts/MultipleSpacesLayout/components/Header/Header.module.scss

@@ -4,7 +4,7 @@
 .container {
   position: fixed;
   top: 0;
-  right: var(--sb-h-indent);
+  right: calc(var(--page-extra-pr) + var(--sb-h-indent));
   left: var(--sb-h-indent);
   z-index: 3;
   height: var(--header-h);

src/shared/layouts/MultipleSpacesLayout/components/PageContent/PageContent.module.scss

@@ -29,7 +29,7 @@
 .header {
   position: fixed;
   top: var(--header-h);
-  right: var(--sb-h-indent);
+  right: calc(var(--page-extra-pr) + var(--sb-h-indent));
   left: var(--main-pl);
   z-index: 2;
   height: var(--page-content-header);

src/shared/ui-kit/ContextMenu/ContextMenu.tsx

@@ -1,5 +1,6 @@
 import React, {
   forwardRef,
+  useEffect,
   useImperativeHandle,
   useRef,
   useState,
@@ -20,6 +21,7 @@ import {
   FloatingFocusManager,
   FloatingOverlay,
 } from "@floating-ui/react";
+import { useLockedBody } from "@/shared/hooks";
 import { ContextMenuItem as Item } from "@/shared/interfaces";
 import { ContextMenuItem } from "./components";
 import styles from "./ContextMenu.module.scss";
@@ -41,6 +43,7 @@ export const ContextMenu = forwardRef<ContextMenuRef, ContextMenuProps>(
     const [isOpen, setIsOpen] = useState(false);
     const listItemsRef = useRef<(HTMLElement | null)[]>([]);
     const listContentRef = useRef(menuItems.map((item) => item.text));
+    const { lockBodyScroll, unlockBodyScroll } = useLockedBody();
 
     const handleOpenChange = (open: boolean) => {
       setIsOpen(open);
@@ -113,10 +116,18 @@ export const ContextMenu = forwardRef<ContextMenuRef, ContextMenuProps>(
       [refs],
     );
 
+    useEffect(() => {
+      if (isOpen) {
+        lockBodyScroll();
+      } else {
+        unlockBodyScroll();
+      }
+    }, [isOpen]);
+
     return (
       <FloatingPortal>
         {isOpen && (
-          <FloatingOverlay className={styles.overlay} lockScroll>
+          <FloatingOverlay className={styles.overlay}>
             <FloatingFocusManager
               context={context}
               initialFocus={refs.floating}