From 9b0b2b53f9b10680aadf6507f8e2ed77e392cb29 Mon Sep 17 00:00:00 2001
From: dwindown <dwinx.ramz@gmail.com>
Date: Thu, 6 Nov 2025 14:48:50 +0700
Subject: [PATCH] fix: Sticky header positioning in WP-Admin mode
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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
---
 admin-spa/src/routes/Settings/components/SettingsLayout.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/admin-spa/src/routes/Settings/components/SettingsLayout.tsx b/admin-spa/src/routes/Settings/components/SettingsLayout.tsx
index 2bc255c..a771052 100644
--- a/admin-spa/src/routes/Settings/components/SettingsLayout.tsx
+++ b/admin-spa/src/routes/Settings/components/SettingsLayout.tsx
@@ -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>