WooNooW

Files

dwindown 57cb8db2fa fix: Clean up mobile layout and FAB styling

Fixed 4 critical mobile UX issues:

1. ✅ Fixed pt-16 Logic
   Problem: pt-16 applied even when header was hidden
   Solution: Only add pt-16 when NOT in fullscreen mode

   Before:
   <div className={`... ${isStandalone ? 'pt-0' : 'pt-16'}`}>

   After:
   <div className={`... ${fullscreen ? 'pt-0' : 'pt-16'}`}>

   Result: No wasted space when header is hidden

2. ✅ Applied Fullscreen Logic to WP-Admin Fullscreen
   Problem: Header only hidden in standalone, not wp-admin fullscreen
   Solution: Hide header on mobile for BOTH modes

   Before:
   if (isStandalone && window.innerWidth < 768) return null;

   After:
   if (fullscreen && window.innerWidth < 768) return null;

   Result: Consistent behavior across all fullscreen modes

3. ✅ Non-Fullscreen Layout
   Status: Already correct, no changes needed
   Layout: WP Admin Bar → Top Nav → Submenu → Page Header → Content

4. ✅ Redesigned FAB
   Problems:
   - Position too high (bottom-72px)
   - Using Button component (unnecessary)
   - Rounded rectangle (should be circle)
   - Wrong shadow intensity

   Solutions:
   - Changed to bottom-20 (80px from bottom, above nav)
   - Direct button element (lighter, faster)
   - rounded-full (perfect circle)
   - Better shadow: shadow-lg → shadow-2xl on hover
   - Added active:scale-95 for tactile feedback
   - Increased z-index to z-50

   Before:
   <Button size="lg" className="... bottom-[72px] ... rounded-2xl">

   After:
   <button className="... bottom-20 ... rounded-full ... active:scale-95">

   Result: Clean, modern FAB with proper Material Design specs

Mobile Layout (Fullscreen):
┌─────────────────────────────────┐
│ (No header - no wasted space!)  │ ← Fixed!
├─────────────────────────────────┤
│ Submenu (top-0)                 │
├─────────────────────────────────┤
│ Page Title                      │
├─────────────────────────────────┤
│ Content                         │
│                                 │
│                          ( + )  │ ← Clean FAB!
├─────────────────────────────────┤
│ Bottom Nav                      │
└─────────────────────────────────┘

FAB Specs (Material Design):
- Size: 56x56px (w-14 h-14)
- Shape: Perfect circle (rounded-full)
- Position: 16px from right, 80px from bottom
- Color: Primary theme color
- Shadow: Elevated (shadow-lg)
- Hover: More elevated (shadow-2xl)
- Active: Scale down (scale-95)
- Z-index: 50 (above everything)

Files Modified:
- App.tsx: Fixed header hide logic and padding
- FAB.tsx: Complete redesign

Result: Clean, professional mobile UX! ✨

2025-11-06 22:28:30 +07:00