Template build details pixel perfect tweaks (#210)

Minor cosmetic changes to bring the Template build details page
up-to-date with Figma

**Template Link Styling:**

- Added underline with 2px offset for cleaner appearance
- Orange hover state on template link

**Build Header:**

- Changed all header items to secondary text color
- Removed ID truncation in details section (now shows full ID)
- Added truncated Build ID to page breadcrumb (first 6 + last 6 chars)

**Logs Table:**

- Reduced header height from 40px to 32px
- Added conditional prose-label-highlight styling for selected table
headers (using data-state="selected")
- Implemented 16px column spacing using pr-4 on non-last columns
- Updated column width constants to account for padding (timestamp:
176+16, level: 52+16)
- Added 8px top padding below table header (using virtualizer
paddingStart)
- Reduced log level badge height from 20px to 18px
- Changed info badge variant from 'positive' to 'info'

Before:
<img width="4112" height="2572" alt="Arc - 2025-12-19 at 16 16 39@2x"
src="https://github.com/user-attachments/assets/b9aa295d-0c20-494e-ace2-797455a190d7"
/>

After:
<img width="4112" height="2572" alt="Arc - 2025-12-19 at 16 16 03@2x"
src="https://github.com/user-attachments/assets/96299a4f-6102-4f32-9016-883515954541"
/>

---------

Co-authored-by: ben-fornefeld <[email protected]>

Author: vojtabohm

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} />
@@ -652,7 +659,7 @@ function StatusRow({
           justifyContent: 'start',
         }}
       >
-        <span className="prose-body-highlight text-fg-tertiary uppercase">
+        <span className="prose-body text-fg-tertiary pb-1">
           {isFetchingNextPage ? (
             <span className="inline-flex gap-1">
               Loading more logs

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/features/dashboard/layouts/header.tsx

@@ -36,14 +36,17 @@ export default function DashboardLayoutHeader({
         className
       )}
     >
-      <div className="flex items-center gap-2 w-full relative min-h-7">
-        <SidebarTrigger className="w-7 h-7 md:hidden -translate-x-1" />
+      <div className="flex items-center w-full relative min-h-6 gap-2">
+        <SidebarTrigger className="w-7 h-7 md:hidden -translate-x-1 shrink-0" />
 
-        <h1 className="mr-auto align-middle truncate">
+        <h1 className="truncate min-w-0 flex-1">
           <HeaderTitle title={config.title} />
         </h1>
 
-        {children}
+        {/* Ghost element - reserves width but not height */}
+        <div className="h-0 overflow-visible shrink-0 flex items-center">
+          {children}
+        </div>
 
         <ClientOnly>
           <ThemeSwitcher />
@@ -62,16 +65,16 @@ function HeaderTitle({ title }: { title: string | TitleSegment[] }) {
     <span className="flex items-center gap-1">
       {title.map((segment, index) => (
         <Fragment key={index}>
-          {index > 0 && <span className="text-fg-tertiary select-none">/</span>}
+          {index > 0 && <span className="text-fg-tertiary select-none shrink-0">/</span>}
           {segment.href ? (
             <Link
               href={segment.href}
-              className="text-fg-secondary hover:text-fg transition-colors hover:underline"
+              className="text-fg-secondary hover:text-fg transition-colors hover:underline shrink-0"
             >
               {segment.label}
             </Link>
           ) : (
-            <span>{segment.label}</span>
+            <span className="truncate">{segment.label}</span>
           )}
         </Fragment>
       ))}

src/features/dashboard/layouts/layout.tsx

@@ -15,7 +15,7 @@ export default function DashboardLayout({
     <div className="max-h-dvh h-full relative flex flex-col min-h-0">
       <DashboardLayoutHeader>
         <LiveSandboxCounterServer
-          className="top-1/2 -translate-y-1/2 absolute right-10 max-md:hidden"
+          className="max-md:hidden"
           params={params}
         />
       </DashboardLayoutHeader>

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
     )}