fix: remove padding from top of tile images

lsst-epo · Dec 9, 2024 · c0d9525 · c0d9525
1 parent e8cb59a
commit c0d9525
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 34 deletions.
diff --git 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
@@ -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%;
-        }
-      }
     }
   }