From c0d9525a66ae5e0cd687995063e79ed62db80314 Mon Sep 17 00:00:00 2001
From: Alexandra Goff <agoff@lsst.org>
Date: Mon, 9 Dec 2024 11:15:31 -0500
Subject: [PATCH] fix: remove padding from top of tile images

---
 components/atomic/Tile/index.js  | 15 +++------------
 components/atomic/Tile/styles.js | 30 ++++++++----------------------
 2 files changed, 11 insertions(+), 34 deletions(-)

diff --git a/components/atomic/Tile/index.js b/components/atomic/Tile/index.js
index 0543d3f5..e7e6dbf1 100644
--- a/components/atomic/Tile/index.js
+++ b/components/atomic/Tile/index.js
@@ -1,12 +1,7 @@
 import PropTypes from "prop-types";
 import { useId } from "react";
 import classNames from "classnames";
-import {
-  ResponsiveImage,
-  Image,
-  MixedLink,
-  IconComposer,
-} from "@rubin-epo/epo-react-lib";
+import { Image, MixedLink, IconComposer } from "@rubin-epo/epo-react-lib";
 import { mixedLinkShape } from "@/shapes/link";
 import { useGlobalData } from "@/lib/utils";
 import * as Styled from "./styles";
@@ -57,13 +52,9 @@ const Tile = ({
         {finalImage && (
           <div className="image">
             {ratio ? (
-              <ResponsiveImage
-                role="presentation"
-                ratio={ratio}
-                image={finalImage}
-              />
+              <Styled.ResponsiveImage aspectRatio={ratio} image={finalImage} />
             ) : (
-              <Image role="presentation" image={finalImage} />
+              <Image image={finalImage} />
             )}
             {isVideo && (
               <Styled.PlayButton>
diff --git a/components/atomic/Tile/styles.js b/components/atomic/Tile/styles.js
index 165baa41..39804a95 100644
--- a/components/atomic/Tile/styles.js
+++ b/components/atomic/Tile/styles.js
@@ -1,6 +1,7 @@
 /* eslint-disable */
 import styled from "styled-components";
-import { MixedLink as BaseMixedLink } from "@rubin-epo/epo-react-lib";
+import BaseMixedLink from "@rubin-epo/epo-react-lib/MixedLink";
+import BaseResponsiveImage from "@rubin-epo/epo-react-lib/ResponsiveImage";
 import SharePopupComponent from "@/layout/SharePopup";
 import {
   BREAK_PHABLET,
@@ -16,6 +17,10 @@ Media queries are done this way for special treatment at tablet level vs phone l
 @media (min-width: ${BREAK_PHABLET_MIN}) and (max-width: ${BREAK_TABLET}) {}
 */
 
+export const ResponsiveImage = styled(BaseResponsiveImage)`
+  height: 100%;
+`;
+
 export const ListItem = styled.li`
   position: relative;
 `;
@@ -36,6 +41,7 @@ export const MixedLink = styled(BaseMixedLink)`
   /* set the grid areas for various bits */
   .image {
     grid-area: image;
+    overflow: hidden;
   }
 
   .pretitle {
@@ -210,10 +216,6 @@ export const MixedLink = styled(BaseMixedLink)`
       grid-row-gap: 0px;
       padding: 0px;
 
-      && .image > div {
-        padding-top: 50%;
-      }
-
       .pretitle {
         padding: 0.5rem 0;
         font-weight: normal;
@@ -296,10 +298,6 @@ export const MixedLink = styled(BaseMixedLink)`
       grid-gap: 0;
       padding: 0px;
 
-      && .image > div {
-        padding-top: 50%;
-      }
-
       .pretitle {
         padding: 0.5rem 20px;
         font-weight: normal;
@@ -330,13 +328,7 @@ export const MixedLink = styled(BaseMixedLink)`
         "image title"
         "image subtitle"
         "image text"
-        "footer text";
-
-      .image {
-        > div {
-          padding-top: 100%;
-        }
-      }
+        "image text";
 
       && .footer {
         display: none;
@@ -655,12 +647,6 @@ export const MixedLink = styled(BaseMixedLink)`
         "image title"
         "image text"
         "image text";
-
-      .image {
-        > div {
-          padding-top: 100%;
-        }
-      }
     }
   }