Gallery

Design a split-view component for workflows where two related surfaces need to stay visible at once: compare two records, edit alongside preview, or keep a reference open while working. Treat this as a reusable interface pattern, not a one-off layout. Start with the default state: two panes separated by a clear divider, with one pane allowed to be primary but neither feeling like an afterthought. The divider should read as interactive on sight and support mouse, touch, and keyboard resizing. Show what happens while dragging, including live width changes and any minimum/maximum limits that prevent either pane from becoming unusable. Include at least one collapsed state for each side, plus the way the user restores it. If one pane is hidden, the remaining pane should expand cleanly and the control to bring the other pane back should stay visible. Keep the content inside each pane stable during resize so the user does not lose context. Add a narrow-screen behavior. When there is not enough room for a true split, switch to a stacked or toggle-based pattern instead of forcing both panes into unusable widths. Make the transition readable and keep the active view obvious at every size.