mobile responsive

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

@@ -15,6 +15,7 @@ import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
 import { Modal } from "@/components/ui/modal";
 import { useConfirm } from "@/components/confirm";
+import { Clamp } from "@/components/ui/clamp";
 
 const errMsg = (err: unknown, fallback: string) =>
   err instanceof AdminError ? err.message : fallback;
@@ -129,18 +130,20 @@ export function RolesTab() {
           <li key={r.id} className="rounded-xl border border-border p-4">
             <div className="flex items-start justify-between gap-3">
               <div className="min-w-0">
-                <p className="text-sm font-medium text-foreground">
-                  {r.name}{" "}
+                <div className="flex min-w-0 items-center gap-2">
+                  <Clamp className="text-sm font-medium text-foreground">
+                    {r.name}
+                  </Clamp>
                   {r.is_system && (
-                    <span className="ml-1 rounded bg-muted px-1.5 py-0.5 text-[10px] uppercase tracking-wide text-muted-foreground">
+                    <span className="shrink-0 rounded bg-muted px-1.5 py-0.5 text-[10px] uppercase tracking-wide text-muted-foreground whitespace-nowrap">
                       System
                     </span>
                   )}
-                </p>
+                </div>
                 {r.description && (
-                  <p className="mt-0.5 text-xs text-muted-foreground">
+                  <Clamp lines={2} className="mt-0.5 text-xs text-muted-foreground">
                     {r.description}
-                  </p>
+                  </Clamp>
                 )}
                 <p className="mt-1 text-xs text-muted-foreground">
                   {r.member_count} {r.member_count === 1 ? "member" : "members"}