[BUG] Top header spacing/layout breaks while scrolling on mobile

[codewithtamim]

Bug report

Describe your environment

• OS name and version: Android Chrome

Describe the problem

While scrolling on mobile devices, the top header/navigation area becomes visually inconsistent and leaves excessive empty spacing below the header section.

The layout appears misaligned after scrolling, causing the content positioning to look broken or improperly spaced.

Check the screenshots.

Steps to reproduce:

1. Open the site on a mobile browser.
2. Navigate to the Setup page or any page.
3. Scroll down the page.
4. Observe the top header and spacing/layout behavior.

Observed Results:

• The header area/layout leaves awkward empty spacing and appears visually broken or inconsistent while scrolling on mobile.

Expected Results:

• The header and content spacing should remain consistent and properly aligned during scrolling on mobile devices.

Relevant Code:

check screenshots

// TODO(you): code here to reproduce the problem