feat(ui): mobile responsiveness audit + type fixes
Mobile Responsiveness: - Viewport meta tags toegevoegd in layout.tsx - EPD header: patient details verborgen op mobiel, zoekbalk responsive - Agenda: auto-switch naar dagview op mobiel, mini-kalender verborgen - Agenda toolbar: verticale stacking, Week/Werkweek knoppen verborgen - Patiëntenlijst: compact icoon-only button op mobiel - Verpleegrapportage: verticale flow i.p.v. twee-koloms layout - Cortex: artifact overlay met slide-in animatie op mobiel - Cortex: "Terug" knop toegevoegd aan artifact panels - Toast feedback bij succesvolle afspraak creatie Code Quality Fixes (KISS/DRY): - Resize listener vervangen door bestaande useMediaQuery hook - Dubbele flex class opgeschoond in epd-header.tsx - userScalable: false verwijderd (accessibility) Type Fixes: - actions.ts: status literal type met 'as const' - agenda-block.tsx: dateRange start/end optioneel - chat-empty-state.tsx: framer-motion ease type - cortex-store.ts: ChatEntities.dateRange consistent met Zod schema 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
@@ -21,10 +21,10 @@ interface AgendaToolbarProps {
|
||||
onNewAppointment: () => void;
|
||||
}
|
||||
|
||||
const VIEW_OPTIONS: { value: CalendarView; label: string }[] = [
|
||||
const VIEW_OPTIONS: { value: CalendarView; label: string; className?: string }[] = [
|
||||
{ value: 'timeGridDay', label: 'Dag' },
|
||||
{ value: 'timeGridWeek', label: 'Week' },
|
||||
{ value: 'timeGridWorkWeek', label: 'Werkweek' },
|
||||
{ value: 'timeGridWeek', label: 'Week', className: 'hidden md:block' },
|
||||
{ value: 'timeGridWorkWeek', label: 'Werkweek', className: 'hidden md:block' },
|
||||
];
|
||||
|
||||
export function AgendaToolbar({
|
||||
@@ -60,7 +60,7 @@ export function AgendaToolbar({
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="flex items-center justify-between gap-4 mb-4">
|
||||
<div className="flex flex-col md:flex-row items-start md:items-center justify-between gap-4 mb-4">
|
||||
{/* Left: Title and Date */}
|
||||
<div className="flex items-center gap-4">
|
||||
<h1 className="text-2xl font-bold text-slate-900">Agenda</h1>
|
||||
@@ -104,11 +104,10 @@ export function AgendaToolbar({
|
||||
<button
|
||||
key={option.value}
|
||||
onClick={() => onViewChange(option.value)}
|
||||
className={`px-3 py-1.5 text-sm font-medium rounded-md transition-colors ${
|
||||
currentView === option.value
|
||||
className={`px-3 py-1.5 text-sm font-medium rounded-md transition-colors ${currentView === option.value
|
||||
? 'bg-white text-slate-900 shadow-sm'
|
||||
: 'text-slate-600 hover:text-slate-900'
|
||||
}`}
|
||||
} ${option.className || ''}`}
|
||||
>
|
||||
{option.label}
|
||||
</button>
|
||||
@@ -116,9 +115,10 @@ export function AgendaToolbar({
|
||||
</div>
|
||||
|
||||
{/* New Appointment Button */}
|
||||
<Button onClick={onNewAppointment} className="gap-2">
|
||||
<Button onClick={onNewAppointment} className="gap-2 w-full md:w-auto">
|
||||
<Plus className="h-4 w-4" />
|
||||
Nieuwe Afspraak
|
||||
<span className="hidden md:inline">Nieuwe Afspraak</span>
|
||||
<span className="md:hidden">Nieuw</span>
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user