feat : imrpove admin comment

components/comments/admin-comment-inbox.tsx

@@ -10,7 +10,7 @@ import { Field, FieldGroup, FieldLabel } from "@/components/ui/field";
 import { FuzzyCombobox, ComboboxContent, ComboboxEmpty, ComboboxInput, ComboboxItem, ComboboxList } from "@/components/ui/combobox";
 import { Alert, AlertDescription } from "@/components/ui/alert";
 import { Empty, EmptyHeader, EmptyTitle, EmptyDescription } from "@/components/ui/empty";
-import { Separator } from "@/components/ui/separator";
+import { Table, TableBody, TableHead, TableHeader, TableRow } from "@/components/ui/table";
 import type { CommentPage } from "@/lib/comments/types";
 import { characterRarityGradientClass } from "@/lib/catalog/rarity";
 import { cn } from "@/lib/utils";
@@ -54,22 +54,21 @@ export function AdminCommentInbox({ initial, targets, initialTarget, initialComm
     </FieldGroup>
     {feed.error && <Alert variant="destructive"><AlertDescription>{feed.error}</AlertDescription></Alert>}
     {feed.page.items.length > 0 && <section aria-label="ความคิดเห็นจากทุกไกด์และทุกรอบ Stygian" className="flex min-w-0 flex-col">
-      <div className="hidden grid-cols-[minmax(0,1fr)_280px] gap-6 pb-3 text-sm text-muted-foreground md:grid">
-        <span>ความคิดเห็น</span><span className="text-right">เนื้อหา</span>
-      </div>
-      <Separator />
-      {feed.page.items.map((item) => <div key={item.id}>
-        <div className="py-5">
-          <CommentCard item={item} viewer={feed.page.viewer} inbox onChange={() => feed.refresh({ silent: true, forceRevision: true })} revision={feed.revision}
+      <Table className="table-fixed max-md:block" aria-label="ความคิดเห็นจากทุกไกด์และทุกรอบ Stygian">
+        <TableHeader className="max-md:sr-only"><TableRow>
+          <TableHead scope="col" className="px-0">ความคิดเห็น</TableHead>
+          <TableHead scope="col" className="w-[280px] px-0 text-right">เนื้อหา</TableHead>
+        </TableRow></TableHeader>
+        <TableBody className="max-md:block">
+          {feed.page.items.map((item) => <CommentCard key={item.id} item={item} viewer={feed.page.viewer} inbox onChange={() => feed.refresh({ silent: true, forceRevision: true })} revision={feed.revision}
             overview={item.target.startsWith("stygian:") ? <Link href={item.href} prefetch={false} className="min-w-0 break-words rounded-lg py-2 text-sm font-medium outline-none focus-visible:ring-2 focus-visible:ring-ring">
               {item.targetName}
             </Link> : item.targetImage && <Link href={item.href} prefetch={false} className="shrink-0 rounded-lg outline-none focus-visible:ring-2 focus-visible:ring-ring">
               {/* eslint-disable-next-line @next/next/no-img-element */}
               <img src={item.targetImage} alt={`ภาพ Overview ของ ${item.targetName}`} loading="lazy" decoding="async" width={112} height={112} className="size-28 rounded-lg object-contain" />
-            </Link>} />
-        </div>
-        <Separator />
-      </div>)}
+            </Link>} />)}
+        </TableBody>
+      </Table>
     </section>}
     {!feed.page.items.length && !feed.busy && !feed.error && <Empty><EmptyHeader><EmptyTitle>ไม่พบความคิดเห็นที่ตรงกัน</EmptyTitle><EmptyDescription>ความคิดเห็นจากทุกไกด์และทุกรอบ Stygian จะแสดงที่นี่</EmptyDescription></EmptyHeader></Empty>}
     {feed.busy && <AdminCommentRowsSkeleton count={feed.page.items.length ? 1 : 3} />}