fix:优化数据样式

src/components/HeaderPanel.tsx

@@ -7,6 +7,7 @@ import { usePlaybackStore } from '@/store/playbackStore'
 import { Wifi, WifiOff, Clock, Share2, Heart, Eye, MessageSquare } from 'lucide-react'
 
 const STORAGE_LIKES = 'us-iran-dashboard-likes'
+// 冲突时长显示在 TimelinePanel（数据回放栏）内
 
 function getStoredLikes(): number {
   try {
@@ -155,13 +156,15 @@ export function HeaderPanel() {
   return (
     <header className="flex shrink-0 flex-wrap items-center justify-between gap-2 overflow-hidden border-b border-military-border bg-military-panel/95 px-2 py-2 font-orbitron sm:gap-3 sm:px-4 sm:py-3 lg:flex-nowrap lg:gap-4 lg:px-6">
       <div className="flex min-w-0 flex-wrap items-center gap-2 sm:gap-3 lg:gap-6">
-        <h1 className="truncate text-sm font-bold uppercase tracking-wider text-military-accent sm:text-base sm:tracking-widest lg:text-2xl">
+        <h1 className="min-w-0 shrink truncate text-sm font-bold uppercase tracking-wider text-military-accent sm:text-base sm:tracking-widest lg:text-2xl">
           美伊军事态势显示
         </h1>
-        <div className="flex min-w-0 shrink-0 flex-col gap-0.5">
+        <div className="flex w-[12rem] shrink-0 flex-col gap-0.5 font-mono sm:w-[13rem]">
           <div className="flex items-center gap-1.5 text-xs text-military-text-secondary sm:gap-2 sm:text-sm">
             <Clock className="h-3.5 w-3.5 shrink-0 sm:h-4 sm:w-4" />
-            <span className="tabular-nums sm:min-w-[10rem]">{formatDateTime(now)}</span>
+            <span className="min-w-[10rem] tabular-nums sm:min-w-[11rem]">
+              {formatDateTime(now)}
+            </span>
           </div>
           {(isConnected || isReplayMode) && (
             <span className={`text-[10px] ${isReplayMode ? 'text-military-accent' : 'text-green-500/90'}`}>