refactor: video section ui modification

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

@@ -1,14 +1,13 @@
 'use client';
 
-import { History } from 'lucide-react';
+import { History, MessageSquareText } from 'lucide-react';
 
 import { cn } from '@/lib/utils';
 import type { TicketDetail, TicketHistoryItem, TicketStatus } from '@/types';
+import { formatDate } from '@/utils/date';
 
 import { formatTicketStatus } from '../../components/TicketStatusBadge';
 
-import { formatDate } from '@/utils/date';
-
 function getActorLabel(item: TicketHistoryItem) {
   return item.actor?.name || item.actor?.email || 'System';
 }
@@ -61,7 +60,7 @@ function HistoryEntry({
         />
       </span>
 
-      <div className="min-w-0 flex-1 space-y-1.5">
+      <div className="min-w-0 flex-1 space-y-2">
         <div className="flex flex-wrap items-baseline gap-x-3 gap-y-1">
           <h3 className="text-sm font-semibold text-foreground">
             {getLifecycleTitle(item.to_status)}
@@ -74,12 +73,17 @@ function HistoryEntry({
           </time>
         </div>
 
-        <p className="text-sm leading-relaxed text-foreground">
-          {item.note ||
-            `${formatTicketStatus(item.to_status)} by ${getActorLabel(item)}.`}
+        <p className="text-xs font-medium text-muted-foreground">
+          Updated By{' '}
+          <span className="text-foreground/90">{getActorLabel(item)}</span>
         </p>
 
-        <p className="text-xs text-muted-foreground">{getActorLabel(item)}</p>
+        {item.note ? (
+          <div className="flex gap-2 rounded-md border border-border bg-background px-3 py-2 text-sm leading-relaxed text-foreground">
+            <MessageSquareText className="mt-0.5 size-4 shrink-0 text-primary" />
+            <p>{item.note}</p>
+          </div>
+        ) : null}
       </div>
     </div>
   );