mobile responsive

app/(dashboard)/staff/staff-tab.tsx

@@ -14,6 +14,7 @@ import { Input } from "@/components/ui/input";
 import { Avatar } from "@/components/ui/avatar";
 import { Table, THead, TH, TR, TD } from "@/components/ui/table";
 import { useConfirm } from "@/components/confirm";
+import { Clamp } from "@/components/ui/clamp";
 
 const errMsg = (err: unknown, fallback: string) =>
   err instanceof AdminError ? err.message : fallback;
@@ -132,7 +133,9 @@ export function StaffTab() {
           <select
             value={grantRole}
             onChange={(e) => setGrantRole(e.target.value)}
-            className="h-10 rounded-lg border border-input bg-card px-3 text-sm"
+            // A <select> sizes itself to its longest option; a long custom
+            // role name must not widen the form past the screen.
+            className="h-10 min-w-0 max-w-full flex-1 truncate rounded-lg border border-input bg-card px-3 text-sm sm:max-w-xs sm:flex-none"
           >
             {roles.map((r) => (
               <option key={r.id} value={r.id}>
@@ -164,22 +167,25 @@ export function StaffTab() {
               return (
                 <TR key={m.user_id}>
                   <TD>
-                    <div className="flex items-center gap-3">
+                    <div className="flex min-w-0 items-center gap-3">
                       <Avatar
                         src={m.avatar_url ?? null}
                         name={m.name}
                         className="size-8"
                       />
                       <div className="min-w-0">
-                        <p className="truncate text-sm font-medium text-foreground">
+                        <Clamp
+                          className="text-sm font-medium text-foreground"
+                          title={m.name}
+                        >
                           {m.name}{" "}
                           {self && (
                             <span className="text-muted-foreground">(you)</span>
                           )}
-                        </p>
-                        <p className="truncate text-xs text-muted-foreground">
-                          @{m.handle}
-                        </p>
+                        </Clamp>
+                        <Clamp className="text-xs text-muted-foreground">
+                          {`@${m.handle}`}
+                        </Clamp>
                       </div>
                     </div>
                   </TD>
@@ -188,7 +194,7 @@ export function StaffTab() {
                         access, so a superadmin can't demote themselves into
                         a locked-out panel by accident. */}
                     {self ? (
-                      <span className="text-sm">{m.role_name}</span>
+                      <Clamp className="text-sm">{m.role_name}</Clamp>
                     ) : (
                       <select
                         value={m.role_id}
@@ -200,7 +206,7 @@ export function StaffTab() {
                             "Role changed",
                           )
                         }
-                        className="h-8 rounded-md border border-input bg-card px-2 text-xs"
+                        className="h-8 w-full max-w-[14rem] truncate rounded-md border border-input bg-card px-2 text-xs"
                       >
                         {roles.map((r) => (
                           <option key={r.id} value={r.id}>
@@ -212,7 +218,7 @@ export function StaffTab() {
                   </TD>
                   <TD>
                     {m.blocked_at ? (
-                      <span className="rounded bg-destructive/10 px-2 py-0.5 text-xs text-destructive">
+                      <span className="rounded bg-destructive/10 px-2 py-0.5 text-xs text-destructive whitespace-nowrap">
                         Blocked
                       </span>
                     ) : (