mirror of
https://github.com/Dvorinka/MyClubServer.git
synced 2026-06-04 18:52:56 +00:00
Tomas Dvorak
120 lines
4.2 KiB
Markdown
120 lines
4.2 KiB
Markdown
# 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:**
|
|
```css
|
|
.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:**
|
|
```css
|
|
.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`
|