Merge pull request #9980 from ethereum/fix-layer2-toid-scroll

fix: broken PageHero buttons on the Layer2 page

Author: corwintines

src/components/PageHero.tsx

@@ -92,7 +92,7 @@ const PageHero: React.FC<IProps> = ({
             {subtitle}
           </Box>
           {buttons && (
-            <Wrap spacing={2} overflow={"visible"}>
+            <Wrap spacing={2} overflow="visible">
               {buttons.map((button, idx) => {
                 if (isButtonLink(button)) {
                   return (

src/pages/layer-2.tsx

@@ -6,6 +6,7 @@ import { useI18next, useTranslation } from "gatsby-plugin-react-i18next"
 import {
   Badge,
   Box,
+  BoxProps,
   Center,
   Divider,
   DividerProps,
@@ -72,20 +73,17 @@ const SectionHeading = (props: HeadingProps) => {
   return <Heading {...mergeProps} />
 }
 
-const ContentBox = (
-  props: HTMLAttributes<"div"> & {
-    children: ReactNode
-    isLightGrayBg?: boolean
-  }
-) => (
+interface ContentBoxProps extends BoxProps {
+  isLightGrayBg?: boolean
+}
+const ContentBox: React.FC<ContentBoxProps> = ({ isLightGrayBg, ...rest }) => (
   <Box
     px={8}
     py={12}
     width="full"
-    {...(props.isLightGrayBg && { background: "layer2ContentSecondary" })}
-  >
-    {props.children}
-  </Box>
+    {...(isLightGrayBg && { background: "layer2ContentSecondary" })}
+    {...rest}
+  />
 )
 
 const StyledInfoIcon = () => (