feat: restore hero background on home, about and roadmap pages (#636)

Fran McDade · frano-m · commit dcd525489b76 · 2025-07-11T18:05:07.000+10:00
diff --git a/app/components/Home/components/Section/components/SectionHero/components/Hero/hero.tsx b/app/components/Home/components/Section/components/SectionHero/components/Hero/hero.tsx
@@ -19,11 +19,13 @@ import { SVG } from "./hero.styles";
 export interface HeroProps {
   gridSize?: number;
   height?: number;
+  width?: number;
 }
 
 export const Hero = ({
   gridSize = GRID_SIZE,
   height = gridSize * 3,
+  width = 0,
 }: HeroProps): JSX.Element => {
   return (
     <SVG
@@ -46,7 +48,7 @@ export const Hero = ({
             <rect
               fill={getFillUrl(elementId)}
               height={height}
-              width="100%"
+              width={width}
               x={0}
               y={0}
             />
diff --git a/app/components/Home/components/Section/components/SectionHero/sectionHero.tsx b/app/components/Home/components/Section/components/SectionHero/sectionHero.tsx
@@ -17,9 +17,13 @@ import {
 export const SectionHero = (): JSX.Element => {
   return (
     <StyledSection>
-      {(height): JSX.Element => (
+      {(height, width): JSX.Element => (
         <Fragment>
-          <Hero gridSize={calculateGridSize(height)} height={height} />
+          <Hero
+            gridSize={calculateGridSize(height)}
+            height={height}
+            width={width}
+          />
           <SectionLayout>
             <Headline>
               <Head>
diff --git a/app/components/Layout/components/AppLayout/components/Section/components/SectionHero/components/Hero/hero.styles.ts b/app/components/Layout/components/AppLayout/components/Section/components/SectionHero/components/Hero/hero.styles.ts
@@ -2,5 +2,6 @@ import styled from "@emotion/styled";
 
 export const SVG = styled.svg`
   position: absolute;
+  width: 100vw;
   z-index: -1;
 `;
diff --git a/app/components/Layout/components/AppLayout/components/Section/components/SectionHero/components/Hero/hero.tsx b/app/components/Layout/components/AppLayout/components/Section/components/SectionHero/components/Hero/hero.tsx
@@ -11,19 +11,20 @@ import { SVG } from "./hero.styles";
 export interface HeroProps {
   gridSize?: number;
   height?: number;
+  width?: number;
 }
 
 export const Hero = ({
   gridSize = GRID_SIZE,
   height = gridSize * 1.5,
+  width = 0,
 }: HeroProps): JSX.Element => {
   return (
     <SVG
       fill={FILL.NONE}
       height={height}
       preserveAspectRatio="xMinYMin meet"
       viewBox={getViewBox(gridSize, height)}
-      width="100%"
       xmlns="http://www.w3.org/2000/svg"
     >
       <SmokeRect gridSize={gridSize} />
@@ -36,7 +37,7 @@ export const Hero = ({
             <rect
               fill={getFillUrl(elementId)}
               height={height}
-              width="100%"
+              width={width}
               x={0}
               y={0}
             />
diff --git a/app/components/Layout/components/AppLayout/components/Section/components/SectionHero/sectionHero.tsx b/app/components/Layout/components/AppLayout/components/Section/components/SectionHero/sectionHero.tsx
@@ -27,9 +27,13 @@ export const SectionHero = ({
 }: SectionHeroProps): JSX.Element => {
   return (
     <StyledSection>
-      {(height): JSX.Element => (
+      {(height, width): JSX.Element => (
         <Fragment>
-          <Hero gridSize={calculateGridSize(height)} height={height} />
+          <Hero
+            gridSize={calculateGridSize(height)}
+            height={height}
+            width={width}
+          />
           <SectionLayout>
             <Headline>
               <Breadcrumbs breadcrumbs={breadcrumbs} />
diff --git a/app/components/common/Section/section.tsx b/app/components/common/Section/section.tsx
@@ -1,22 +1,22 @@
 import {
-  getBorderBoxSizeHeight,
+  getBorderBoxSize,
   useResizeObserver,
 } from "@databiosphere/findable-ui/lib/hooks/useResizeObserver";
 import { useRef } from "react";
 import { StyledSection } from "./section.styles";
 
 export interface SectionProps {
-  children: (height?: number) => JSX.Element;
+  children: (height?: number, width?: number) => JSX.Element;
   className?: string;
 }
 
 export const Section = ({ children, className }: SectionProps): JSX.Element => {
   const sectionRef = useRef<HTMLElement>(null);
-  const { height } =
-    useResizeObserver(sectionRef, getBorderBoxSizeHeight) || {};
+  const { height, width } =
+    useResizeObserver(sectionRef, getBorderBoxSize) || {};
   return (
     <StyledSection className={className} ref={sectionRef}>
-      {children?.(height)}
+      {children?.(height, width)}
     </StyledSection>
   );
 };
