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:
dwindown
2025-11-06 14:48:50 +07:00
parent 2b3452e9f2
commit 9b0b2b53f9

View File

@@ -34,10 +34,10 @@ export function SettingsLayout({
};
return (
<div className="space-y-6 lg:p-6 pb-6">
<div className="space-y-6">
{/* Sticky Header with Save Button - Edge to edge */}
{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>
<h1 className="text-lg font-semibold">{title}</h1>