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

__test__/components/DuplicateEvent.test.tsx

@@ -95,6 +95,9 @@ describe("EventDuplication", () => {
 
     fireEvent.click(screen.getByText("Duplicate event"));
 
+    // Cancel button only appears in expanded mode
+    fireEvent.click(screen.getByText("More options"));
+
     fireEvent.click(screen.getByRole("button", { name: /Cancel/i }));
 
     expect(handleClose).toHaveBeenCalled();

__test__/components/RepeatEvent.test.tsx

@@ -102,8 +102,8 @@ async function setupEventPopover(
   const titleInput = screen.getByLabelText("Title");
   fireEvent.change(titleInput, { target: { value: "Meeting" } });
 
-  // Click Show More to expand the dialog
-  const showMoreButton = screen.getByText("Show More");
+  // Click More options to expand the dialog
+  const showMoreButton = screen.getByText("More options");
   fireEvent.click(showMoreButton);
 
   // Check Repeat checkbox to show repeat options

__test__/components/ResponsiveDialog.test.tsx

@@ -295,4 +295,80 @@ describe("ResponsiveDialog", () => {
     expect(screen.getByText("Extended Content")).toBeInTheDocument();
     expect(screen.getByLabelText("show less")).toBeInTheDocument();
   });
+
+  it("renders expand and close icons in normal mode when showHeaderActions is true", () => {
+    render(
+      <ResponsiveDialog
+        open={true}
+        onClose={mockOnClose}
+        title="Test"
+        isExpanded={false}
+        onExpandToggle={mockOnExpandToggle}
+        showHeaderActions={true}
+      >
+        <div>Content</div>
+      </ResponsiveDialog>
+    );
+
+    expect(screen.getByLabelText("expand")).toBeInTheDocument();
+    expect(screen.getByLabelText("close")).toBeInTheDocument();
+  });
+
+  it("does not render header icons when showHeaderActions is false", () => {
+    render(
+      <ResponsiveDialog
+        open={true}
+        onClose={mockOnClose}
+        title="Test Title"
+        isExpanded={false}
+        onExpandToggle={mockOnExpandToggle}
+        showHeaderActions={false}
+      >
+        <div>Content</div>
+      </ResponsiveDialog>
+    );
+
+    expect(screen.queryByLabelText("expand")).not.toBeInTheDocument();
+    expect(screen.queryByLabelText("close")).not.toBeInTheDocument();
+    expect(screen.getByText("Test Title")).toBeInTheDocument();
+  });
+
+  it("calls onClose when close icon is clicked", () => {
+    render(
+      <ResponsiveDialog
+        open={true}
+        onClose={mockOnClose}
+        title="Test"
+        isExpanded={false}
+        showHeaderActions={true}
+      >
+        <div>Content</div>
+      </ResponsiveDialog>
+    );
+
+    const closeButton = screen.getByLabelText("close");
+    fireEvent.click(closeButton);
+
+    expect(mockOnClose).toHaveBeenCalledTimes(1);
+  });
+
+  it("calls onExpandToggle when expand icon is clicked", () => {
+    render(
+      <ResponsiveDialog
+        open={true}
+        onClose={mockOnClose}
+        title="Test"
+        isExpanded={false}
+        onExpandToggle={mockOnExpandToggle}
+        showHeaderActions={true}
+      >
+        <div>Content</div>
+      </ResponsiveDialog>
+    );
+
+    const expandButton = screen.getByLabelText("expand");
+    fireEvent.click(expandButton);
+
+    expect(mockOnExpandToggle).toHaveBeenCalledTimes(1);
+  });
 });