From 12529cba2f0b5dfce9990a5735eee2fe6b1b411b Mon Sep 17 00:00:00 2001
From: Bryan Helmkamp <19+brynary@users.noreply.github.com>
Date: Sat, 11 Jul 2026 13:25:13 -0400
Subject: [PATCH] Fix squished avatars in runs list "By" column (#569)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

## Problem

In the runs list view, avatars in the **By** column render as squished
ovals.

## Cause

The "By" column `<td>` is `w-8` (32px) with `px-3` padding (24px total),
leaving ~8px of content width. The glyph sits inside the Tooltip's
`inline-flex`, so its wrapper is a shrinkable flex item that collapses
to that 8px. Since Tailwind Preflight sets `img { max-width: 100% }`,
the 20px avatar's width shrinks to ~8px while `size-5` keeps its height
at 20px — producing the squished oval.

## Fix

Wrap the glyph in `inline-flex shrink-0` so it keeps its 20px intrinsic
width and the auto-layout column grows to fit instead of compressing the
image. This also covers the non-user principal icon glyphs
(agent/system/slack/webhook/worker).

Typecheck passes.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-authored-by: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 apps/fabro-web/app/components/runs-list/run-table-row.tsx | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/apps/fabro-web/app/components/runs-list/run-table-row.tsx b/apps/fabro-web/app/components/runs-list/run-table-row.tsx
index e367e1e6f..850c36467 100644
--- a/apps/fabro-web/app/components/runs-list/run-table-row.tsx
+++ b/apps/fabro-web/app/components/runs-list/run-table-row.tsx
@@ -56,7 +56,9 @@ export function RunTableRow({
       {show("created_by") && (
         <td className="relative z-10 w-8 whitespace-nowrap px-3 py-2.5">
           <Tooltip label={creator.label}>
-            <span aria-label={`Created by ${creator.label}`}>{creator.glyph}</span>
+            <span className="inline-flex shrink-0" aria-label={`Created by ${creator.label}`}>
+              {creator.glyph}
+            </span>
           </Tooltip>
         </td>
       )}