Enhance Modal Form Layout: Responsive Multi-Column and Width Auto-Sizing for CRUD Dialogs

[hotlong]

Issue Summary

When creating new records (e.g., Opportunities) in ObjectUI, the modal dialog for forms is too narrow and displays fields in a single column, even on wide screens with many fields. This causes poor user experience compared to mainstream enterprise CRMs, where dialogs auto-expand and utilize multiple columns for complex forms.

Requirements

1. Auto Detect Columns

• Goal: When the form has >3 fields, render them in 2 columns by default, unless user configuration says otherwise.
• Use internal auto-layout logic: if field count > 3, set columns=2.
• If wide fields (e.g., textarea, grid) are present, these should span both columns.
• Respect any explicit columns or sections settings from the JSON schema; auto-layout only applies if absent.

2. Modal Width Auto-Sizing

• The modal should be responsive to the number of columns:
  • 1 column → max-w-lg (default)
  • 2 columns → max-w-xl or wider (consider max-w-4xl or max-w-5xl)
  • 3 columns → full width/modal size 'full'
• Change mapping in autoLayout.ts so 2 columns map to 'xl' and 3 columns to 'full'.
• Update modalSizeClasses in ModalForm.tsx to use wider width for 'xl' and 'full'.
• Remove any hardcoded modal size overrides (such as modalSize: 'lg') from Console/App.tsx to allow auto-layout to control size.

3. Responsive Layout

• Use Tailwind container queries to ensure form takes advantage of horizontal space, but reverts to single column on small/mobile widths.
• Confirm new grid classes for 2/3/4 columns use responsive Tailwind (@md:, @2xl:).

4. Accessibility & Internationalization

• Ensure all visible form labels, descriptions, and error messages remain in English (per codebase rule).
• No inline styles; all style changes via Tailwind & cva.

5. Tests

• Update existing ModalForm integration and auto-layout tests to verify:
  • 2 columns are rendered for forms with 4+ fields.
  • Modal expands beyond 670px for multi-column forms.
  • No layout regression for mobile (single column).

6. Documentation

• Update any relevant design docs or Storybook stories.

Acceptance Criteria

• New CRUD dialogs with >3 fields now use multi-column and wider modal automatically.
• Screenshots in docs show improved usage of horizontal space.
• No breaking changes for existing field and modal overrides in JSON schema.

Refer to included image for the current problem:

---

Repository: objectstack-ai/objectui
Labels: form, layout, UI, modal
Type: feature request, UI