Problem Analysis:
1. Sticky header had no gap with first card
2. Sticky header not staying sticky when scrolling in WP-Admin
Root Cause:
The sticky header is inside a scrollable container:
<main className="flex-1 p-4 overflow-auto">
<SettingsLayout>
<div className="sticky top-[49px]"> ← Wrong!
When sticky is inside a scrollable container, it sticks relative
to that container, not the viewport. The top offset should be
relative to the scrollable container's top, not the viewport.
Solution:
1. Changed sticky position from top-[49px] to top-0
- Sticky is relative to scrollable parent (<main>)
- top-0 means stick to top of scrollable area
2. Added mb-6 for gap between header and content
- Prevents header from touching first card
- Maintains consistent spacing
Before:
<div className="sticky top-[49px] ...">
↑ Trying to offset from viewport (wrong context)
After:
<div className="sticky top-0 mb-6 ...">
↑ Stick to scrollable container top (correct)
↑ Add margin for gap
Layout Structure:
┌─────────────────────────────────────┐
│ WP Admin Bar (32px) │
├─────────────────────────────────────┤
│ WP Menu (112px) │
├─────────────────────────────────────┤
│ Submenu Bar (49px) - sticky │
├─────────────────────────────────────┤
│ <main overflow-auto> ← Scroll here │
│ ┌─────────────────────────────┐ │
│ │ Sticky Header (top-0) │ │ ← Sticks here
│ ├─────────────────────────────┤ │
│ │ Gap (mb-6) │ │
│ ├─────────────────────────────┤ │
│ │ First Card │ │
│ │ Content... │ │
│ └─────────────────────────────┘ │
└─────────────────────────────────────┘
Result:
✅ Sticky header stays at top when scrolling
✅ Gap between header and content (mb-6)
✅ Works in both fullscreen and WP-Admin modes
✅ Edge-to-edge background maintained
Files Modified:
- SettingsLayout.tsx: Simplified sticky positioning
9b0b2b53f9