WooNooW

Files

dwindown 99748ca202 refactor: Move overflow-auto to content wrapper for proper sticky behavior

Problem:
Trying to make sticky work inside a scrollable container is complex:
- Different offsets for fullscreen vs WP-Admin
- MutationObserver to detect mode changes
- Fragile and hard to maintain

Root Cause:
<main overflow-auto>        ← Scrollable container
  <SubmenuBar sticky>        ← Sticky inside scrollable
  <SettingsLayout>
    <div sticky>             ← Nested sticky, complex offsets

Better Approach:
Move overflow-auto from <main> to content wrapper:

Before:
<main overflow-auto>
  <SubmenuBar sticky>
  <div p-4>
    <AppRoutes />

After:
<main flex flex-col>
  <SubmenuBar sticky>        ← Sticky outside scrollable ✅
  <div overflow-auto p-4>    ← Only content scrolls ✅
    <AppRoutes />

Benefits:
✅ Submenu always sticky (outside scroll container)
✅ Sticky header simple: just top-0
✅ No mode detection needed
✅ No MutationObserver
✅ Works everywhere: fullscreen, WP-Admin, standalone
✅ Cleaner, more maintainable code

Changes:
1. App.tsx:
   - <main>: overflow-auto → flex flex-col min-h-0
   - Content wrapper: p-4 → flex-1 overflow-auto p-4

2. SettingsLayout.tsx:
   - Removed fullscreen detection
   - Removed MutationObserver
   - Simplified to: sticky top-0 (always)

Layout Structure (All Modes):
┌─────────────────────────────────────┐
│ Header / TopNav                     │
├─────────────────────────────────────┤
│ <main flex flex-col>                │
│   ┌─────────────────────────────┐   │
│   │ SubmenuBar (sticky)         │   │ ← Always sticky
│   ├─────────────────────────────┤   │
│   │ <div overflow-auto>         │   │ ← Scroll here
│   │   Sticky Header (top-0)     │   │ ← Simple!
│   │   Gap (mb-6)                │   │
│   │   Content...                │   │
│   └─────────────────────────────┘   │
└─────────────────────────────────────┘

Result:
✅ Simpler code (removed 20+ lines)
✅ More reliable behavior
✅ Easier to understand
✅ Works in all modes without special cases

Files Modified:
- App.tsx: Restructured scroll containers
- SettingsLayout.tsx: Simplified sticky logic