mobile responsive

app/(dashboard)/broadcasts/page.tsx

@@ -17,6 +17,7 @@ import { Can } from "@/components/staff-context";
 import { toast } from "sonner";
 import { broadcasts, type Broadcast } from "@/lib/api";
 import { compressImage } from "@/lib/compress-image";
+import { Clamp } from "@/components/ui/clamp";
 
 export default function BroadcastsPage() {
   const [items, setItems] = useState<Broadcast[]>([]);
@@ -256,12 +257,12 @@ function BroadcastRow({
   return (
     <li className="flex items-start gap-3 p-3">
       <div className="min-w-0 flex-1">
-        <p className="truncate text-sm font-medium text-foreground">
+        <Clamp className="text-sm font-medium text-foreground">
           {item.title}
-        </p>
-        <p className="mt-0.5 line-clamp-2 text-xs text-muted-foreground">
+        </Clamp>
+        <Clamp lines={2} className="mt-0.5 text-xs text-muted-foreground">
           {item.body}
-        </p>
+        </Clamp>
         <p className="mt-1 text-xs text-muted-foreground">
           {live
             ? `Published · dismissed by ${item.seen_count}`