Description
While reviewing the UI within the website3.0 codebase, I found two new layout regression bugs where body elements override the global navbar's stacking layer.
Group 1: New Stacking Context Layout Overlaps (z-index Failures)
Bug A: Homepage Newsletter Row Overlaps Navigation Header on Scroll
Location: website3.0/src/app/page.js (or HomePage layout layout file)
Visual Behavior: When scrolling down the landing page, the newsletter subscription container stacks on top of the fixed layout header wrapper instead of cleanly sliding beneath it.
Technical Root Cause: The layout container div wrapper for the newsletter block explicitly declares an aggressive utility property configuration (z-[50]). This forces it into the same layer level tier as the sticky viewport navbar.
Expected Resolution: Remove the z-[50] wrapper property class from the newsletter container so it rests on the default layout layer flow (z-0).
Bug B: Forums Search Input Crosses Layer over the Sticky Header
Location: website3.0/components/ForumPage.jsx
Visual Behavior: The main "Search for Topics..." text input field visually overlaps the lower boundary frame area of the global header container.
Technical Root Cause: The text element uses a hardcoded z-50 utility definition class inside its template layout string, pulling it completely out of its standard content stack.
Expected Resolution: Strip the z-50 property class from the input element wrapper entirely so it plays nicely with the header layer.
Group 2: Existing Open Issues (Theme & Responsive Glitches)
Note: The issues in Group 2 are already opened in the repo but are currently unassigned/unworked, i can fix them as well if you want in a single PR, as they are related to navbar only.
Bug C: Forums Header Displays Solid White Background at Scroll Boundary Zero (Dark Mode)
Location: website3.0/components/ForumPage.jsx
Visual Behavior: Opening the Forums page view directly in active dark mode forces a solid white canvas background layout layer for the navbar header at scroll position zero (scrollY === 0), rendering the light-colored links invisible. It only corrects itself once a scroll event fires.
Technical Root Cause: The navigation header conditional theme configuration relies entirely on active window scroll event indicators to load variable theme assignments.
Expected Resolution: Ensure the base parent wrapper natively handles dark mode utility properties from initial render (e.g., bg-white dark:bg-zinc-900 or utilizing bg-transparent).
Bug D: Mobile Drawer Transparent Frame Render at Top of Screen Viewport
Visual Behavior: Toggling the responsive mobile hamburger action button from an unscrolled state loads a layout drawer that is completely transparent, making text overlap illegibly over the homepage hero section.
Technical Root Cause: The mobile interactive menu wrapper checks the dynamic isScrolled application state variable to apply solid background canvas layout blocks instead of listening natively to its own localized isMenuOpen layout status updates.
Expected Resolution: Adjust the conditional evaluation properties template pattern logic block to apply proper, solid layout canvas properties if either conditional evaluation flags return true:
const navbarBgStyle = (isScrolled || isMenuOpen) ? 'bg-zinc-950' : 'bg-transparent';
Screenshots:
(Notice the navbar)
What browser are you seeing the problem on?
Chrome
Checklist
Description
While reviewing the UI within the website3.0 codebase, I found two new layout regression bugs where body elements override the global navbar's stacking layer.
Group 1: New Stacking Context Layout Overlaps (z-index Failures)
Bug A: Homepage Newsletter Row Overlaps Navigation Header on Scroll
Location: website3.0/src/app/page.js (or HomePage layout layout file)
Visual Behavior: When scrolling down the landing page, the newsletter subscription container stacks on top of the fixed layout header wrapper instead of cleanly sliding beneath it.
Technical Root Cause: The layout container div wrapper for the newsletter block explicitly declares an aggressive utility property configuration (z-[50]). This forces it into the same layer level tier as the sticky viewport navbar.
Expected Resolution: Remove the z-[50] wrapper property class from the newsletter container so it rests on the default layout layer flow (z-0).
Bug B: Forums Search Input Crosses Layer over the Sticky Header
Location: website3.0/components/ForumPage.jsx
Visual Behavior: The main "Search for Topics..." text input field visually overlaps the lower boundary frame area of the global header container.
Technical Root Cause: The text element uses a hardcoded z-50 utility definition class inside its template layout string, pulling it completely out of its standard content stack.
Expected Resolution: Strip the z-50 property class from the input element wrapper entirely so it plays nicely with the header layer.
Group 2: Existing Open Issues (Theme & Responsive Glitches)
Note: The issues in Group 2 are already opened in the repo but are currently unassigned/unworked, i can fix them as well if you want in a single PR, as they are related to navbar only.
Bug C: Forums Header Displays Solid White Background at Scroll Boundary Zero (Dark Mode)
Location: website3.0/components/ForumPage.jsx
Visual Behavior: Opening the Forums page view directly in active dark mode forces a solid white canvas background layout layer for the navbar header at scroll position zero (scrollY === 0), rendering the light-colored links invisible. It only corrects itself once a scroll event fires.
Technical Root Cause: The navigation header conditional theme configuration relies entirely on active window scroll event indicators to load variable theme assignments.
Expected Resolution: Ensure the base parent wrapper natively handles dark mode utility properties from initial render (e.g., bg-white dark:bg-zinc-900 or utilizing bg-transparent).
Bug D: Mobile Drawer Transparent Frame Render at Top of Screen Viewport
Visual Behavior: Toggling the responsive mobile hamburger action button from an unscrolled state loads a layout drawer that is completely transparent, making text overlap illegibly over the homepage hero section.
Technical Root Cause: The mobile interactive menu wrapper checks the dynamic isScrolled application state variable to apply solid background canvas layout blocks instead of listening natively to its own localized isMenuOpen layout status updates.
Expected Resolution: Adjust the conditional evaluation properties template pattern logic block to apply proper, solid layout canvas properties if either conditional evaluation flags return true:
const navbarBgStyle = (isScrolled || isMenuOpen) ? 'bg-zinc-950' : 'bg-transparent';
Screenshots:
(Notice the navbar)
What browser are you seeing the problem on?
Chrome
Checklist