bugfix: some minor ui updates for invitation history dialog.

frontend/src/components/ui/appointments/AppointmentBookingModal.tsx

@@ -1,8 +1,8 @@
 'use client';
 
 import { useEffect, useState } from 'react';
-import { X } from 'lucide-react';
 import { Button } from '@/components/ui/common/Button';
+import { DialogCloseButton } from '@/components/ui/common/DialogCloseButton';
 import { Dropdown } from '@/components/ui/common/Dropdown';
 import type { AppointmentPurpose, AppointmentRecord } from '@/types/appointment';
 import { APPOINTMENT_PURPOSE_LABEL } from '@/components/ui/appointments/appointmentPurposeStyles';
@@ -161,14 +161,7 @@ export function AppointmentBookingModal({
           <h2 id="appointment-modal-title" className="text-lg font-semibold text-text-primary pr-2">
             {editingAppointment ? 'Edit appointment' : 'New appointment'}
           </h2>
-          <button
-            type="button"
-            onClick={onClose}
-            className="rounded-[var(--radius-sm)] p-1.5 text-text-muted hover:text-text-primary hover:bg-background-secondary/80 focus:outline-none focus:ring-2 focus:ring-primary/35"
-            aria-label="Close"
-          >
-            <X className="h-5 w-5 icon-flat" />
-          </button>
+          <DialogCloseButton onClick={onClose} />
         </div>
 
         <p className="text-sm text-text-secondary">

frontend/src/components/ui/common/DialogCloseButton.tsx

@@ -0,0 +1,21 @@
+'use client';
+
+import { X } from 'lucide-react';
+
+type DialogCloseButtonProps = {
+  onClick: () => void;
+  className?: string;
+};
+
+export function DialogCloseButton({ onClick, className = '' }: DialogCloseButtonProps) {
+  return (
+    <button
+      type="button"
+      onClick={onClick}
+      className={`shrink-0 rounded-[var(--radius-sm)] p-1.5 text-text-muted hover:text-text-primary hover:bg-background-secondary/80 focus:outline-none focus:ring-2 focus:ring-primary/35 ${className}`}
+      aria-label="Close"
+    >
+      <X className="h-5 w-5 icon-flat" />
+    </button>
+  );
+}

frontend/src/components/ui/organizations/InvitationHistoryDialog.tsx

@@ -1,10 +1,10 @@
 'use client';
 
 import { Check, Copy } from 'lucide-react';
+import { DialogCloseButton } from '@/components/ui/common/DialogCloseButton';
 import type { OrganizationInvitationHistoryItemDto } from '@/lib/api/organization';
 import { canShareOrganizationInviteLink } from '@/components/invitations/organizationInviteLinks';
 import { Badge, organizationLinkStatusVariant } from '@/components/ui/common/Badge';
-import { Button } from '@/components/ui/common/Button';
 import { Table } from '@/components/ui/common/Table';
 
 function formatInvitationStatusLabel(status: OrganizationInvitationHistoryItemDto['status']): string {
@@ -49,18 +49,16 @@ export function InvitationHistoryDialog({
   return (
     <div className="fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/50">
       <div
-        className="w-full max-w-3xl max-h-[90vh] overflow-y-auto rounded-[var(--radius-md)] border border-border bg-background-secondary p-6 shadow-xl space-y-4"
+        className="w-full max-w-[min(56rem,calc(100vw-17rem))] max-h-[90vh] overflow-y-auto rounded-[var(--radius-md)] border border-border bg-background-secondary p-6 shadow-xl space-y-4"
         role="dialog"
         aria-modal="true"
         aria-labelledby="invitation-history-title"
       >
-        <div className="flex items-center justify-between gap-3">
-          <h2 id="invitation-history-title" className="text-lg font-semibold text-text-primary">
+        <div className="flex items-start justify-between gap-3">
+          <h2 id="invitation-history-title" className="text-lg font-semibold text-text-primary pr-2">
             Invitation History
           </h2>
-          <Button type="button" size="sm" onClick={onClose}>
-            Close
-          </Button>
+          <DialogCloseButton onClick={onClose} />
         </div>
 
         {copyError && (