fix: Improve timestamp alignment in build logs (#437)

### Problem

Each build-log row shows a relative elapsed time (e.g. 3.6s) followed by
the absolute time (e.g. 04:50:49.96 PM). The elapsed time has a variable
width, which caused two visible bugs:

1. Truncation — once elapsed time hit two digits (10.2s), the extra
character pushed the row past the fixed-width column and the absolute
time got clipped to ….
2. Misalignment — the variable-width elapsed time shifted the absolute
time to a different horizontal position on every row, so timestamps
didn't line up vertically and were hard to scan.

On top of that, the elapsed value itself jumped around:
formatDurationCompact emitted unpadded fields (2m 8s vs 2m 27s), so the
seconds column wandered between single- and double-digit widths.

### Solution

Gave the timestamp a stable, fixed-width layout so the whole column
lines up vertically and is easy to scan top-to-bottom. The elapsed time
and the absolute time now each occupy a fixed column, durations are
zero-padded so digits don't shift between rows, and the full timestamp
always fits without truncation.

<img width="290" height="441" alt="1"
src="https://github.com/user-attachments/assets/15dc06ad-fa68-41b8-892b-eb64564cabbf"
/>
<img width="287" height="310" alt="2"
src="https://github.com/user-attachments/assets/c63b26cb-3ae0-4789-ae0d-7053f00083a2"
/>

Author: Kraci

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

@@ -344,19 +344,22 @@ export function formatDuration(durationMs: number): string {
 
 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`