Merge pull request #657 from objectstack-ai/copilot/optimize-mobile-modal-form

Author: hotlong

ROADMAP.md

@@ -69,6 +69,12 @@ All 4 phases across 5 designers (Page, View, DataModel, Process, Report): drag-a
 
 All 11 plugin views (Grid, Kanban, Form, Dashboard, Calendar, Timeline, List, Detail, Charts, Map, Gantt) have responsive mobile-first layouts with touch targets ≥ 44px, responsive typography, overflow handling, and mobile-specific interactions. Console pages (AppHeader, AppSidebar, Dashboard, RecordDetail, Create/Edit Dialogs) are responsive. Core primitives (DataTable, Form Renderer, Navigation) support mobile. Infrastructure (touch/gesture system, PWA support, viewport handling, progressive loading) is complete.
 
+- Base `DialogContent` upgraded to mobile-first layout: full-screen on mobile (`inset-0 h-[100dvh]`), centered on desktop (`sm:inset-auto sm:max-w-lg sm:rounded-lg`), close button touch target ≥ 44×44px (WCAG 2.5.5).
+- `MobileDialogContent` custom component for ModalForm with flex layout (sticky header + scrollable body + sticky footer).
+- ModalForm: skeleton loading state, sticky action buttons, form grid forced to 1-column on mobile (`md:` breakpoint for multi-column).
+- Date/DateTime fields use native HTML5 inputs (`type="date"`, `type="datetime-local"`) for optimal mobile picker UX.
+- Form sections supported via `ModalFormSectionConfig` for visual field grouping.
+
 ### v3.0.0 Spec Integration ✅
 
 Full adoption of Cloud namespace, contracts/integration/security/studio modules, v3.0.0 PaginatedResult API, ObjectStackAdapter metadata API, 17 compatibility tests, 70+ spec UI types re-exported.

packages/components/src/__tests__/__snapshots__/snapshot-critical.test.tsx.snap

@@ -460,7 +460,7 @@ exports[`Dialog snapshots > renders open dialog structure 1`] = `
   <div
     aria-describedby="radix-_r_2_"
     aria-labelledby="radix-_r_1_"
-    class="fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg"
+    class="fixed inset-0 z-50 grid w-full bg-background p-4 shadow-lg duration-200 h-[100dvh] sm:inset-auto sm:left-[50%] sm:top-[50%] sm:translate-x-[-50%] sm:translate-y-[-50%] sm:max-w-lg sm:h-auto sm:max-h-[90vh] sm:rounded-lg sm:border sm:p-6 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%]"
     data-state="open"
     id="radix-_r_0_"
     role="dialog"
@@ -496,12 +496,12 @@ exports[`Dialog snapshots > renders open dialog structure 1`] = `
       </button>
     </div>
     <button
-      class="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground"
+      class="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground min-h-[44px] min-w-[44px] sm:min-h-0 sm:min-w-0 flex items-center justify-center"
       type="button"
     >
       <svg
         aria-hidden="true"
-        class="lucide lucide-x h-4 w-4"
+        class="lucide lucide-x h-5 w-5 sm:h-4 sm:w-4"
         fill="none"
         height="24"
         stroke="currentColor"