Clean up size chip rendering and tests

apps/fabro-web/app/components/runs-list/run-table-row.tsx

@@ -115,11 +115,9 @@ export function RunTableRow({
         </td>
       )}
       {show("size") && (
-        <td className="whitespace-nowrap px-3 py-2.5 text-center">
+        <td className="relative z-10 px-3 py-2.5 text-center whitespace-nowrap">
           {run.size != null && (
-            <span className="relative z-10 inline-flex">
-              <SizeChip size={run.size} totalUsdMicros={run.totalUsdMicros} />
-            </span>
+            <SizeChip size={run.size} totalUsdMicros={run.totalUsdMicros} />
           )}
         </td>
       )}

apps/fabro-web/app/components/size-chip.test.tsx

@@ -1,25 +1,43 @@
-import { describe, expect, test } from "bun:test";
+import { afterEach, beforeEach, describe, expect, test } from "bun:test";
 import TestRenderer, { act } from "react-test-renderer";
 
+import { setupReactTestEnv } from "../lib/test-utils";
 import { SizeChip } from "./size-chip";
 import { Tooltip } from "./ui";
 
-function tooltipLabel(element: React.ReactElement): string {
+let teardownReactTestEnv: (() => void) | undefined;
+const mountedRenderers: TestRenderer.ReactTestRenderer[] = [];
+
+function render(element: React.ReactElement): TestRenderer.ReactTestRenderer {
   let renderer: TestRenderer.ReactTestRenderer | undefined;
   act(() => {
     renderer = TestRenderer.create(element);
   });
-  return renderer!.root.findByType(Tooltip).props.label as string;
+  mountedRenderers.push(renderer!);
+  return renderer!;
+}
+
+function tooltipLabel(element: React.ReactElement): string {
+  return render(element).root.findByType(Tooltip).props.label as string;
 }
 
 describe("SizeChip", () => {
-  test("renders the size letter", () => {
-    let renderer: TestRenderer.ReactTestRenderer | undefined;
-    act(() => {
-      renderer = TestRenderer.create(<SizeChip size="M" />);
-    });
+  beforeEach(() => {
+    teardownReactTestEnv = setupReactTestEnv();
+  });
 
-    expect(JSON.stringify(renderer!.toJSON())).toContain("M");
+  afterEach(() => {
+    act(() => {
+      for (const renderer of mountedRenderers.splice(0)) {
+        renderer.unmount();
+      }
+    });
+    teardownReactTestEnv?.();
+    teardownReactTestEnv = undefined;
+  });
+
+  test("renders the size letter", () => {
+    expect(JSON.stringify(render(<SizeChip size="M" />).toJSON())).toContain("M");
   });
 
   test("appends the cost to the tooltip", () => {

apps/fabro-web/app/components/size-chip.tsx

@@ -1,3 +1,4 @@
+import { memo } from "react";
 import type { RunSize } from "@qltysh/fabro-api-client";
 
 import { formatUsdMicros } from "../lib/format";
@@ -11,7 +12,7 @@ const SIZE_TONE: Record<RunSize, { className: string; note: string | null }> = {
   XL: { className: "bg-coral/15 text-coral",     note: "unhealthy" },
 };
 
-export function SizeChip({
+export const SizeChip = memo(function SizeChip({
   size,
   totalUsdMicros,
 }: {
@@ -30,4 +31,4 @@ export function SizeChip({
       </span>
     </Tooltip>
   );
-}
+});

apps/fabro-web/app/routes/runs.tsx

@@ -418,7 +418,7 @@ function PrCardFooter({ pr, actions }: { pr: RunItem; actions?: string[] }) {
         </div>
       )}
       {pr.size != null && (
-        <span className={`inline-flex ${hasActions ? "" : "ml-auto"}`}>
+        <span className={hasActions ? "inline-flex" : "ml-auto inline-flex"}>
           <SizeChip size={pr.size} totalUsdMicros={pr.totalUsdMicros} />
         </span>
       )}