Merge pull request #244 from ethereum/hub-hero-flickering

HubHero layout shifting

Author: corwintines

src/components/Hero/HubHero/index.tsx

@@ -1,11 +1,4 @@
-import {
-  Box,
-  Heading,
-  HStack,
-  Stack,
-  Text,
-  useBreakpointValue,
-} from "@chakra-ui/react"
+import { Box, Heading, HStack, Stack, Text } from "@chakra-ui/react"
 
 import type { CommonHeroProps } from "@/lib/types"
 
@@ -21,22 +14,21 @@ const HubHero = (props: CommonHeroProps) => {
     )
   }
 
-  const height = useBreakpointValue({
-    base: "192px",
-    md: "256px",
-    lg: "320px",
-    xl: "576px",
-    "2xl": "672px",
-  })
-
   return (
     <Box position="relative">
       <Image
         src={heroImg}
         alt=""
         priority
         sizes="100vw"
-        style={{ width: "100vw", objectFit: "cover", height }}
+        style={{ width: "100vw", objectFit: "cover" }}
+        h={{
+          base: "192px",
+          md: "256px",
+          lg: "320px",
+          xl: "576px",
+          "2xl": "672px",
+        }}
       />
       <Stack
         spacing={{ base: "3", md: "4" }}