Nr/fix/inc 20732

package.json

@@ -17,6 +17,7 @@
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^13.3.0",
     "@testing-library/user-event": "^14.4.3",
+    "@uidotdev/usehooks": "^2.4.1",
     "axios": "^0.27.2",
     "date-fns": "^2.29.2",
     "dompurify": "^2.3.11",
@@ -71,4 +72,4 @@
       "ie 11"
     ]
   }
-}
+}

public/index.html

@@ -101,6 +101,7 @@
         margin-left: auto;
         margin-right: 0;
       }
+
       /* For mobile phones: */
       @media screen and (max-width: 600px) {
         .wmnds-header__title {
@@ -112,13 +113,13 @@
       }
 
       @media screen and (min-width: 768px) {
-        .MapView_disruptionsContainer__eBitF > div:nth-child(2) {
+        /* .MapView_disruptionsContainer__eBitF > div:nth-child(2) {
           display: contents !important;
-        }
+        } */
 
-        #js-disruptions-tray {
+        /* #js-disruptions-tray {
           overflow-y: auto;
-        }
+        } */
       }
     </style>
 

src/components/ViewToShow/MapView/MapView.js

@@ -11,7 +11,7 @@ function MapView() {
   const { appHeight, windowWidth } = useWindowHeightWidth(); // Get window height and width
 
   // Show correct height based on screen size
-  const mapHeight = windowWidth < 768 ? appHeight : 'calc(100vh - 88px - 72px)'; // Minus 298px as this is the height footer
+  const mapHeight = windowWidth < 768 ? appHeight : appHeight; // Minus 298px as this is the height footer 'calc(100vh - 88px - 72px)'
   const leftPadding = windowWidth / 2 - 504;
 
   return (

src/components/shared/Tray/MobileTray.js

@@ -16,7 +16,7 @@ function MobileTray() {
 
   return (
     <div
-      className={`${s.tray} wmnds-grid `}
+      className={`${s.tray} wmnds-grid mobile-tray`}
       //  set top position of tray based on logic in useMobileTrayMethods
       style={{
         top: typeof appHeight !== 'number' ? '100%' : appHeight - trayPosition,

src/components/shared/Tray/Tray.js

@@ -1,4 +1,4 @@
-import React, { useContext } from 'react';
+import React, { useRef, useContext } from 'react';
 // Import contexts
 import { FetchDisruptionsContext } from 'globalState';
 // Import customHooks
@@ -9,9 +9,11 @@ import MobileTray from './MobileTray';
 // Import styles
 import s from './Tray.module.scss';
 
+// eslint-disable-next-line react/prop-types
 function Tray() {
   const [fetchDisruptionState] = useContext(FetchDisruptionsContext);
   const { windowWidth } = useWindowHeightWidth(); // Get window height and width
+  const elementRef = useRef(null);
 
   // Output for how the mobile tray looks
   const mobileTray = <MobileTray />;
@@ -24,6 +26,7 @@ function Tray() {
         fetchDisruptionState.isMapVisible ? s.mapTray : ''
       }`}
       id="js-disruptions-tray"
+      ref={elementRef}
     >
       <TrayComponents />
     </div>

src/components/shared/Tray/TrayComponents/SelectedService/DisruptedService/DisruptedService.js

@@ -32,8 +32,10 @@ function DisruptedService({ disruption }) {
     }
   }, [modeState.mode, selectedItem.id, selectedItemTo]);
 
+  const styles = { overflowY: 'auto' };
+
   return (
-    <div className={`wmnds-grid wmnds-m-t-sm `} ref={disruptionRef}>
+    <div className="wmnds-grid wmnds-m-t-sm wmnds-disruption" ref={disruptionRef} style={styles}>
       <hr className="wmnds-col-1" />
       {/* Title of disruptions */}
       <div className="wmnds-col-1 wmnds-m-b-lg">

src/customHooks/useWindowHeightWidth.js

@@ -1,39 +1,72 @@
 import { useState, useEffect } from 'react';
+import { useLocalStorage } from '@uidotdev/usehooks';
 
 const useWindowHeightWidth = () => {
   const [windowWidth, setWindowWidth] = useState(window.innerWidth); // Store windows innerWidth so we can check on it for the render/return of this component
   const [windowHeight, setWindowHeight] = useState(window.innerHeight);
+  const [bannerHeight, setBannerHeight] = useState(0);
+  const [disruptionHeight, setDisruptionHeight] = useState(0);
   const [appHeight, setAppHeight] = useState();
+  const [filterHeight, setFilterHeight] = useLocalStorage('filterHeight', null); // add filter height to local storage
 
   // Check window width on resize, used to determine if we should show the mobile or desktop panel in the return/render at the bottom
   useEffect(() => {
     let mounted = true;
 
+    // work out height of the banner to include in the app height
+    const banner = document.getElementsByClassName('wmnds-banner-container');
+    const divElement = document.querySelector('.wmnds-banner-container');
+    if (banner.length > 0) {
+      setBannerHeight(divElement.offsetHeight);
+    }
+
+    // work out height of the filter including the disruption info
+    const filter = document.getElementsByClassName('Tray_tray__hrAu8');
+    const filterElements = document.querySelector('.Tray_tray__hrAu8');
+    if (filter.length > 0) {
+      setFilterHeight(filterElements.offsetHeight);
+    }
+
+    // work out height of the banner to include in the app height
+    const disruption = document.getElementsByClassName('wmnds-disruption');
+    const divElements = document.querySelector('.wmnds-disruption');
+    if (disruption.length > 0) {
+      setDisruptionHeight(divElements.offsetHeight);
+    }
+
     // Function to update window.width and window.height to state
     const updateWidthHeight = () => {
       if (mounted) {
         setWindowWidth(window.innerWidth);
         setWindowHeight(window.innerHeight);
       }
     };
+
+    const updateAppWidthHeight = () => {
+      setFilterHeight(filterElements.offsetHeight); // set filter height
+    };
+
     // Add event listener to window resize, if resized then update width with new window.width and window.height
     window.addEventListener('resize', updateWidthHeight);
 
+    filterElements.onresize = updateAppWidthHeight();
+
     // Cleanup: remove eventListener
     return () => {
       mounted = false;
       window.removeEventListener('resize', updateWidthHeight);
     };
-  }, [windowWidth, windowHeight, setWindowWidth, setWindowHeight]);
+  }, [windowWidth, windowHeight, setWindowWidth, setWindowHeight, setFilterHeight]);
 
   useEffect(() => {
+    console.log(filterHeight);
     // Set app height to window height minus the header height
     if (windowWidth > 410) {
-      setAppHeight(windowHeight - 140);
+      setAppHeight(filterHeight + 300);
     } else {
-      setAppHeight(windowHeight - 122);
+      setAppHeight(filterHeight + 600);
     }
-  }, [windowHeight, windowWidth]);
+  }, [bannerHeight, disruptionHeight, filterHeight, windowHeight, windowWidth]);
 
   return { windowWidth, windowHeight, appHeight };
 };