mobile responsive

app/(dashboard)/users/disciple-link-modal.tsx

@@ -21,6 +21,7 @@ import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
 import { Modal } from "@/components/ui/modal";
 import { cn } from "@/lib/utils";
+import { Clamp } from "@/components/ui/clamp";
 
 /** "Vṛndāvana · 1972" — whichever halves we know. */
 function placeYear(d: AdminDisciple): string | null {
@@ -138,13 +139,13 @@ export function DiscipleLinkModal({
               <div className="text-xs text-muted-foreground">
                 Currently linked to
               </div>
-              <div className="truncate text-sm font-medium">
+              <Clamp className="text-sm font-medium">
                 {user.disciple_name ?? (
                   <span className="text-muted-foreground">
                     unknown disciple ({user.disciple_id.slice(0, 8)}…)
                   </span>
                 )}
-              </div>
+              </Clamp>
             </div>
             <Button
               variant="outline"
@@ -200,16 +201,19 @@ export function DiscipleLinkModal({
                       )}
                     >
                       <span className="min-w-0">
-                        <span className="block truncate text-sm font-medium">
+                        <Clamp
+                          className="text-sm font-medium"
+                          title={`${d.initiated_name} ${d.suffix ?? ""}`.trim()}
+                        >
                           {d.initiated_name}{" "}
                           <span className="font-normal text-muted-foreground">
                             {d.suffix}
                           </span>
-                        </span>
+                        </Clamp>
                         {sub ? (
-                          <span className="block truncate text-xs text-muted-foreground">
+                          <Clamp className="text-xs text-muted-foreground">
                             {sub}
-                          </span>
+                          </Clamp>
                         ) : null}
                       </span>
                       <span className="shrink-0 text-xs">

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>