fix: inset images

Author: ludtkemorgan

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

@@ -3,32 +3,9 @@
     margin-block-end: var(--seeds-s4);
   }
 
-  @media (--md-and-up) {
-    display: flex;
-    flex-direction: column;
-  }
-
-  .listing-card-outer-container {
-    @media (--md-and-up) {
-      flex: 1;
-      display: flex;
-      flex-direction: column;
-    }
-  }
-
   .listing-card-container {
     --card-spacing: 0;
 
-    @media (--md-and-up) {
-      flex: 1;
-
-      :global(.seeds-card-section) {
-        flex: 1;
-        display: flex;
-        flex-direction: column;
-      }
-    }
-
     .name,
     a {
       color: var(--seeds-color-blue-500);
@@ -47,9 +24,6 @@
       color: var(--seeds-text-color);
       font-family: var(--seeds-font-alt-sans);
       width: 100%;
-      @media (--md-and-up) {
-        flex: 1;
-      }
       @media (--md-down) {
         flex-direction: column;
       }
@@ -64,6 +38,7 @@
 
       .image-background {
         height: 100%;
+        max-height: var(--seeds-s48);
         background-size: cover;
         background-position: center;
         @media (--md-down) {
@@ -79,8 +54,8 @@
         order: 1;
         width: calc(100% / 7 * 4);
         padding: var(--seeds-s3);
-        display: flex;
-        flex-direction: column;
+        // display: flex;
+        // flex-direction: column;
 
         @media (--md-down) {
           width: 100%;
@@ -117,9 +92,6 @@
 
         .unit-table {
           margin-block-start: var(--seeds-s3);
-          @media (--md-and-up) {
-            margin-block-start: auto;
-          }
         }
       }
 
@@ -196,10 +168,6 @@
         .name {
           font-size: var(--seeds-type-heading-size-lg);
         }
-
-        .unit-table {
-          margin-block-start: var(--seeds-s3);
-        }
       }
     }
   }

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

@@ -159,31 +159,8 @@ export const MapListingCard = ({
   )
 }
 
-const DESKTOP_MIN_WIDTH = 768
-
 export const MapListingCardList = ({ children }: { children: React.ReactNode }) => {
   const listRef = useRef<HTMLUListElement>(null)
 
-  useLayoutEffect(() => {
-    const equalize = () => {
-      const ul = listRef.current
-      if (!ul) return
-
-      const items = Array.from(ul.querySelectorAll<HTMLLIElement>(":scope > li"))
-      items.forEach((li) => (li.style.minHeight = ""))
-
-      if (items.length <= 1 || window.innerWidth < DESKTOP_MIN_WIDTH) return
-
-      const max = Math.max(...items.map((li) => li.getBoundingClientRect().height))
-      if (isFinite(max) && max > 0) {
-        items.forEach((li) => (li.style.minHeight = `${max}px`))
-      }
-    }
-
-    equalize()
-    window.addEventListener("resize", equalize)
-    return () => window.removeEventListener("resize", equalize)
-  })
-
   return <ul ref={listRef}>{children}</ul>
 }