From 8f0407c49ced67be59c94384696d66ea03181b4f Mon Sep 17 00:00:00 2001
From: DEls <davide.els1@outlook.com>
Date: Wed, 30 Sep 2026 01:00:42 +0200
Subject: [PATCH] Improve user settings layout and forms on mobile

---
 .../dashboard/settings/users/users-view.tsx   | 52 +++++++++++++------
 1 file changed, 36 insertions(+), 16 deletions(-)

diff --git a/src/app/dashboard/settings/users/users-view.tsx b/src/app/dashboard/settings/users/users-view.tsx
index 07bd55d..39ca083 100644
--- a/src/app/dashboard/settings/users/users-view.tsx
+++ b/src/app/dashboard/settings/users/users-view.tsx
@@ -33,15 +33,35 @@ export function UsersView({ users, sites, isAdmin }: { users: ManagedUser[]; sit
   function edit(user: ManagedUser) { setSelected(user); setFormKey((key) => key + 1); setOpen(true); }
 
   return (
-    <div className="mx-auto max-w-5xl space-y-5 p-4 sm:p-6">
-      <div className="flex items-center justify-between gap-3">
+    <div className="mx-auto min-w-0 max-w-5xl space-y-5 p-4 sm:p-6">
+      <div className="flex flex-col items-stretch justify-between gap-3 sm:flex-row sm:items-center">
         <div>
           <h2 className="text-lg font-semibold">Users</h2>
           <p className="text-sm text-muted-foreground">{isAdmin ? "Admins manage all sites and users. Clock users start in the clock app." : "Add clock users for your assigned sites. They can scan staff, vehicles and delivery notes in the clock app."}</p>
         </div>
-        <Button onClick={add}><Plus className="mr-2 h-4 w-4" /> Add user</Button>
+        <Button onClick={add} className="min-h-11 w-full sm:min-h-9 sm:w-auto sm:shrink-0"><Plus className="mr-2 h-4 w-4" /> Add user</Button>
       </div>
-      <div className="overflow-x-auto rounded-xl border border-border bg-card">
+      <div className="space-y-3 sm:hidden">
+        {users.map((user) => (
+          <article key={user.id} className="min-w-0 rounded-xl border border-border bg-card p-4">
+            <div className="flex items-start justify-between gap-3">
+              <div className="min-w-0 space-y-1">
+                <h3 className="break-words font-semibold">{user.name || user.email}</h3>
+                <p className="break-all text-sm text-muted-foreground">{user.email}</p>
+                <p className="text-sm text-muted-foreground">{ROLE_LABELS[user.role]}</p>
+              </div>
+              {isAdmin && <Button variant="outline" className="min-h-11 min-w-11 shrink-0 px-3" onClick={() => edit(user)} aria-label={`Edit ${user.name || user.email}`}><Pencil className="h-4 w-4" /><span className="sr-only">Edit</span></Button>}
+            </div>
+            <div className="mt-3 flex flex-wrap gap-2"><Badge variant={user.is_active ? "default" : "outline"}>{user.is_active ? "Active" : "Inactive"}</Badge>{user.must_change_password && <Badge variant="outline">Password change</Badge>}</div>
+            <div className="mt-3 border-t border-border pt-3 text-sm">
+              <p className="mb-1 text-xs font-medium text-muted-foreground">Site access</p>
+              <p className="break-words">{user.role === "admin" ? "All sites" : user.sites.map((id) => sites.find((site) => site.id === id)?.name ?? id).join(", ") || "No sites"}</p>
+            </div>
+          </article>
+        ))}
+      </div>
+      {users.length === 0 && <p className="rounded-xl border border-dashed border-border p-6 text-center text-sm text-muted-foreground">No users yet. Add a user to get started.</p>}
+      <div className="hidden overflow-x-auto rounded-xl border border-border bg-card sm:block">
         <table className="w-full text-left text-sm">
           <thead className="border-b border-border bg-muted/50 text-muted-foreground">
             <tr><th className="p-3">Name</th><th className="p-3">Role</th><th className="p-3">Sites</th><th className="p-3">Status</th><th className="p-3"><span className="sr-only">Edit</span></th></tr>
@@ -101,29 +121,29 @@ function UserDialog({ open, onOpenChange, user, sites, isAdmin }: {
 
   return (
     <Dialog open={open} onOpenChange={(next) => { if (!busy) onOpenChange(next); }}>
-      <DialogContent className="max-h-[90vh] overflow-y-auto sm:max-w-lg">
-        <DialogHeader><DialogTitle>{user ? "Edit user" : "Add user"}</DialogTitle></DialogHeader>
-        <form onSubmit={save} className="space-y-4">
-          <label className="block text-sm font-medium">Name<input required value={name} onChange={(e) => setName(e.target.value)} className="mt-1 w-full rounded-md border border-input bg-background px-3 py-2" /></label>
-          <label className="block text-sm font-medium">Email<input required type="email" disabled={!!user} value={email} onChange={(e) => setEmail(e.target.value)} className="mt-1 w-full rounded-md border border-input bg-background px-3 py-2 disabled:opacity-60" /></label>
+      <DialogContent className="w-[calc(100%-2rem)] max-h-[calc(100dvh-2rem)] min-w-0 overflow-y-auto overscroll-contain p-5 sm:max-h-[90dvh] sm:max-w-lg sm:p-6 [&>button]:right-2 [&>button]:top-2 [&>button]:flex [&>button]:h-11 [&>button]:w-11 [&>button]:items-center [&>button]:justify-center">
+        <DialogHeader className="pr-9"><DialogTitle>{user ? "Edit user" : "Add user"}</DialogTitle></DialogHeader>
+        <form onSubmit={save} className="min-w-0 space-y-4">
+          <label className="block text-sm font-medium">Name<input required value={name} onChange={(e) => setName(e.target.value)} className="mt-1 min-h-11 w-full rounded-md border border-input bg-background px-3 py-2 text-base sm:min-h-10 sm:text-sm" /></label>
+          <label className="block text-sm font-medium">Email<input required type="email" disabled={!!user} value={email} onChange={(e) => setEmail(e.target.value)} className="mt-1 min-h-11 w-full rounded-md border border-input bg-background px-3 py-2 text-base sm:min-h-10 sm:text-sm disabled:opacity-60" /></label>
           <label className="block text-sm font-medium">Role
-            <select value={role} onChange={(e) => setRole(e.target.value as Role)} className="mt-1 w-full rounded-md border border-input bg-background px-3 py-2">
+            <select value={role} onChange={(e) => setRole(e.target.value as Role)} className="mt-1 min-h-11 w-full rounded-md border border-input bg-background px-3 py-2 text-base sm:min-h-10 sm:text-sm">
               {isAdmin && <option value="site_user">Site manager</option>}<option value="clock_only">Clock user</option>{isAdmin && <option value="admin">Admin</option>}
             </select>
           </label>
-          {role !== "admin" && <fieldset className="rounded-lg border border-border p-3"><legend className="px-1 text-sm font-medium">Allowed sites</legend>
-            <div className="mt-2 space-y-2">{sites.map((site) => <label key={site.id} className="flex items-center gap-2 text-sm"><input type="checkbox" checked={chosenSites.includes(site.id)} onChange={() => toggleSite(site.id)} />{site.name}</label>)}</div>
+          {role !== "admin" && <fieldset className="min-w-0 rounded-lg border border-border p-3"><legend className="px-1 text-sm font-medium">Allowed sites</legend>
+            <div className="mt-2 space-y-2">{sites.map((site) => <label key={site.id} className="flex min-h-11 items-center gap-3 py-1 text-sm"><input className="h-5 w-5 shrink-0 accent-primary" type="checkbox" checked={chosenSites.includes(site.id)} onChange={() => toggleSite(site.id)} />{site.name}</label>)}</div>
           </fieldset>}
           <label className="block text-sm font-medium">{user ? "Set a new password (optional)" : "Initial password"}
-            <input type="text" minLength={8} maxLength={128} required={!user} value={password} onChange={(e) => setPassword(e.target.value)} autoComplete="off" className="mt-1 w-full rounded-md border border-input bg-background px-3 py-2" />
+            <input type="text" minLength={8} maxLength={128} required={!user} value={password} onChange={(e) => setPassword(e.target.value)} autoComplete="off" className="mt-1 min-h-11 w-full rounded-md border border-input bg-background px-3 py-2 text-base sm:min-h-10 sm:text-sm" />
           </label>
           {user && <div className="space-y-2 rounded-lg border border-border p-3 text-sm">
-            <label className="flex items-center gap-2"><input type="checkbox" checked={active} onChange={(e) => setActive(e.target.checked)} />Active account</label>
-            <label className="flex items-center gap-2"><input type="checkbox" checked={changePassword} onChange={(e) => setChangePassword(e.target.checked)} />Require password change on next sign-in</label>
+            <label className="flex min-h-11 items-center gap-3 py-1"><input className="h-5 w-5 shrink-0 accent-primary" type="checkbox" checked={active} onChange={(e) => setActive(e.target.checked)} />Active account</label>
+            <label className="flex min-h-11 items-center gap-3 py-1"><input className="h-5 w-5 shrink-0 accent-primary" type="checkbox" checked={changePassword} onChange={(e) => setChangePassword(e.target.checked)} />Require password change on next sign-in</label>
           </div>}
           {!user && <p className="text-xs text-muted-foreground">The user will choose a new password at first sign-in. You can change the initial password above.</p>}
           {error && <p role="alert" className="text-sm text-destructive">{error}</p>}
-          <Button type="submit" className="w-full" disabled={busy || (role !== "admin" && chosenSites.length === 0)}>{busy ? "Saving…" : user ? "Save changes" : "Add user"}</Button>
+          <div className="sticky -bottom-5 -mx-5 -mb-5 border-t border-border bg-card px-5 pt-4 pb-[max(1.25rem,env(safe-area-inset-bottom))] sm:static sm:m-0 sm:border-0 sm:p-0"><Button type="submit" className="min-h-11 w-full sm:min-h-9" disabled={busy || (role !== "admin" && chosenSites.length === 0)}>{busy ? "Saving…" : user ? "Save changes" : "Add user"}</Button></div>
         </form>
       </DialogContent>
     </Dialog>