mobile responsive

app/(dashboard)/users/page.tsx

@@ -23,6 +23,7 @@ import { RichTextarea } from "@/components/ui/rich-textarea";
 import { fmtDate } from "@/lib/utils";
 import { DiscipleLinkModal } from "./disciple-link-modal";
 import { useStaff } from "@/components/staff-context";
+import { Clamp } from "@/components/ui/clamp";
 
 export default function UsersPage() {
   const { can } = useStaff();
@@ -138,20 +139,20 @@ export default function UsersPage() {
             list.items.map((u) => (
               <TR key={u.id}>
                 <TD>
-                  <div className="flex items-center gap-3">
+                  <div className="flex min-w-0 items-center gap-3">
                     <Avatar src={u.avatar_url} name={u.name} />
                     <div className="min-w-0">
-                      <div className="flex items-center gap-2">
-                        <span className="font-medium">{u.name}</span>
+                      <div className="flex min-w-0 items-center gap-2">
+                        <Clamp className="font-medium">{u.name}</Clamp>
                         {u.banned_at ? (
-                          <span className="rounded bg-destructive/10 px-1.5 py-0.5 text-[10px] font-medium uppercase tracking-wide text-destructive">
+                          <span className="shrink-0 rounded bg-destructive/10 px-1.5 py-0.5 text-[10px] font-medium uppercase tracking-wide text-destructive whitespace-nowrap">
                             Suspended
                           </span>
                         ) : null}
                       </div>
-                      <div className="text-xs text-muted-foreground">
-                        @{u.handle}
-                      </div>
+                      <Clamp className="text-xs text-muted-foreground">
+                        {`@${u.handle}`}
+                      </Clamp>
                       {u.disciple_id ? (
                         <div
                           className="mt-1 inline-flex max-w-full items-center gap-1 rounded bg-primary/10 px-1.5 py-0.5 text-[10px] font-medium text-primary"
@@ -161,9 +162,7 @@ export default function UsersPage() {
                               : "Linked to an unknown disciple record"
                           }
                         >
-                          <span className="truncate">
-                            {u.disciple_name ?? "Direct disciple"}
-                          </span>
+                          <Clamp>{u.disciple_name ?? "Direct disciple"}</Clamp>
                         </div>
                       ) : null}
                     </div>
@@ -171,11 +170,11 @@ export default function UsersPage() {
                 </TD>
                 <TD>
                   <div className="space-y-1.5">
-                    <div>
-                      {u.email ?? (
-                        <span className="text-muted-foreground">—</span>
-                      )}
-                    </div>
+                    {u.email ? (
+                      <Clamp>{u.email}</Clamp>
+                    ) : (
+                      <span className="text-muted-foreground">—</span>
+                    )}
                     <AuthIcons user={u} />
                   </div>
                 </TD>