update normal mode event createa update modal

src/components/Dialog/README.md

@@ -4,7 +4,7 @@ A highly reusable dialog component that supports both normal and expanded (fulls
 
 ## Features
 
-- ✅ **Two Modes**: Normal popup (685px) and expanded fullscreen mode
+- ✅ **Two Modes**: Normal popup (570px) and expanded fullscreen mode
 - ✅ **Preserves Header**: Expanded mode doesn't cover app header (90px default)
 - ✅ **Clean Expanded View**: No backdrop/shadow in expanded mode for seamless integration
 - ✅ **Instant Transition**: No animation when expanding for immediate feedback
@@ -62,7 +62,7 @@ function MyComponent() {
 | `actions`                 | `ReactNode`           | -         | Action buttons                                              |
 | `isExpanded`              | `boolean`             | `false`   | Toggle fullscreen mode                                      |
 | `onExpandToggle`          | `() => void`          | -         | Handler for back button click when expanded                 |
-| `normalMaxWidth`          | `string`              | `"685px"` | Max width in normal mode                                    |
+| `normalMaxWidth`          | `string`              | `"570px"` | Max width in normal mode                                    |
 | `expandedContentMaxWidth` | `string`              | `"990px"` | Content container max-width in expanded mode                |
 | `headerHeight`            | `string`              | `"90px"`  | App header height to preserve                               |
 | `normalSpacing`           | `number`              | `2`       | Stack spacing in normal mode (MUI spacing units: 1 = 8px)   |
@@ -160,7 +160,7 @@ For apps with different header heights:
 
 ### Normal Mode (`isExpanded={false}`)
 
-- Dialog: max-width = `normalMaxWidth` (default 685px)
+- Dialog: max-width = `normalMaxWidth` (default 570px)
 - Content: 100% width
 - Height: auto (fits content)
 - Position: centered with 32px margin
@@ -215,7 +215,7 @@ import { ResponsiveDialog } from "@/components/Dialog";
 1. **Use `isExpanded` for Show More/Less**: Toggle between modes for better UX
 2. **Provide `onExpandToggle` handler**: Required for back button functionality in expanded mode
 3. **Hide expand button in actions when expanded**: Back arrow in header provides collapse action
-4. **Keep `normalMaxWidth` reasonable**: 685px works well for forms
+4. **Keep `normalMaxWidth` reasonable**: 570px works well for forms
 5. **Center content in expanded mode**: Default 990px provides good reading width
 6. **Preserve header**: Default 90px - adjust via `headerHeight` prop if needed
 7. **MUI Stack handles spacing**: Children wrapped in Stack with configurable spacing prop - override with `normalSpacing`/`expandedSpacing` if needed

src/components/Dialog/ResponsiveDialog.tsx

@@ -21,7 +21,7 @@ import React, { ReactNode } from "react";
  * ResponsiveDialog - A reusable dialog component that can switch between normal and expanded modes
  *
  * Features:
- * - Normal mode: Dialog with customizable max-width (default 685px)
+ * - Normal mode: Dialog with customizable max-width (default 570px)
  * - Expanded mode: Full height dialog (excluding app header) with centered content container
  * - Fully customizable with sx props for Dialog, DialogTitle, and DialogContent
  * - Preserves app header visibility in expanded mode
@@ -58,7 +58,7 @@ interface ResponsiveDialogProps extends Omit<
   isExpanded?: boolean;
   /** Callback when expand/collapse button is clicked (required if using isExpanded) */
   onExpandToggle?: () => void;
-  /** Max width in normal mode (default: "685px") */
+  /** Max width in normal mode (default: "570px") */
   normalMaxWidth?: string;
   /** Max width of content container in expanded mode (default: "990px") */
   expandedContentMaxWidth?: string;
@@ -98,7 +98,7 @@ function ResponsiveDialog({
   actions,
   isExpanded = false,
   onExpandToggle,
-  normalMaxWidth = "685px",
+  normalMaxWidth = "570px",
   expandedContentMaxWidth = "990px",
   headerHeight = "90px",
   normalSpacing = 2,
@@ -202,8 +202,9 @@ function ResponsiveDialog({
                   onClick={onExpandToggle}
                   aria-label="expand"
                   size="small"
+                  sx={{ marginRight: 1 }}
                 >
-                  <OpenInFullIcon />
+                  <OpenInFullIcon sx={{ padding: "2px" }} />
                 </IconButton>
               )}
               <IconButton onClick={onClose} aria-label="close" size="small">