Merge pull request #1010 from objectstack-ai/copilot/enhance-modal-form-layout

Author: hotlong

apps/console/src/App.tsx

@@ -400,7 +400,6 @@ export function AppContent() {
                   description: editingRecord ? `Update details for ${currentObjectDef?.label}` : `Add a new ${currentObjectDef?.label} to your database.`,
                   open: isDialogOpen,
                   onOpenChange: setIsDialogOpen,
-                  modalSize: 'lg',
                   layout: 'vertical',
                   fields: currentObjectDef.fields 
                       ? (Array.isArray(currentObjectDef.fields) 

packages/plugin-form/src/ModalForm.tsx

@@ -96,13 +96,19 @@ export interface ModalFormProps {
   className?: string;
 }
 
-/** Size class map for the dialog content */
+/**
+ * Size class map for the dialog content.
+ *
+ * Uses `sm:` prefix so that `tailwind-merge` correctly resolves the conflict
+ * with MobileDialogContent's base `sm:max-w-lg` class.  On mobile (< sm) the
+ * dialog is already full-screen, so max-width only matters at sm+ breakpoints.
+ */
 const modalSizeClasses: Record<string, string> = {
-  sm: 'max-w-sm',
-  default: 'max-w-lg',
-  lg: 'max-w-2xl',
-  xl: 'max-w-4xl',
-  full: 'max-w-[95vw] w-full',
+  sm: 'sm:max-w-sm',
+  default: 'sm:max-w-lg',
+  lg: 'sm:max-w-2xl',
+  xl: 'sm:max-w-5xl',
+  full: 'sm:max-w-[95vw] sm:w-full',
 };
 
 /**

packages/plugin-form/src/__tests__/MobileUX.test.tsx

@@ -323,7 +323,7 @@ describe('ModalForm Container Query Layout', () => {
 });
 
 describe('ModalForm Sections — Modal Size Auto-Upgrade', () => {
-  it('auto-upgrades modal to lg when sections use 2-column layout', async () => {
+  it('auto-upgrades modal to xl when sections use 2-column layout', async () => {
     const mockDataSource = createMockDataSource();
 
     render(
@@ -356,10 +356,10 @@ describe('ModalForm Sections — Modal Size Auto-Upgrade', () => {
       expect(screen.getByText('Create Task')).toBeInTheDocument();
     });
 
-    // Dialog should auto-upgrade to lg (max-w-2xl) because sections have columns: 2
+    // Dialog should auto-upgrade to xl (max-w-5xl) because sections have columns: 2
     const dialogContent = document.querySelector('[role="dialog"]');
     expect(dialogContent).not.toBeNull();
-    expect(dialogContent!.className).toContain('max-w-2xl');
+    expect(dialogContent!.className).toContain('max-w-5xl');
   });
 
   it('keeps default size when all sections use 1-column layout', async () => {

packages/plugin-form/src/__tests__/autoLayout.test.ts

@@ -76,15 +76,12 @@ describe('autoLayout', () => {
       expect(inferModalSize(1)).toBe('default');
     });
 
-    it('returns lg for 2 columns', () => {
-      expect(inferModalSize(2)).toBe('lg');
+    it('returns xl for 2 columns', () => {
+      expect(inferModalSize(2)).toBe('xl');
     });
 
-    it('returns xl for 3 columns', () => {
-      expect(inferModalSize(3)).toBe('xl');
-    });
-
-    it('returns full for 4+ columns', () => {
+    it('returns full for 3+ columns', () => {
+      expect(inferModalSize(3)).toBe('full');
       expect(inferModalSize(4)).toBe('full');
       expect(inferModalSize(5)).toBe('full');
     });

packages/plugin-form/src/autoLayout.ts

@@ -117,15 +117,13 @@ export function filterCreateModeFields(
  * Used to auto-upgrade the modal width when auto-layout detects multi-column forms.
  *
  * Mapping:
- * - 1 column  → 'default' (max-w-lg)
- * - 2 columns → 'lg'      (max-w-2xl)
- * - 3 columns → 'xl'      (max-w-4xl)
- * - 4+ columns → 'full'   (max-w-[95vw])
+ * - 1 column   → 'default' (max-w-lg)
+ * - 2 columns  → 'xl'      (max-w-5xl)
+ * - 3+ columns → 'full'    (max-w-[95vw])
  */
 export function inferModalSize(columns: number): 'sm' | 'default' | 'lg' | 'xl' | 'full' {
   if (columns <= 1) return 'default';
-  if (columns === 2) return 'lg';
-  if (columns === 3) return 'xl';
+  if (columns === 2) return 'xl';
   return 'full';
 }