simplify page styling logic (fixes #3 #1)

[RyanS4]

Fixes #3
Fixes #1

• Reduces reused code for mobile-specific text and header styling
• Implements class-specific styling for navbar components
• Implements screen size identifiers for style logic

[Copilot]

Pull request overview

This PR simplifies responsive styling by removing duplicated “mobile” component variants and instead applying breakpoint-based MUI sx styles to keep the Home header text and NavBar elements from overflowing on smaller screens.

Changes:

• Replaced the separate mobile Home render path with responsive Typography sizing via MUI breakpoints.
• Removed the separate mobile NavBar render path and centralized button/title styling into shared style objects.
• Introduced breakpoint-driven sizing/margins intended to prevent text/nav overflow on small screens.

Reviewed changes

Copilot reviewed 2 out of 2 changed files in this pull request and generated 1 comment.

File	Description
green-day-website/src/Pages/Home.jsx	Removes mobile-specific branching and uses responsive sx font sizing for the homepage header.
green-day-website/src/components/NavBar.jsx	Removes mobile-only NavBar variant and introduces reusable styles for title/buttons.

Comments suppressed due to low confidence (2)

green-day-website/src/Pages/Home.jsx:12

• Mobile-specific rendering was removed, but the imports for PageHeader, React, and useMediaQuery are now unused (and import { React } from 'react' is not a valid React import). This will trip linters and can cause bundler warnings/errors; please remove the unused imports.

    return (
        <Box sx={{ flexGrow: 1 }}>
            <NavBar />

green-day-website/src/components/NavBar.jsx:19

• useMediaQuery is no longer used after removing the mobile-only NavBar path, so the react-responsive import is now unused. Please remove it to keep the file warning-free.

    navigate(page);
    }

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[Copilot]

Fixed in the latest commit. The Toolbar now has flexWrap: { xs: 'wrap', sm: 'nowrap' } and the logo/title Box has width: { xs: '100%', sm: 'auto' }, so on small screens the logo and title occupy the full first row and the nav buttons wrap to the next line.