WooNooW

Files

dwindown 7538316afb fix: Sticky header offset for fullscreen vs WP-Admin modes

Problem:
- Fullscreen: Sticky header covered by submenu bar
- WP-Admin: Sticky header working correctly

Root Cause:
Different layout structures in each mode:

Fullscreen Mode:
<main overflow-auto>
  <SubmenuBar sticky> ← Inside scrollable
  <SettingsLayout>
    <div sticky top-0> ← Covered by submenu!

WP-Admin Mode:
<SubmenuBar sticky> ← Outside scrollable
<main overflow-auto>
  <SettingsLayout>
    <div sticky top-0> ← Works fine

Solution:
Detect fullscreen mode and apply correct offset:
- Fullscreen: top-[49px] (offset by submenu height)
- WP-Admin: top-0 (no offset needed)

Implementation:
1. MutationObserver to detect .woonoow-fullscreen-root class
2. Dynamic sticky position based on mode
3. Re-checks on mode toggle

Code:
const [isFullscreen, setIsFullscreen] = useState(false);

useEffect(() => {
  const checkFullscreen = () => {
    setIsFullscreen(document.querySelector('.woonoow-fullscreen-root') !== null);
  };

  const observer = new MutationObserver(checkFullscreen);
  observer.observe(document.body, {
    attributes: true,
    attributeFilter: ['class'],
    subtree: true
  });

  return () => observer.disconnect();
}, []);

const stickyTop = isFullscreen ? 'top-[49px]' : 'top-0';

Result:
✅ Fullscreen: Header below submenu (49px offset)
✅ WP-Admin: Header at top (0px offset)
✅ Smooth transition when toggling modes
✅ Gap maintained in both modes (mb-6)

Files Modified:
- SettingsLayout.tsx: Dynamic sticky positioning

2025-11-06 14:51:07 +07:00