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">