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