“Time to next block” stat renders above sticky submenu on /resources scroll

[minimalsm]

Description

On ethereum.org/resources, when the user scrolls and the submenu (Privacy & security, Ethereum resilience, etc.) becomes sticky at the top, the “Time to next block” circular stat remains rendered above the sticky menu.

This results in a visual overlap, where the stat’s animated arc cuts in front of the navigation — which is unexpected and breaks visual hierarchy.

Steps to Reproduce

1. Go to https://ethereum.org/en/resources
2. Scroll slowly until the submenu (Privacy & security, etc.) becomes sticky
3. Watch how the circular timer from the “Time to next block” section overlaps the sticky menu

Expected Behavior

The sticky submenu should always render on top of other page content, including animated stat elements.

Actual Behavior

The circular stat arc renders above the sticky submenu — breaking layering expectations.

[minimalsm]

@claude please investigate and fix this issue with a PR

[claude]

Claude finished @minimalsm's task —— View job • claude/issue-15712-20250625_093726 • Create PR ➔

---

Fixed z-index layering issue on /resources page ✅

The issue where the "Time to next block" circular stat overlapped the sticky submenu on the /resources page has been resolved.

Todo List:

• Read repository guidelines and understand codebase structure
• Locate the /resources page and its components
• Find the sticky submenu component and its z-index styling
• Locate the "Time to next block" stat component and its z-index
• Fix the z-index layering issue
• Test the changes
• Commit changes and provide PR link

Solution:

Fixed the z-index layering by adding z-base (z-index: 0) to the RadialChart component. This ensures it renders below the sticky navigation which uses z-sticky (z-index: 1100).

Change made:

• src/components/RadialChart/index.tsx:76 - Added z-base class to the chart container

Technical Details:

• Root cause: RadialChart SVG elements were creating their own stacking context and appearing above sticky nav
• Fix: Set explicit z-index on RadialChart to be lower than sticky navigation
• z-index hierarchy: RadialChart (0) < ResourcesNav (1100) ✅

---