ui-form-section

Use a wrapper component like FormSection that maps a cols prop to Tailwind grid classes such as grid-cols-1 sm:grid-cols-2 lg:grid-cols-3. This gives you consistent responsive behavior across 1 to 4 column layouts without repeating class strings.

Build a flex container with a fixed-width scrollable master panel separated by a border from a flexible detail panel. Track the selected item ID in state and render the detail component conditionally, showing a placeholder when nothing is selected.

Use a Sheet component rendered on the right side with a controlled open state, a header for title and description, a scrollable content area, and a footer with Save and Cancel buttons. Width can be configured via size classes like w-[400px] or w-[800px].

The provided SplitLayout uses a fixed pixel width for the master panel and does not include mobile collapse behavior. For small screens you would need to add conditional rendering or a breakpoint-based toggle yourself.

Drawer panels limit horizontal space, so wide forms with many columns become cramped even at the 800px size. For complex multi-section forms, a dedicated full-page edit route is usually a better fit than a side panel.