mirror of
https://github.com/nexu-io/open-design.git
synced 2026-10-27 09:51:12 +01:00
Nicholas-XiongandGitHub
330a93116d
Fixes #1929 Problem: - When viewing HTML artifacts in preview mode, if iframe content width exceeds the available workspace width, the entire .split grid container expands beyond the viewport - This pushes the left chat panel and top toolbar buttons outside the visible area - Users cannot access chat or toolbar when viewing wide preview content Root Cause: - .split uses grid-template-columns: 460px 8px minmax(400px, 1fr) - The third column minmax(400px, 1fr) expands to fit content - No max-width or overflow constraint on .split container - When iframe content is wider than viewport, grid expands to accommodate it - Parent containers don't constrain the grid width Solution: - Add max-width: 100% to .split to constrain it to parent width - Add overflow: hidden to prevent content from pushing layout - Grid columns now stay within viewport bounds - Only the iframe/preview area scrolls internally Changes: - Modified: apps/web/src/index.css - Added max-width: 100% to .split (line 1491) - Added overflow: hidden to .split (line 1492) Impact: - ✅ Fixes horizontal overflow when iframe content exceeds viewport width - ✅ Chat panel stays visible and accessible - ✅ Toolbar buttons remain in their intended positions - ✅ Layout stays fixed to viewport width - ✅ Only preview area scrolls internally - ✅ No breaking changes to existing layouts - ✅ Works with all viewport sizes Testing: 1. Open any project and generate an HTML artifact (e.g., todo app) 2. Open the artifact in preview mode (desktop viewport) 3. Verify the layout stays within viewport width 4. Verify chat panel remains visible on the left 5. Verify toolbar buttons remain accessible at the top 6. Verify only the preview iframe scrolls horizontally if content is wide 7. Test with various artifact widths (narrow, normal, extra wide) 8. Test resize handle still works correctly Before Fix: - Wide iframe content pushes entire layout beyond viewport - Chat panel disappears off-screen to the left - Toolbar buttons disappear off-screen - Horizontal scrollbar appears on entire page - Poor user experience with wide content After Fix: - Layout stays fixed to viewport width - Chat panel always visible - Toolbar always accessible - Only iframe scrolls internally - Clean, predictable layout behavior