mobile responsive

app/(dashboard)/collections/page.tsx

@@ -6,6 +6,7 @@ import { usePagedList } from "@/lib/use-paged-list";
 import { ListShell, EmptyRow } from "@/components/list-shell";
 import { Table, THead, TR, TH, TD } from "@/components/ui/table";
 import { fmtDate } from "@/lib/utils";
+import { Clamp } from "@/components/ui/clamp";
 
 export default function CollectionsPage() {
   const [q, setQ] = useState("");
@@ -40,18 +41,20 @@ export default function CollectionsPage() {
             list.items.map((c) => (
               <TR key={c.id}>
                 <TD className="max-w-md">
-                  <div className="font-medium">{c.title}</div>
+                  <Clamp lines={2} className="font-medium">
+                    {c.title}
+                  </Clamp>
                   {c.description ? (
-                    <div className="mt-0.5 line-clamp-1 text-xs text-muted-foreground">
+                    <Clamp className="mt-0.5 text-xs text-muted-foreground">
                       {c.description}
-                    </div>
+                    </Clamp>
                   ) : null}
                 </TD>
-                <TD className="whitespace-nowrap">
-                  <div className="font-medium">{c.owner_name}</div>
-                  <div className="text-xs text-muted-foreground">
-                    @{c.owner_handle}
-                  </div>
+                <TD className="max-w-[14rem]">
+                  <Clamp className="font-medium">{c.owner_name}</Clamp>
+                  <Clamp className="text-xs text-muted-foreground">
+                    {`@${c.owner_handle}`}
+                  </Clamp>
                 </TD>
                 <TD>{c.item_count}</TD>
                 <TD>