MyClub/DOCS/MYUIBRIX_QUICK_TEST.md

MyUIbrix Full-Width Fix - Quick Test Guide

What Was Fixed

✅ 100% width - Editor now uses full viewport width
✅ Responsive - Properly handles desktop/tablet/mobile viewports
✅ Navigation fixed - Navbar stays visible and above the editor
✅ Z-index correct - Overlay doesn't cover navbar or toolbar

Quick Test Steps

1. Open homepage as admin

   • Navigate to / while logged in as admin
   • Click the floating "Edit" button (if visible) or use MyUIbrix toolbar

2. Verify full width

   • Editor viewport should span 100% of browser width
   • No white space on sides (except the gray overlay shadow)
   • Content sections should be edge-to-edge

3. Check navigation

   • Navbar should be visible at the top
   • Navbar should be ABOVE the gray overlay
   • Navbar should remain functional (sticky scrolling)

4. Test toolbar

   • MyUIbrix toolbar should be at the very top
   • Yellow/primary color bar with logo and controls
   • Should be above both navbar and viewport

5. Test viewports

   • Click Desktop icon (monitor) - should be 100% width
   • Click Tablet icon - should show 768px with scaling
   • Click Mobile icon - should show 375px with scaling
   • Each should have proper border and shadow

6. Test exit

   • Click the X button to close editor
   • Page should return to normal layout
   • Navbar should remain visible
   • Container padding should be restored

Expected Z-Index Stack (top to bottom)

┌─────────────────────────────────────────┐
│  MyUIbrix Toolbar (z-index: 9999)       │ ← Yellow bar
├─────────────────────────────────────────┤
│  Navbar (z-index: 1000)                 │ ← Site navigation
├─────────────────────────────────────────┤
│  Gray Overlay Shadow                    │ ← Semi-transparent
├─────────────────────────────────────────┤
│  Viewport Wrapper (z-index: 1)          │ ← White content area
│  ┌───────────────────────────────────┐  │
│  │ Hero Section                      │  │
│  │ Matches Section                   │  │
│  │ Blog Section                      │  │
│  │ ... etc ...                       │  │
│  └───────────────────────────────────┘  │
└─────────────────────────────────────────┘

Troubleshooting

Navbar still covered?

• Clear browser cache and hard refresh (Ctrl+Shift+R)
• Check browser console for errors
• Verify Navbar has position="sticky" zIndex={1000}

Still not 100% width?

• Check if Chakra Container styles are being overridden
• Inspect viewport wrapper - should have width: 100%; max-width: 100%
• Verify no conflicting CSS from other sources

Layout broken after closing editor?

• This shouldn't happen - Container styles are restored
• If it does, refresh the page
• Check console for cleanup errors

Browser DevTools Check

Open DevTools and inspect the .myuibrix-viewport-wrapper:

Should see:

.myuibrix-viewport-wrapper {
  width: 100%;
  max-width: 100%;
  z-index: 1;
  position: relative;
  background: white;
  box-shadow: 0 0 0 9999px rgba(0,0,0,0.15);
}

Container should have during editing:

.chakra-container {
  max-width: none;
  padding: 0;
  width: 100%;
}

Success Criteria

✅ Viewport wrapper is 100% browser width
✅ Navbar visible and functional
✅ Toolbar visible at very top
✅ Gray overlay doesn't cover nav/toolbar
✅ Can edit all sections
✅ Can drag/reorder sections
✅ Viewport switching works (desktop/tablet/mobile)
✅ Closing editor restores normal layout

Status

If all tests pass: WORKING ✅
If any test fails: Check console for errors and refer to MYUIBRIX_RESPONSIVE_FIX.md