fix: Sticky header positioning in WP-Admin mode
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
This commit is contained in:
@@ -34,10 +34,10 @@ export function SettingsLayout({
|
|||||||
};
|
};
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="space-y-6 lg:p-6 pb-6">
|
<div className="space-y-6">
|
||||||
{/* Sticky Header with Save Button - Edge to edge */}
|
{/* Sticky Header with Save Button - Edge to edge */}
|
||||||
{onSave && (
|
{onSave && (
|
||||||
<div className="sticky top-[49px] z-10 border-b bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60 -mx-4 px-4 lg:-mx-6 lg:px-6">
|
<div className="sticky top-0 z-10 border-b bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60 -mx-4 px-4 mb-6">
|
||||||
<div className="container px-0 max-w-5xl mx-auto py-3 flex items-center justify-between">
|
<div className="container px-0 max-w-5xl mx-auto py-3 flex items-center justify-between">
|
||||||
<div>
|
<div>
|
||||||
<h1 className="text-lg font-semibold">{title}</h1>
|
<h1 className="text-lg font-semibold">{title}</h1>
|
||||||
|
|||||||
Reference in New Issue
Block a user