From 8e8a8e6f49d3085af3be6fa41ef1716455681c2a Mon Sep 17 00:00:00 2001 From: colinislit Date: Wed, 3 Dec 2025 17:02:27 +0100 Subject: [PATCH] Samenvatting van de fixes: 1. min-w-0 en box-border toegevoegd aan inputClassName en selectClassName - dit voorkomt dat inputs buiten hun grid-cellen groeien 2. overflow-hidden toegevoegd aan de DialogContent - voorkomt dat content buiten de modal zichtbaar is 3. overflow-hidden toegevoegd aan het form element 4. Grid layout verbeterd voor datum/tijd: grid-cols-[1fr_auto_auto] met vaste breedte (w-24) voor de tijd inputs, zodat de datum meer ruimte krijgt 5. min-w-0 toegevoegd aan alle grid children voor Type/Locatie Deze wijzigingen zorgen ervoor dat: - Invoervelden nooit buiten hun containers groeien - De modal content netjes binnen de grenzen blijft - De datum input meer ruimte krijgt dan de tijd inputs - Select dropdowns niet overflow veroorzaken --- .../agenda/components/appointment-modal.tsx | 18 +++++++++--------- components/ui/dialog.tsx | 2 +- docs/screenshot/afspraak-model.png | Bin 0 -> 54351 bytes 3 files changed, 10 insertions(+), 10 deletions(-) create mode 100644 docs/screenshot/afspraak-model.png diff --git a/app/epd/agenda/components/appointment-modal.tsx b/app/epd/agenda/components/appointment-modal.tsx index 3745f3b..f4f2dc9 100644 --- a/app/epd/agenda/components/appointment-modal.tsx +++ b/app/epd/agenda/components/appointment-modal.tsx @@ -58,8 +58,8 @@ interface AppointmentModalProps { onSuccess?: () => void; } -const inputClassName = "w-full px-3 py-2 border border-slate-300 rounded-lg focus:ring-2 focus:ring-teal-500 focus:border-transparent text-sm"; -const selectClassName = "w-full px-3 py-2 border border-slate-300 rounded-lg focus:ring-2 focus:ring-teal-500 focus:border-transparent text-sm bg-white"; +const inputClassName = "w-full min-w-0 px-3 py-2 border border-slate-300 rounded-lg focus:ring-2 focus:ring-teal-500 focus:border-transparent text-sm box-border"; +const selectClassName = "w-full min-w-0 px-3 py-2 border border-slate-300 rounded-lg focus:ring-2 focus:ring-teal-500 focus:border-transparent text-sm bg-white box-border"; const labelClassName = "block text-sm font-medium text-slate-700 mb-1"; export function AppointmentModal({ @@ -416,7 +416,7 @@ export function AppointmentModal({ -
+ {/* Patient Search */}