fix: Improve timestamp alignment in build logs

src/features/dashboard/build/logs-cells.tsx

@@ -7,7 +7,6 @@ import {
 } from '@/features/dashboard/common/log-cells'
 import { formatDurationCompact } from '@/lib/utils/formatting'
 import CopyButtonInline from '@/ui/copy-button-inline'
-import { Badge, type BadgeProps } from '@/ui/primitives/badge'
 
 export const LogLevel = ({ level }: { level: BuildLogModel['level'] }) => {
   return <LogLevelBadge level={level} />
@@ -27,10 +26,13 @@ export const Timestamp = ({
   return (
     <CopyButtonInline
       value={date.toISOString()}
-      className="font-mono group prose-table-numeric truncate"
+      truncate={false}
+      className="font-mono group prose-table-numeric"
     >
-      {formatDurationCompact(millisAfterStart, true)}{' '}
-      <span className="group-hover:text-current transition-colors text-fg-tertiary">
+      <span className="inline-block w-[7ch] shrink-0 text-right">
+        {formatDurationCompact(millisAfterStart, true, true)}
+      </span>
+      <span className="ml-2 whitespace-nowrap group-hover:text-current transition-colors text-fg-tertiary">
         {format(date, 'hh:mm:ss.SS a', {
           locale: enUS,
         })}

src/features/dashboard/build/logs.tsx

@@ -34,7 +34,7 @@ import { useBuildLogs } from './use-build-logs'
 import useLogFilters from './use-log-filters'
 
 // Column width are calculated as max width of the content + padding
-const COLUMN_WIDTHS_PX = { timestamp: 176 + 16, level: 52 + 16 } as const
+const COLUMN_WIDTHS_PX = { timestamp: 204 + 16, level: 52 + 16 } as const
 const ROW_HEIGHT_PX = 26
 const LIVE_STATUS_ROW_HEIGHT_PX = ROW_HEIGHT_PX + 16
 const VIRTUAL_OVERSCAN = 16

src/lib/utils/formatting.ts

@@ -228,19 +228,19 @@
 
   if (isThisYear(timestamp)) {
     return (
       new Intl.DateTimeFormat('en-US', {
         month: 'short',
         day: 'numeric',
       }).format(timestamp) + `, ${hour12}${ampm}`
     )
   }
 
   return (
     new Intl.DateTimeFormat('en-US', {
       year: 'numeric',
       month: 'short',
       day: 'numeric',
     }).format(timestamp) + `, ${hour12}${ampm}`
   )
 }
 
@@ -344,19 +344,22 @@
 
 export function formatDurationCompact(
   ms: number,
-  showDecimalSeconds = false
+  showDecimalSeconds = false,
+  padTrailingField = false
 ): string {
   const seconds = Math.floor(ms / 1000)
   const minutes = Math.floor(seconds / 60)
   const hours = Math.floor(minutes / 60)
+  const pad = (n: number) =>
+    padTrailingField ? n.toString().padStart(2, '0') : `${n}`
 
   if (hours > 0) {
     const remainingMinutes = minutes % 60
-    return `${hours}h ${remainingMinutes}m`
+    return `${hours}h ${pad(remainingMinutes)}m`
   }
   if (minutes > 0) {
     const remainingSeconds = seconds % 60
-    return `${minutes}m ${remainingSeconds}s`
+    return `${minutes}m ${pad(remainingSeconds)}s`
   }
   return showDecimalSeconds
     ? `${seconds}.${Math.floor((ms % 1000) / 100)}s`