Improve global layout, spacing, and smooth scrolling on landing/dashboard pages

[Athina09]

Summary

• Refine the global layout and spacing of the KYL landing/dashboard to make sections feel clearer and less dense.
• Implement a consistent 12‑column grid with defined content vs side-panel widths.
• Improve text readability by constraining line length and adding consistent vertical padding.
• Add smooth scrolling and in-page navigation between the Know / Plan / Track & Assess sections.

What changed

Layout & spacing

• Global container

  • Wrap the main dashboard content in a centered max-width container (max-w-7xl mx-auto) with consistent horizontal padding (px-4) and vertical padding (py-8).
  • Ensure the main content area sits correctly under the sticky navbar and fills the viewport height.

• 12‑column grid

  • Replace the previous single flex row with a 12‑column grid for the KYL dashboard:
    • Left sidebar: 3 columns.
    • Map / primary content: 6 columns.
    • Right sidebar: 3 columns.
  • This satisfies the requirement to keep primary content in 8–9 columns and side panels in ~3–4 columns, and keeps headings, text, and controls aligned.

• Section spacing & readability

  • Add consistent top/bottom padding around major sections so each feels like a distinct block.
  • Restrict long text blocks to a constrained width on large screens (via the centered container and section widths) to improve line length.
  • Normalize spacing between section headers, body copy, and cards so the visual rhythm is more regular.

Smooth scrolling

• Global

  • Enable smooth scrolling on the root html element: scroll-behavior: smooth;.

• Landing scroll container

  • Update the dedicated landing-scroll-container to use scroll-behavior: smooth instead of auto, while preserving existing scroll-padding and momentum scrolling config.

• In-page navigation (Know / Plan / Track & Assess)

  • Add a small nav bar under the header with three chips:
    • Know
    • Plan
    • Track & Assess
  • Introduce a scrollToSection helper that:
    • Uses Lenis (lenis.scrollTo('#section-id', { duration, offset })) when available for ultra-smooth scrolling.
    • Falls back to element.scrollIntoView({ behavior: 'smooth', block: 'start' }) when Lenis is not yet initialised.
  • Add stable IDs to the three sections:
    • landing-know-section
    • landing-plan-section
    • landing-track-section
  • Wire each chip to call scrollToSection(...) with the corresponding section ID.

Rationale

• The previous layout caused content to feel dense and stretched edge‑to‑edge on larger screens, making it harder to scan the three main flows (Know / Plan / Track & Assess).
• A grid-based layout plus constrained content width makes hierarchy clearer and lines easier to read.
• Smooth scrolling and in-page navigation improve perceived polish and help users orient themselves within the long landing page.

Files touched (high level)

• kyl_dashboard.jsx

  • Wrap dashboard content in a max-width container.
  • Replace the flex row with a 12‑column grid (3 / 6 / 3 for sidebars and map).
  • Adjust height calculations to respect the sticky navbar and vertical padding.

• index.css

  • Add global html { scroll-behavior: smooth; }.
  • Change .landing-scroll-container to scroll-behavior: smooth.

• LE_homepage.jsx

  • Add scrollToSection helper that integrates with Lenis and provides a smooth-scroll fallback.
  • Introduce the Know / Plan / Track & Assess chip bar under the header.
  • Add IDs to the three major sections for anchor-based scrolling.

Acceptance criteria checklist

• Major landing/dashboard sections are visually separated with consistent vertical padding.
• Headings, body text, cards, and primary buttons align to a shared grid on desktop.
• Text blocks do not span excessively wide lines on large screens (within the new max-width container).
• Clicking the Know / Plan / Track & Assess chips smoothly scrolls to the corresponding section.
• Manual scrolling remains responsive and works correctly with Lenis and without it.