refactor: standardize ticket detail card and tab styling

src/app/(modules)/ticket/[ticketId]/components/TicketRepairReportCard.tsx

@@ -2,6 +2,7 @@
 
 import { ImageIcon } from 'lucide-react';
 
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
 import type { TicketDetail } from '@/types';
 
 import { RepairProofImagesGrid } from './repair-report/RepairProofImagesGrid';
@@ -21,17 +22,21 @@ export function TicketRepairReportCard({ ticket }: { ticket: TicketDetail }) {
 
       <RepairVideoComparison ticket={ticket} />
 
-      <div className="space-y-3">
-        <h3 className="flex items-center gap-2 text-base font-semibold">
-          <ImageIcon className="size-5 text-primary" />
-          Repair Images
-        </h3>
+      <Card>
+        <CardHeader>
+          <CardTitle className="flex items-center gap-2">
+            <ImageIcon className="size-5 text-primary" />
+            Repair Images
+          </CardTitle>
+        </CardHeader>
 
-        <RepairProofImagesGrid
-          imageUrls={repair?.proof_image_urls ?? []}
-          submittedAt={repair?.submitted_at ?? null}
-        />
-      </div>
+        <CardContent>
+          <RepairProofImagesGrid
+            imageUrls={repair?.proof_image_urls ?? []}
+            submittedAt={repair?.submitted_at ?? null}
+          />
+        </CardContent>
+      </Card>
     </section>
   );
 }