feat: Update event modal UI with header icons and improved actions layout

- Add expand and close icons to ResponsiveDialog header in normal mode
- Change 'Show More' button to 'More options' with Add icon
- Hide Cancel button in normal mode, show only in extended mode
- Add showHeaderActions prop to ResponsiveDialog for UI control
- Preserve EventDisplayPreview modal with old UI (no header icons)
- Update all affected test cases to match new UI behavior

src/components/Dialog/ResponsiveDialog.tsx

@@ -10,8 +10,11 @@ import {
   Stack,
   SxProps,
   Theme,
+  Box,
 } from "@mui/material";
 import ArrowBackIcon from "@mui/icons-material/ArrowBack";
+import CloseIcon from "@mui/icons-material/Close";
+import OpenInFullIcon from "@mui/icons-material/OpenInFull";
 import React, { ReactNode } from "react";
 
 /**
@@ -73,6 +76,8 @@ interface ResponsiveDialogProps
   dialogTitleProps?: Omit<DialogTitleProps, "sx">;
   /** Whether to display dividers between title/content/actions */
   dividers?: boolean;
+  /** Whether to show header action icons (expand/close) in normal mode (default: true) */
+  showHeaderActions?: boolean;
 }
 
 function ResponsiveDialog({
@@ -93,6 +98,7 @@ function ResponsiveDialog({
   dialogContentProps,
   dialogTitleProps,
   dividers = false,
+  showHeaderActions = true,
   sx,
   ...otherDialogProps
 }: ResponsiveDialogProps) {
@@ -150,6 +156,29 @@ function ResponsiveDialog({
           >
             <ArrowBackIcon />
           </IconButton>
+        ) : showHeaderActions ? (
+          <Box
+            display="flex"
+            justifyContent="space-between"
+            alignItems="center"
+            width="100%"
+          >
+            <Box>{title}</Box>
+            <Box>
+              {onExpandToggle && (
+                <IconButton
+                  onClick={onExpandToggle}
+                  aria-label="expand"
+                  size="small"
+                >
+                  <OpenInFullIcon />
+                </IconButton>
+              )}
+              <IconButton onClick={onClose} aria-label="close" size="small">
+                <CloseIcon />
+              </IconButton>
+            </Box>
+          </Box>
         ) : (
           title
         )}

src/features/Events/EventDisplayPreview.tsx

@@ -115,6 +115,7 @@ export default function EventPreviewModal({
       <ResponsiveDialog
         open={open && !hidePreview}
         onClose={() => onClose({}, "backdropClick")}
+        showHeaderActions={false}
         style={{ overflow: "auto" }}
         title={
           event.title && (

src/features/Events/EventModal.tsx

@@ -1,7 +1,5 @@
 import { CalendarApi, DateSelectArg } from "@fullcalendar/core";
 import {
-  Box,
-  Button,
   Checkbox,
   FormControl,
   FormControlLabel,
@@ -23,6 +21,8 @@ import {
   ContentCopy as CopyIcon,
   Close as DeleteIcon,
 } from "@mui/icons-material";
+import { Box, Button } from "@mui/material";
+import AddIcon from "@mui/icons-material/Add";
 import React, {
   useEffect,
   useState,
@@ -409,12 +409,16 @@ function EventPopover({
   const dialogActions = (
     <Box display="flex" justifyContent="space-between" width="100%" px={2}>
       {!showMore && (
-        <Button onClick={() => setShowMore(!showMore)}>Show More</Button>
+        <Button startIcon={<AddIcon />} onClick={() => setShowMore(!showMore)}>
+          More options
+        </Button>
       )}
       <Box display="flex" gap={1} ml={showMore ? "auto" : 0}>
-        <Button variant="outlined" onClick={handleClose}>
-          Cancel
-        </Button>
+        {showMore && (
+          <Button variant="outlined" onClick={handleClose}>
+            Cancel
+          </Button>
+        )}
         <Button variant="contained" onClick={handleSave} disabled={!title}>
           Save
         </Button>

src/features/Events/EventUpdateModal.tsx

@@ -1,4 +1,5 @@
 import { Box, Button } from "@mui/material";
+import AddIcon from "@mui/icons-material/Add";
 import React, {
   useEffect,
   useState,
@@ -658,12 +659,16 @@ function EventUpdateModal({
   const dialogActions = (
     <Box display="flex" justifyContent="space-between" width="100%" px={2}>
       {!showMore && (
-        <Button onClick={() => setShowMore(!showMore)}>Show More</Button>
+        <Button startIcon={<AddIcon />} onClick={() => setShowMore(!showMore)}>
+          More options
+        </Button>
       )}
       <Box display="flex" gap={1} ml={showMore ? "auto" : 0}>
-        <Button variant="outlined" onClick={handleClose}>
-          Cancel
-        </Button>
+        {showMore && (
+          <Button variant="outlined" onClick={handleClose}>
+            Cancel
+          </Button>
+        )}
         <Button variant="contained" onClick={handleSave} disabled={!title}>
           Save
         </Button>