refactor: image sizes attr

lsst-epo · Dec 27, 2024 · 90edc7f · 90edc7f
1 parent 16b06c7
commit 90edc7f
Show file tree

Hide file tree

Showing 2 changed files with 5 additions and 3 deletions.
diff --git a/components/molecules/Hero/index.tsx b/components/molecules/Hero/index.tsx
@@ -29,6 +29,7 @@ const Hero: FunctionComponent<PropsWithChildren<HeroProps>> = ({
             focalPointY || 50
           }%`,
         }}
+        sizes={`(max-width: 2000px) 100vw, 2000px`}
         priority
         fetchPriority="high"
         quality={90}

diff --git a/components/molecules/Hero/styles.ts b/components/molecules/Hero/styles.ts
@@ -1,11 +1,12 @@
 "use client";
 import styled from "styled-components";
-import { fluidScale, containerFullBleed } from "@/styles/globalStyles";
-// import Image from "@rubin-epo/epo-react-lib/Image";
+import { fluidScale } from "@/styles/globalStyles";
 import Image from "next/image";
 
 export const HeroContainer = styled.div`
-  ${containerFullBleed("CONTAINER_FULL")}
+  width: 100%;
+  max-width: var(--size-width-center, 2000px);
+  margin: 0 auto;
   position: relative;
   height: var(--Hero-height, ${fluidScale("540px", "400px")});
   overflow: auto;