app now responsive for mobile and small devices.

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

@@ -4,6 +4,7 @@ import { useEffect, useState } from 'react';
 import { useTranslations } from 'next-intl';
 import { Button } from '@/components/ui/shared/Button';
 import { DialogCloseButton } from '@/components/ui/shared/DialogCloseButton';
+import { ResponsiveDialogOverlay, ResponsiveDialogPanel } from '@/components/ui/shared/ResponsiveDialog';
 import { Dropdown } from '@/components/ui/shared/Dropdown';
 import type { AppointmentPurpose, AppointmentRecord } from '@/types/appointment';
 import type { TreatmentCatalogEntry } from '@/types/treatment-catalog';
@@ -162,12 +163,13 @@ export function AppointmentBookingModal({
   }
 
   return (
-    <div className="fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/55">
-      <div
-        className="surface-card w-full max-w-md p-5 space-y-4 shadow-xl"
+    <ResponsiveDialogOverlay onBackdropClick={onClose} className="bg-black/55">
+      <ResponsiveDialogPanel
+        maxWidthClass="sm:max-w-md"
         role="dialog"
         aria-modal="true"
         aria-labelledby="appointment-modal-title"
+        className="surface-card space-y-4"
       >
         <div className="flex items-start justify-between gap-2">
           <h2 id="appointment-modal-title" className="text-lg font-semibold text-text-primary pr-2">
@@ -194,7 +196,7 @@ export function AppointmentBookingModal({
           </p>
         </div>
 
-        <div className="grid grid-cols-2 gap-3">
+        <div className="grid grid-cols-1 sm:grid-cols-2 gap-3">
           <div>
             <label className="block text-sm font-medium text-text-secondary mb-1">
               {t('startLabel')}
@@ -240,7 +242,7 @@ export function AppointmentBookingModal({
 
         {error && <p className="text-sm text-red-400">{error}</p>}
 
-        <div className="flex flex-wrap items-center gap-2 justify-between">
+        <div className="flex flex-col-reverse gap-2 sm:flex-row sm:flex-wrap sm:items-center sm:justify-between">
           {editingAppointment && canDelete && onDelete ? (
             <Button
               type="button"
@@ -248,14 +250,21 @@ export function AppointmentBookingModal({
               onClick={() => void onDelete()}
               disabled={loading || deleting}
               isLoading={deleting}
+              fullWidth
+              className="sm:w-auto"
             >
               {tCommon('delete')}
             </Button>
-          ) : (
-            <span />
-          )}
-          <div className="flex gap-2 ml-auto">
-            <Button type="button" variant="ghost" onClick={onClose} disabled={loading || deleting}>
+          ) : null}
+          <div className="flex flex-col-reverse sm:flex-row gap-2 sm:ml-auto w-full sm:w-auto">
+            <Button
+              type="button"
+              variant="ghost"
+              onClick={onClose}
+              disabled={loading || deleting}
+              fullWidth
+              className="sm:w-auto"
+            >
               {tCommon('cancel')}
             </Button>
             <Button
@@ -264,12 +273,14 @@ export function AppointmentBookingModal({
               onClick={() => void handleSubmit()}
               isLoading={loading}
               disabled={deleting}
+              fullWidth
+              className="sm:w-auto"
             >
               {tCommon('save')}
             </Button>
           </div>
         </div>
-      </div>
-    </div>
+      </ResponsiveDialogPanel>
+    </ResponsiveDialogOverlay>
   );
 }