feat: scrolling

Author: emilyjablonski

sites/public/src/components/browse/map/ListingsCombined.module.scss

@@ -7,6 +7,7 @@
 
   @media (max-width: $screen-md) {
     height: 100%;
+    min-height: 0;
   }
 
   .listings-map {
@@ -23,7 +24,8 @@
 
   .listings-map-list-container {
     display: flex;
-    height: 100%;
+    flex: 1;
+    min-height: 0;
     @media (max-width: $screen-md) {
       position: relative;
       display: block;
@@ -54,14 +56,17 @@
       display: block;
       z-index: 0;
       width: 100%;
-      height: 100%;
+      flex: 1;
+      min-height: 0;
+      overflow: hidden;
     }
   }
 
   .listings-list {
     overflow-y: auto;
     width: 100%;
     display: block;
+    min-height: 0;
 
     @media (max-width: $screen-md) {
       display: block;
@@ -82,14 +87,28 @@
       display: block;
       position: static;
       z-index: 1;
-      overflow-y: auto;
+      flex: none;
+      min-height: auto;
+      overflow-y: visible;
       background-color: var(--background-color);
     }
   }
 
+  .listings-map-list-container-list-only {
+    @media (max-width: $screen-md) {
+      display: flex;
+      flex-direction: column;
+      flex: 1;
+      min-height: 0;
+      overflow-y: auto;
+      -webkit-overflow-scrolling: touch;
+    }
+  }
+
   .listings-outer-container {
     background-color: var(--seeds-color-white);
     overflow-y: auto;
+    min-height: 0;
     width: var(--listings-list-width);
     @media (max-width: $screen-lg) {
       width: 55%;

sites/public/src/components/browse/map/ListingsSearch.module.scss

@@ -15,9 +15,12 @@
   --line-color: var(--seeds-color-gray-650);
 
   position: absolute;
+  width: 100%;
+  height: var(--listings-component-height);
+  overflow: hidden;
 
   @media (max-width: $screen-md) {
-    height: 100%;
+    height: var(--listings-component-height-mobile);
     display: flex;
     flex-flow: column;
   }

sites/public/src/components/browse/map/ListingsSearchCombined.tsx

@@ -56,6 +56,7 @@ function ListingsSearchCombined(props: ListingsSearchCombinedProps) {
   const [isLoading, setIsLoading] = useState(true)
   const [isFirstBoundsLoad, setIsFirstBoundsLoad] = useState<boolean>(true)
   const hasCompletedInitialListingsCallRef = useRef(false)
+  const listingsVarsRef = useRef<HTMLDivElement>(null)
 
   const [searchFilter] = useState(
     parseSearchString(props.searchString, {
@@ -94,6 +95,37 @@ function ListingsSearchCombined(props: ListingsSearchCombinedProps) {
 
   const map = useMap()
 
+  useEffect(() => {
+    const listingsVarsElement = listingsVarsRef.current
+    if (!listingsVarsElement) return
+
+    const mainNavigation = document.querySelector('nav[aria-label="Main"]')
+    const siteHeader = mainNavigation?.closest("header")
+
+    const updateHeaderOffsets = () => {
+      const topOffset = Math.max(0, Math.round(listingsVarsElement.getBoundingClientRect().top))
+      const cssOffsetValue = `${topOffset}px`
+
+      listingsVarsElement.style.setProperty("--desktop-header-offset", cssOffsetValue)
+      listingsVarsElement.style.setProperty("--mobile-header-offset", cssOffsetValue)
+    }
+
+    updateHeaderOffsets()
+    window.addEventListener("resize", updateHeaderOffsets)
+
+    const resizeObserver = new ResizeObserver(updateHeaderOffsets)
+    resizeObserver.observe(listingsVarsElement)
+
+    if (siteHeader) {
+      resizeObserver.observe(siteHeader)
+    }
+
+    return () => {
+      resizeObserver.disconnect()
+      window.removeEventListener("resize", updateHeaderOffsets)
+    }
+  }, [])
+
   const search = async (page: number, changingFilter?: boolean) => {
     // If a user pans over empty space, reset the listings to empty instead of refetching
     if (isDesktop === undefined) return
@@ -326,7 +358,7 @@ function ListingsSearchCombined(props: ListingsSearchCombinedProps) {
   }
 
   return (
-    <div className={styles["listings-vars"]}>
+    <div className={styles["listings-vars"]} ref={listingsVarsRef}>
       <FilterDrawer
         isOpen={isFilterDrawerOpen}
         onClose={onDrawerClose}