Resize your browser window to cross the 1024px breakpoint while the side panel is open. Watch the auto-collapse and margin restoration behavior.
The side panel can be open or collapsed. When open, it pushes body content via margin. Full tab handle is visible on the edge of the viewport.
The side panel auto-collapses if it was open. Body margin is restored. The tab handle remains visible so the user can re-open manually on narrow screens.
Breakpoints are the points at which a design adapts to provide the best possible layout for the user. The 1024px breakpoint is commonly used to distinguish between tablet and desktop layouts. The HEA side panel uses this breakpoint to decide when to auto-collapse.
The window resize event fires rapidly during manual resizing. Handlers should use debouncing or requestAnimationFrame to avoid layout thrashing. The side panel widget debounces its resize handler to prevent excessive DOM mutations during resize.
When a widget auto-collapses due to viewport changes, it should preserve its internal state — conversation history, scroll position, and user input. Re-expanding should restore the exact same state the user left off at, not reload from scratch.
Side panels that push body content need careful margin management. When opening, the panel adds a margin to the body. When closing or auto-collapsing, this margin must be removed cleanly. Edge cases include animations during rapid resize and multiple margin sources.
Manual testing of responsive layouts requires systematically resizing the browser window while observing layout changes. Automated testing can use tools like Playwright's setViewportSize to programmatically verify breakpoint behavior.
While media queries respond to viewport size, container queries respond to parent element size. For embedded widgets, container queries can be more appropriate since the widget's available space depends on the host layout, not just viewport width.
Mobile-first design starts with the smallest screen and adds complexity for larger screens. Desktop-first starts with the full experience and simplifies for mobile. The side panel's breakpoint behavior is desktop-first: it collapses features below the breakpoint.