REFACTOR: Refine Sections Content Width

Description

This PR addresses minor layout inconsistencies related to the width of page sections and removes the minimum width restriction, which was causing bugs on smaller mobile devices.

Task Link

Project Figma

Changes Made

Removed the minimum width restriction and ensured the overlay menu takes the entire available view height.
Updated the--max-content-width CSS variable to 1184px.
Utilized the --page-side-padding and --max-content-width CSS variables for page sections to ensure a consistent look and enhance maintainability.

Screenshots, GIFs, or videos

The video below illustrates how the minimum width restriction was causing horizontal scrolling on mobile devices with screens less than 414px wide:

https://github.com/user-attachments/assets/6adebd5d-3bee-4451-bfbf-6e8184f8a388

Usage

By setting up the --max-content-width and --page-side-padding CSS variables in globals.css, we can now simplify most section setups and make them easier to maintain for future design changes.

/* globals.css */
:root {
  --max-content-width: 1184px;
  --page-side-padding: 16px;
  ...
}

@media screen and (min-width: 768px) {
  :root {
    --page-side-padding: 24px;
  }
}

@media screen and (min-width: 1272px) {
  :root {
    --page-side-padding: 48px;
  }
}

This simplified setup will ensure the correct section width across all devices.

.root {
  width: 100%;
  max-width: calc(100% - (var(--page-side-padding) * 2));
  margin: 0 auto;
}

@media screen and (min-width: 1272px) {
  .root {
    max-width: var(--max-content-width);
  }
}

Name	Link
Latest commit	5d7d166a70aa0b14ea27157036802046ba089d45
Latest deploy log	https://app.netlify.com/sites/one-fall/deploys/66a28ff9730a570008957d9f
Deploy Preview	https://deploy-preview-23--one-fall.netlify.app
Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

naumch1k / one-fall