Commit af17227
fix(react-example): improve responsive layout for split-view panels
This commit addresses layout issues in the React wrapper example where
the Events and HTML Export sidebars would overlap with the editor
content on smaller screen sizes.
Changes:
1. Split-view layout improvements:
- Changed editor-side from `flex: 1` to `flex: 1 1 400px` with
min-width: 300px for proper flex basis
- Changed sidebars from fixed width (280px) to flexible sizing:
`flex: 0 0 240px` with min-width: 200px and max-width: 300px
- Added flex-wrap: wrap to allow stacking on narrow screens
2. Mobile/narrow screen support (< 700px):
- Sidebar stacks below the editor instead of side-by-side
- Editor gets border-bottom instead of border-right
- Sidebar gets full width with border-top separator
3. Panel header/controls improvements:
- Added flex-wrap: wrap to panel-header for wrapping controls
- Added min-height: fit-content to prevent content clipping
- Added flex-wrap: wrap to panel-controls for button wrapping
4. Toolbar responsiveness:
- Made toolbar container horizontally scrollable
5. General responsive adjustments:
- At 900px: Reduced tab padding, font sizes, and control sizes
- At 600px: Further reductions for very small screens including
stacked event items and smaller badges
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>1 parent e252090 commit af17227
7 files changed
Lines changed: 962 additions & 161 deletions
File tree
- examples/react-wrapper
- src
- packages/react/src
| Original file line number | Diff line number | Diff line change | |
|---|---|---|---|
| |||
3 | 3 | | |
4 | 4 | | |
5 | 5 | | |
6 | | - | |
| 6 | + | |
7 | 7 | | |
8 | 8 | | |
9 | 9 | | |
| |||
0 commit comments