feat: restore hero background on home, about and roadmap pages (#636) #646
Conversation
frano-m
force-pushed
the
fran/636-hero-svg
branch
from
6a2aac3 to
dcd5254
Compare
There was a problem hiding this comment.
Pull Request Overview
This PR restores the hero background on multiple pages by introducing dynamic width support alongside height in the Section, SectionHero, and Hero components, and ensuring the SVG scales correctly.
- Section now observes both height and width via
getBorderBoxSize SectionHeropasses the newwidthprop down toHeroHeroacceptswidthand applies it to the<rect>, with styling updated for responsive scaling
Reviewed Changes
Copilot reviewed 6 out of 6 changed files in this pull request and generated 3 comments.
Show a summary per file
| File | Description |
|---|---|
| app/components/common/Section/section.tsx | Switched to getBorderBoxSize and updated children signature to (height, width) |
| app/components/Layout/components/AppLayout/components/Section/components/SectionHero/sectionHero.tsx | Passed width into Hero in layout section |
| app/components/Home/components/Section/components/SectionHero/sectionHero.tsx | Passed width into Hero in home section |
| app/components/Layout/components/AppLayout/components/Section/components/SectionHero/components/Hero/hero.tsx | Added width prop to Hero and used it for <rect> width |
| app/components/Home/components/Section/components/SectionHero/components/Hero/hero.tsx | Added width prop to Hero and used it for <rect> width |
| app/components/Layout/components/AppLayout/components/Section/components/SectionHero/components/Hero/hero.styles.ts | Changed SVG to width: 100vw for responsive layout |
| className?: string; | ||
| } | ||
|
|
||
| export const Section = ({ children, className }: SectionProps): JSX.Element => { | ||
| const sectionRef = useRef<HTMLElement>(null); | ||
| const { height } = | ||
| useResizeObserver(sectionRef, getBorderBoxSizeHeight) || {}; | ||
| const { height, width } = |
There was a problem hiding this comment.
The width from useResizeObserver may be undefined on initial render, causing downstream components to receive width=undefined. Consider providing a fallback (e.g., 0) or conditional rendering until both dimensions are available.
| const { height, width } = | |
| const { height = 0, width = 0 } = |
Copilot uses AI. Check for mistakes.
There was a problem hiding this comment.
We do this in the SVG component.
| } | ||
|
|
||
| export const Hero = ({ | ||
| gridSize = GRID_SIZE, | ||
| height = gridSize * 1.5, | ||
| width = 0, |
There was a problem hiding this comment.
Defaulting width to 0 means the <rect> has zero width when no width is passed, making the background invisible. Consider defaulting to the container width or making width required.
| width = 0, | |
| width = gridSize, |
Copilot uses AI. Check for mistakes.
There was a problem hiding this comment.
I'm ok with this. Better to show nothing (while waiting for width), than a partial <rect/>.
| @@ -2,5 +2,6 @@ import styled from "@emotion/styled"; | |||
|
|
|||
| export const SVG = styled.svg` | |||
| position: absolute; | |||
| width: 100vw; | |||
There was a problem hiding this comment.
[nitpick] Hardcoding width: 100vw can lead to misalignment or overflow relative to the container. Consider using width: 100% or binding the SVG’s width to the observed width prop for more accurate scaling.
| width: 100vw; | |
| width: 100%; |
Copilot uses AI. Check for mistakes.
github-project-automation
bot
moved this from Ready for Review
to Done
in BRC development tasks
Closes #636.
This pull request introduces updates to the
HeroandSectionHerocomponents to support dynamic width calculations alongside height. It also modifies theSectioncomponent to provide both height and width dimensions via theuseResizeObserverhook. These changes improve layout flexibility and responsiveness.Updates to
HeroandSectionHerocomponents:widthprop to theHerocomponent and updated its default value to0. Thewidthprop is now used in the<rect>element instead of the hardcoded"100%". (app/components/Home/components/Section/components/SectionHero/components/Hero/hero.tsx: [1] [2];app/components/Layout/components/AppLayout/components/Section/components/SectionHero/components/Hero/hero.tsx: [3] [4]SectionHerocomponent to pass thewidthprop to theHerocomponent, enabling dynamic width calculation. (app/components/Home/components/Section/components/SectionHero/sectionHero.tsx: [1];app/components/Layout/components/AppLayout/components/Section/components/SectionHero/sectionHero.tsx: [2]Enhancements to
Sectioncomponent:Sectioncomponent to use thegetBorderBoxSizefunction instead ofgetBorderBoxSizeHeight, allowing it to calculate both height and width. Updated thechildrenfunction signature to acceptwidthalongsideheight. (app/components/common/Section/section.tsx: app/components/common/Section/section.tsxL2-R19)Styling adjustment:
SVGstyled component to setwidthto100vw, ensuring proper scaling in responsive layouts. (app/components/Layout/components/AppLayout/components/Section/components/SectionHero/components/Hero/hero.styles.ts: app/components/Layout/components/AppLayout/components/Section/components/SectionHero/components/Hero/hero.styles.tsR5)