MyClub/DOCS/MYUIBRIX_VIEWPORT_AND_STYLES_FIX.md

# MyUIbrix Viewport and Style Changes Fix

## Issues Identified

### 1. Blank First Section
**Problem:** The viewport wrapper was targeting `.chakra-container` which wraps both the navigation AND the page content. This caused:
- Two viewport wrappers being created (one for nav, one for content)
- Navigation elements appearing in a blank section
- Page content appearing below in a separate wrapper

**Root Cause:** MainLayout uses `<Container maxW="container.xl">` (Chakra component) which renders as `.chakra-container`. HomePage has its own `.container` div inside this Chakra Container. MyUIbrix was wrapping the Chakra Container's children instead of the specific `.container` div.

**Solution:** Updated `MyUIbrixEditor.tsx` (lines 1154-1198) to:
- Target `.container` specifically instead of `.chakra-container`
- Move children from `.container` into the viewport wrapper
- Keep the wrapper INSIDE `.container` instead of replacing it
- Preserve the DOM structure that React expects

### 2. Style Changes Not Working
**Problem:** Style changes from VisualStylePanel weren't being applied to elements.

**Root Cause:** The `applyDOMOrder` function in `usePageElementConfig.ts` was looking for elements in `.container`, but when MyUIbrix is active, elements are inside `.myuibrix-viewport-wrapper` which is inside `.container`.

**Solution:** Updated `usePageElementConfig.ts` (lines 49-53) to:
- Check for `.myuibrix-viewport-wrapper` first
- Fall back to `.container` if wrapper doesn't exist
- This ensures element queries work in both edit and non-edit modes

## Files Modified

### 1. `/frontend/src/components/editor/MyUIbrixEditor.tsx`
**Lines 1154-1198:** Updated viewport wrapper creation
- Changed from targeting `.chakra-container` to `.container`
- Modified DOM manipulation to work within `.container`
- Wrapper now stays inside `.container` parent

**Lines 1200-1237:** Updated viewport wrapper removal
- Added check for `wrapper.parentElement === pageContainer`
- Proper restoration of original container structure
- Fixed Chakra Container style restoration

**Lines 1239-1275:** Updated cleanup function
- Same improvements as removal logic
- Ensures proper cleanup on unmount

### 2. `/frontend/src/hooks/usePageElementConfig.ts`
**Lines 49-69:** Updated `applyDOMOrder` function
- Checks for `.myuibrix-viewport-wrapper` first
- Falls back to `.container` when wrapper doesn't exist
- Ensures element reordering works in edit mode

## How It Works Now

### Edit Mode Activation
1. User clicks edit button
2. MyUIbrix finds `.container` div (the homepage content container)
3. Creates `.myuibrix-viewport-wrapper` div
4. Moves all children from `.container` into wrapper
5. Appends wrapper back into `.container`
6. Expands Chakra Container to full width for proper preview

### Style Changes
1. User changes style in VisualStylePanel
2. VisualStylePanel calls `onStyleChange(newStyles)`
3. MyUIbrixEditor's `handleStyleChange` updates state
4. After 100ms debounce, dispatches `myuibrix-style-change` event
5. `usePageElementConfig` hook catches event, updates styles state
6. Hook now correctly finds elements inside `.myuibrix-viewport-wrapper`
7. HomePage re-renders with `...getStyles('elementName')`
8. React applies new inline styles to elements

### Structure Comparison

**Before (broken):**
```
.chakra-container (targeted by MyUIbrix)
  .myuibrix-viewport-wrapper
    Navigation elements (wrong!)
  .container
    .myuibrix-viewport-wrapper  
      Page content (separate wrapper!)
```

**After (fixed):**
```
.chakra-container (not touched by MyUIbrix)
  Navigation (stays here)
  .container (page content wrapper)
    .myuibrix-viewport-wrapper
      <all page sections>
```

## Testing Checklist

- [ ] MyUIbrix editor activates without errors
- [ ] No blank sections appear
- [ ] All page content visible in editor
- [ ] Viewport switching works (desktop/tablet/mobile)
- [ ] Clicking on elements shows style panel
- [ ] Style changes apply immediately (100ms debounce)
- [ ] Typography changes work
- [ ] Color changes work
- [ ] Spacing changes work
- [ ] Layout changes work
- [ ] Element reordering works
- [ ] Element visibility toggle works
- [ ] Exiting editor restores original layout
- [ ] No console errors during edit or exit

## Style Flow Verification

To verify styles are working:

1. Activate MyUIbrix editor
2. Click on any section (e.g., "hero")
3. Open VisualStylePanel (should appear automatically)
4. Change background color
5. **Expected:** Color changes immediately with 100ms delay
6. Change padding/margin
7. **Expected:** Spacing updates immediately
8. Exit editor
9. **Expected:** Changes not saved (preview only)
10. Re-activate editor, make change, click "Publikovat"
11. **Expected:** Changes saved to database

## Known Limitations

1. Direct DOM manipulation still used (necessary for viewport wrapper)
2. React must re-render to apply styles (happens automatically via state)
3. 100ms debounce on style changes to prevent lag
4. Wrapper only works with `.container` div (homepage specific)

## Future Improvements

1. Consider using React portal instead of direct DOM manipulation
2. Add transition animations when styles change
3. Implement undo/redo for style changes
4. Add keyboard shortcuts for common style adjustments
5. Support for other page types beyond homepage