mobile responsive

app/(dashboard)/feedback/page.tsx

@@ -13,6 +13,7 @@ import { useConfirm } from "@/components/confirm";
 import { RichTextarea } from "@/components/ui/rich-textarea";
 import { RichText } from "@/lib/rich-text";
 import { cn, fmtDate } from "@/lib/utils";
+import { Clamp } from "@/components/ui/clamp";
 
 const STATUSES = ["all", "open", "resolved"] as const;
 type Status = (typeof STATUSES)[number];
@@ -87,7 +88,9 @@ export default function FeedbackPage() {
         </div>
       }
     >
-      <Table>
+      {/* Phone: each field stacked, label above value, so a long message
+          gets the card's full width. Desktop: ordinary table rows. */}
+      <Table card="stacked">
         <THead>
           <TR>
             <TH>From</TH>
@@ -103,18 +106,18 @@ export default function FeedbackPage() {
           ) : (
             list.items.map((f) => (
               <TR key={f.id}>
-                <TD className="whitespace-nowrap">
+                <TD className="max-w-[14rem]">
                   {f.author_handle ? (
                     <>
-                      <div className="font-medium">{f.author_name}</div>
-                      <div className="text-xs text-muted-foreground">
-                        @{f.author_handle}
-                      </div>
+                      <Clamp className="font-medium">{f.author_name}</Clamp>
+                      <Clamp className="text-xs text-muted-foreground">
+                        {`@${f.author_handle}`}
+                      </Clamp>
                     </>
                   ) : (
-                    <div className="text-xs text-muted-foreground">
+                    <Clamp className="text-xs text-muted-foreground">
                       {f.contact_email ?? "Anonymous"}
-                    </div>
+                    </Clamp>
                   )}
                 </TD>
                 <TD className="max-w-md">
@@ -134,7 +137,7 @@ export default function FeedbackPage() {
                 </TD>
                 <TD className="whitespace-nowrap">{fmtDate(f.created_at)}</TD>
                 <TD className="text-right">
-                  <div className="flex flex-wrap justify-end gap-2">
+                  <div className="flex flex-wrap justify-start gap-2 md:justify-end">
                     <Can perm="feedback:resolve">
                       {!f.resolved_at && !f.acknowledged_at ? (
                         <Button