Add space above title on mobile

[MathyouMB]

As a mobile user, I want proper spacing above the page title so that the content doesn’t feel cramped and is easier to read at the top of the screen.

---

🧠 Context

Currently, on mobile viewports, the page title appears too close to the top edge of the screen. This lack of vertical padding makes the UI feel cramped and can negatively impact readability and visual hierarchy.

On desktop:

On Mobile (It's cramped)

---

🛠️ Implementation Plan

1. Identify where the title is rendered

You'll find the text on this file src/components/Header/Header.tsx

2. Apply mobile-specific spacing

   • Add top margin or padding using a media query or utility class

   • Example:

     @media (max-width: 768px) {
       h1 {
         margin-top: 1.5rem;
       }
     }

---

✅ Acceptance Criteria

• Page titles have appropriate top spacing on mobile devices
• The change does not affect desktop layout or spacing