Widen modal forms: 2-col → sm:max-w-5xl, fix tailwind-merge variant conflict with MobileDialogContent

[Copilot]

CRUD dialogs with >3 fields render in a narrow single-column modal because inferModalSize mapped 2 columns to 'lg' (max-w-2xl / 672px) and Console hardcoded modalSize: 'lg', bypassing auto-layout entirely. Additionally, MobileDialogContent hardcodes sm:max-w-lg in its base classes, and modalSizeClasses used bare max-w-* classes without the sm: prefix — tailwind-merge treated these as different responsive variants and kept both, so sm:max-w-lg (512px) always won on tablet/desktop screens.

Changes

• autoLayout.ts — inferModalSize: 2 cols → 'xl' (was 'lg'), 3+ cols → 'full' (was split across 'xl'/'full')
• ModalForm.tsx — modalSizeClasses: all values now use sm: prefix (e.g. sm:max-w-5xl) so tailwind-merge correctly overrides MobileDialogContent's base sm:max-w-lg; 'xl' maps to sm:max-w-5xl (1024px, was max-w-4xl / 896px)
• App.tsx — Remove modalSize: 'lg' so auto-layout controls width based on field count
• Tests — Update autoLayout.test.ts and MobileUX.test.tsx expectations to match new mappings

Effective behavior

Fields	Columns	Modal size	Width
≤3	1	default	sm:max-w-lg (512px)
4+	2	xl	sm:max-w-5xl (1024px)
explicit 3-col	3	full	95vw

Explicit modalSize, columns, and sections in JSON schema still take priority over auto-layout. Container query responsive classes (@md:grid-cols-2) already handle mobile collapse — no changes needed there.

Original prompt

---

This section details on the original issue you should resolve

<issue_title>Enhance Modal Form Layout: Responsive Multi-Column and Width Auto-Sizing for CRUD Dialogs</issue_title>
<issue_description>## 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
</issue_description>

Comments on the Issue (you are @copilot in this section)

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

---

🔒 GitHub Advanced Security automatically protects Copilot coding agent pull requests. You can protect all pull requests by enabling Advanced Security for your repositories. Learn more about Advanced Security.

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
objectui	Ready	Preview, Comment	Mar 3, 2026 1:46pm
objectui-demo	Ready	Preview, Comment	Mar 3, 2026 1:46pm
objectui-storybook	Ready	Preview, Comment	Mar 3, 2026 1:46pm

[hotlong]

@copilot 仔细分析问题的根源，目前在平板横屏模式下，还是只显示一列和截图效果一样。

[Copilot]

@copilot 仔细分析问题的根源，目前在平板横屏模式下，还是只显示一列和截图效果一样。

Found the root cause: MobileDialogContent hardcodes sm:max-w-lg in its base classes. The modalSizeClasses in ModalForm.tsx were using bare max-w-* classes (without sm: prefix), so tailwind-merge treated them as different responsive variants and kept both. On screens ≥640px (tablet landscape), CSS applied both max-width: 512px (sm:max-w-lg) and max-width: 1024px (max-w-5xl), and the sm: media query always wins → modal stayed at 512px.

Fixed in c1b292e by adding sm: prefix to all modalSizeClasses (e.g., sm:max-w-5xl). Now tailwind-merge correctly resolves the same-variant conflict and the auto-layout width takes effect on tablet/desktop.

[Copilot]

Pull request overview

This PR fixes two related bugs that caused CRUD modal dialogs to render too narrow:

1. Wrong size mapping: inferModalSize was mapping 2 columns to 'lg' (max-w-2xl / 672px) — now maps to 'xl' (sm:max-w-5xl / 1024px), and 3 columns collapses to 'full' instead of 'xl'.
2. tailwind-merge variant conflict: modalSizeClasses used bare max-w-* classes, but MobileDialogContent hardcodes sm:max-w-lg. Without the sm: prefix, tailwind-merge treated them as different responsive variants and kept both (the base sm:max-w-lg always winning on tablet/desktop). Adding sm: prefix to all entries ensures the override is resolved correctly.
3. Hardcoded override removal: App.tsx was hardcoding modalSize: 'lg', bypassing auto-layout entirely.

Changes:

• Updated inferModalSize to map 2 columns → 'xl', 3+ columns → 'full'
• Updated modalSizeClasses to use sm: prefix on all entries (e.g. sm:max-w-5xl for 'xl')
• Removed modalSize: 'lg' from App.tsx to let auto-layout control the size
• Updated tests in autoLayout.test.ts and MobileUX.test.tsx to match new mappings

Reviewed changes

Copilot reviewed 5 out of 5 changed files in this pull request and generated no comments.

Show a summary per file

File	Description
packages/plugin-form/src/autoLayout.ts	Updates inferModalSize — simplifies to 3-level mapping (default/xl/full)
packages/plugin-form/src/ModalForm.tsx	Adds sm: prefix to all modalSizeClasses values; improves JSDoc comment
apps/console/src/App.tsx	Removes hardcoded modalSize: 'lg' so auto-layout drives modal width
packages/plugin-form/src/__tests__/autoLayout.test.ts	Updates test expectations to match new inferModalSize mapping
packages/plugin-form/src/__tests__/MobileUX.test.tsx	Updates test description and assertion from max-w-2xl to max-w-5xl