feat: add hook to assess if a scrollbar is present in the main conten…

…t area

src/components/DashboardContainer.js

@@ -1,19 +1,55 @@
 import cx from 'classnames'
 import PropTypes from 'prop-types'
-import React from 'react'
+import React, {
+    useRef,
+    useState,
+    useEffect,
+    createContext,
+    useContext,
+} from 'react'
 import classes from './styles/DashboardContainer.module.css'
 
+const HasScrollbarContext = createContext(undefined)
+
 const DashboardContainer = ({ children, covered }) => {
+    const [hasScrollbar, setHasScrollbar] = useState(false)
+    const containerRef = useRef(null)
+    const contentWrapRef = useRef(null)
+
+    useEffect(() => {
+        const resizeObserver = new ResizeObserver(() => {
+            const el = containerRef.current
+            if (!el) {
+                throw new Error('Could not find scroll container')
+            }
+            /* This first condition is true in mobile portrait when there is
+             * a scrollbar on the outer scroll-container */
+            const isNarrowerThanWindow = window.innerWidth > el.offsetWidth
+            const hasInnerScrollbar = el.scrollHeight > el.clientHeight
+            setHasScrollbar(isNarrowerThanWindow || hasInnerScrollbar)
+        })
+        resizeObserver.observe(contentWrapRef.current)
+
+        return () => {
+            resizeObserver.disconnect()
+        }
+    }, [])
+
     return (
         <div
             className={cx(
                 classes.container,
                 'dashboard-scroll-container',
                 covered && classes.covered
             )}
+            ref={containerRef}
             data-test="inner-scroll-container"
         >
-            {children}
+            <div ref={contentWrapRef} className={classes.contentWrap}>
+                <HasScrollbarContext.Provider value={hasScrollbar}>
+                    {children}
+                </HasScrollbarContext.Provider>
+            </div>
         </div>
     )
 }
@@ -23,4 +59,5 @@ DashboardContainer.propTypes = {
     covered: PropTypes.bool,
 }
 
+export const useContainerHasScrollbar = () => useContext(HasScrollbarContext)
 export default DashboardContainer

src/components/styles/DashboardContainer.module.css

@@ -5,7 +5,12 @@
     padding-block-end: var(--spacers-dp12);
     overflow: auto;
 }
-
+.contentWrap {
+    overflow: visible;
+    margin: 0;
+    padding: 0;
+    width: 100%;
+}
 @media only screen and (max-height: 480px) {
     .container {
         overflow: visible;