ui: uniform badge sizing across record rows + fixed-width right-aligned label column in detail meta grid

app/src/components/records/RecordDetailDialog.tsx

@@ -4,7 +4,7 @@ import { Pencil, Trash2, Paperclip, FileText } from 'lucide-react';
 import { attachmentRead, attachmentThumb, footprintGet, listDimensions, listTypes } from '@/lib/api';
 import type { Attachment, FormField } from '@/lib/types';
 import { Badge, Button, Confirm, Dialog, useToast } from '@/components/ui';
-import { StatusBadge, LevelBadge, GradeBadge, RoleBadge, NegativeBadge } from '@/components/common/badges';
+import { StatusBadge, LevelBadge, GradeBadge, RoleBadge, NegativeBadge, ROW_BADGE_CLS } from '@/components/common/badges';
 import { AttachmentPreview } from '@/components/common/AttachmentPreview';
 import { makeThumb } from '@/lib/img';
 import { fmtRange, fmtDateTime, fmtSize } from '@/lib/format';
@@ -135,13 +135,13 @@ export function RecordDetailDialog({ open, onClose, footprintId, onEdit }: {
           <div>
             <h2 className="text-[20px] font-bold leading-tight tracking-tight text-ink-1" style={{ textWrap: 'balance' }}>{d.title}</h2>
             <div className="mt-2.5 flex flex-wrap items-center gap-1.5">
-            <Badge color={d.type_color}>{d.type_name}</Badge>
+            <Badge color={d.type_color} className={ROW_BADGE_CLS}>{d.type_name}</Badge>
             <LevelBadge level={d.level} />
             <GradeBadge grade={d.award_grade} />
             <RoleBadge role={d.role} />
             <StatusBadge status={d.status} />
             {d.polarity === 'negative' && <NegativeBadge />}
-            {d.rank != null && <Badge color="var(--text-3)">第 {d.rank} 名</Badge>}
+            {d.rank != null && <Badge color="var(--text-3)" className={ROW_BADGE_CLS}>第 {d.rank} 名</Badge>}
             </div>
           </div>
 
@@ -272,8 +272,8 @@ export function RecordDetailDialog({ open, onClose, footprintId, onEdit }: {
 
 function MetaItem({ label, value }: { label: string; value: string }) {
   return (
-    <div className="flex min-w-0 gap-2">
-      <span className="shrink-0 text-ink-3">{label}</span>
+    <div className="grid min-w-0 grid-cols-[76px_1fr] gap-x-2.5">
+      <span className="shrink-0 text-right text-ink-3">{label}</span>
       <span className="min-w-0 truncate font-medium text-ink-1" title={value}>{value}</span>
     </div>
   );