Template build details pixel perfect tweaks

src/configs/layout.ts

@@ -38,15 +38,16 @@ const DASHBOARD_LAYOUT_CONFIGS: Record<
   '/dashboard/*/templates/*/builds/*': (pathname) => {
     const parts = pathname.split('/')
     const teamIdOrSlug = parts[2]!
-    const buildId = parts.pop()
+    const buildId = parts.pop()!
+    const buildIdSliced = `${buildId.slice(0, 6)}...${buildId.slice(-6)}`
 
     return {
       title: [
         {
           label: 'Templates',
           href: PROTECTED_URLS.TEMPLATES_BUILDS(teamIdOrSlug),
         },
-        { label: `Build ${buildId}` },
+        { label: `Build ${buildIdSliced}` },
       ],
       type: 'custom',
       custom: {

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

@@ -31,7 +31,7 @@ export function Template({
     <Button
       variant="link"
       className={cn(
-        'text-fg h-auto p-0 gap-1 font-sans prose-table normal-case max-w-full',
+        'text-fg-secondary h-auto p-0 gap-1 font-sans prose-body normal-case max-w-full underline underline-offset-2 hover:text-accent-main-highlight',
         className
       )}
       onClick={(e) => {
@@ -43,7 +43,6 @@ export function Template({
       }}
     >
       <p className="truncate">{template}</p>
-      <ArrowUpRight className="size-3 min-w-3" />
     </Button>
   )
 }
@@ -76,7 +75,7 @@ export function RanFor({
   // no timestamp to copy - just show duration
   if (isBuilding || !finishedAt) {
     return (
-      <span className="whitespace-nowrap text-fg-tertiary">
+      <span className="whitespace-nowrap text-fg-secondary">
         {formatDurationCompact(duration)}
       </span>
     )
@@ -86,8 +85,8 @@ export function RanFor({
   const formattedTimestamp = formatCompactDate(finishedAt)
 
   return (
-    <CopyButtonInline value={iso} className="whitespace-nowrap group/time">
-      {formatDurationCompact(duration)}{' '}
+    <CopyButtonInline value={iso} className="whitespace-nowrap text-fg-secondary group/time">
+      In {formatDurationCompact(duration)}{' '}
       <span className="text-fg-tertiary group-hover/time:text-current transition-colors">
         · {formattedTimestamp}
       </span>
@@ -101,7 +100,7 @@ export function StartedAt({ timestamp }: { timestamp: number }) {
   const formattedTimestamp = formatCompactDate(timestamp)
 
   return (
-    <CopyButtonInline value={iso} className="whitespace-nowrap group/time">
+    <CopyButtonInline value={iso} className="whitespace-nowrap text-fg-secondary group/time">
       {formatTimeAgoCompact(elapsed)}{' '}
       <span className="text-fg-tertiary group-hover/time:text-current transition-colors">
         · {formattedTimestamp}

src/features/dashboard/build/header.tsx

@@ -30,9 +30,9 @@ export default function BuildHeader({
         <DetailsItem label="ID">
           <CopyButtonInline
             value={buildId}
-            className="font-mono prose-body-numeric"
+            className="font-mono prose-table-numeric text-fg-secondary"
           >
-            {buildId.slice(0, 6)}...{buildId.slice(-6)}
+            {buildId}
           </CopyButtonInline>
         </DetailsItem>
         <DetailsItem label="Template">
@@ -52,7 +52,7 @@ export default function BuildHeader({
             <StartedAt timestamp={buildDetails.startedAt} />
           )}
         </DetailsItem>
-        <DetailsItem label={isBuilding ? 'Ran for' : 'Finished'}>
+        <DetailsItem label={isBuilding ? 'Running for' : 'Finished'}>
           {isLoading ? (
             <Skeleton className="w-36 h-5" />
           ) : (

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

@@ -14,7 +14,7 @@ const mapLogLevelToBadgeProps: Record<BuildLogDTO['level'], BadgeProps> = {
     variant: 'default',
   },
   info: {
-    variant: 'positive',
+    variant: 'info',
   },
   warn: {
     variant: 'warning',
@@ -26,7 +26,7 @@ const mapLogLevelToBadgeProps: Record<BuildLogDTO['level'], BadgeProps> = {
 
 export const LogLevel = ({ level }: LogLevelProps) => {
   return (
-    <Badge {...mapLogLevelToBadgeProps[level]} className="uppercase">
+    <Badge {...mapLogLevelToBadgeProps[level]} className="uppercase h-[18px]">
       {level}
     </Badge>
   )

src/features/dashboard/build/logs.tsx

@@ -42,7 +42,8 @@ import { type LogLevelFilter } from './logs-filter-params'
 import { useBuildLogs } from './use-build-logs'
 import useLogFilters from './use-log-filters'
 
-const COLUMN_WIDTHS_PX = { timestamp: 192, level: 92 } as const
+// Column width are calculated as max width of the content + padding
+const COLUMN_WIDTHS_PX = { timestamp: 176 + 16, level: 52 + 16 } as const
 const ROW_HEIGHT_PX = 26
 const VIRTUAL_OVERSCAN = 16
 const SCROLL_LOAD_THRESHOLD_PX = 200
@@ -207,15 +208,21 @@ function LogsTableHeader() {
     >
       <TableRow style={{ display: 'flex', minWidth: '100%' }}>
         <TableHead
-          className="text-fg"
+          data-state="selected"
+          className="px-0 pr-4"
           style={{ display: 'flex', width: COLUMN_WIDTHS_PX.timestamp }}
         >
           Timestamp <ArrowDownIcon className="size-3 rotate-180" />
         </TableHead>
-        <TableHead style={{ display: 'flex', width: COLUMN_WIDTHS_PX.level }}>
+        <TableHead
+          className="px-0 pr-4"
+          style={{ display: 'flex', width: COLUMN_WIDTHS_PX.level }}
+        >
           Level
         </TableHead>
-        <TableHead style={{ display: 'flex', flex: 1 }}>Message</TableHead>
+        <TableHead className="px-0" style={{ display: 'flex', flex: 1 }}>
+          Message
+        </TableHead>
       </TableRow>
     </TableHeader>
   )
@@ -224,7 +231,7 @@ function LogsTableHeader() {
 function LoaderBody() {
   return (
     <TableBody style={{ display: 'grid' }}>
-      <TableRow style={{ display: 'flex', minWidth: '100%' }}>
+      <TableRow style={{ display: 'flex', minWidth: '100%', marginTop: 8 }}>
         <TableCell className="flex-1">
           <div className="h-[35svh] w-full flex justify-center items-center">
             <Loader variant="slash" size="lg" />
@@ -242,7 +249,7 @@ interface EmptyBodyProps {
 function EmptyBody({ hasRetainedLogs }: EmptyBodyProps) {
   return (
     <TableBody style={{ display: 'grid' }}>
-      <TableRow style={{ display: 'flex', minWidth: '100%' }}>
+      <TableRow style={{ display: 'flex', minWidth: '100%', marginTop: 8 }}>
         <TableCell className="flex-1">
           <div className="h-[35vh] w-full gap-2 relative flex flex-col justify-center items-center p-6">
             <div className="flex items-center gap-2">
@@ -279,11 +286,10 @@ function LevelFilter({ level, onLevelChange }: LevelFilterProps) {
         <DropdownMenuTrigger asChild>
           <Button
             variant="outline"
-            size="sm"
-            className="font-sans w-min normal-case"
+            className="font-sans w-min normal-case prose-body-highlight h-9"
           >
             <LevelIndicator level={selectedLevel} />
-            Min Level • {selectedLabel}
+            Min Level · {selectedLabel}
           </Button>
         </DropdownMenuTrigger>
         <DropdownMenuContent align="start">
@@ -310,7 +316,7 @@ function LevelIndicator({ level }: { level: LogLevelFilter }) {
         'size-3.5 rounded-full bg-bg border-[1.5px] border-dashed',
         {
           'border-fg-tertiary': level === 'debug',
-          'border-accent-positive-highlight': level === 'info',
+          'border-accent-info-highlight': level === 'info',
           'border-accent-warning-highlight': level === 'warn',
           'border-accent-error-highlight': level === 'error',
         }
@@ -377,6 +383,7 @@ function VirtualizedLogsBody({
     estimateSize: () => ROW_HEIGHT_PX,
     getScrollElement: () => scrollContainerRef.current,
     overscan: VIRTUAL_OVERSCAN,
+    paddingStart: 8,
   })
 
   const containerWidth = scrollContainerRef.current?.clientWidth ?? 0
@@ -586,7 +593,7 @@ function LogRow({ log, virtualRow, virtualizer, startedAt }: LogRowProps) {
       }}
     >
       <TableCell
-        className="py-0"
+        className="py-0 px-0 pr-4"
         style={{
           display: 'flex',
           alignItems: 'center',
@@ -599,7 +606,7 @@ function LogRow({ log, virtualRow, virtualizer, startedAt }: LogRowProps) {
         />
       </TableCell>
       <TableCell
-        className="py-0"
+        className="py-0 px-0 pr-4"
         style={{
           display: 'flex',
           alignItems: 'center',
@@ -609,7 +616,7 @@ function LogRow({ log, virtualRow, virtualizer, startedAt }: LogRowProps) {
         <LogLevel level={log.level} />
       </TableCell>
       <TableCell
-        className="py-0"
+        className="py-0 px-0"
         style={{ display: 'flex', alignItems: 'center', whiteSpace: 'nowrap' }}
       >
         <Message message={log.message} />

src/features/dashboard/layouts/details-row.tsx

@@ -7,7 +7,7 @@ interface DetailItemProps extends React.HTMLAttributes<HTMLDivElement> {
 
 export function DetailsItem({ label, children, ...props }: DetailItemProps) {
   return (
-    <div className={cn('flex flex-col gap-2')} {...props}>
+    <div className={cn('flex flex-col gap-1')} {...props}>
       <span className="text-fg-tertiary prose-label uppercase">{label}</span>
       {children}
     </div>

src/ui/primitives/table.tsx

@@ -79,9 +79,10 @@ const TableHead = React.forwardRef<
   <th
     ref={ref}
     className={cn(
-      'h-10 px-4 text-left align-middle',
-      'font-mono prose-label-highlight uppercase',
+      'h-8 px-4 text-left align-middle',
+      'font-mono prose-label uppercase',
       'text-fg-tertiary',
+      'data-[state=selected]:prose-label-highlight data-[state=selected]:text-fg',
       '[&:has([role=checkbox])]:pr-0 first:pl-0 last:pr-0',
       className
     )}