From 1f3c4e2102b03b326969f4825ca66aef132b23f7 Mon Sep 17 00:00:00 2001
From: Fadhli Azhari <fadhli@kollect.biz>
Date: Wed, 29 Apr 2026 19:02:45 +0800
Subject: [PATCH] build: add fonts to exposed environment to the runner

---
 ci/frontend-builder/Dockerfile | 24 +++++++++++++++++++-----
 1 file changed, 19 insertions(+), 5 deletions(-)

diff --git a/ci/frontend-builder/Dockerfile b/ci/frontend-builder/Dockerfile
index f62cbd6..34dcf35 100644
--- a/ci/frontend-builder/Dockerfile
+++ b/ci/frontend-builder/Dockerfile
@@ -35,8 +35,18 @@ ARG PLAYWRIGHT_VERSION=1.59.1
 ENV PLAYWRIGHT_BROWSERS_PATH=/ms-playwright
 
 # ─────────────────────────────────────────────────────────────────────
-# System dependencies (Playwright chromium runtime libs included so the
-# browser launches without `playwright install --with-deps`)
+# System dependencies
+#
+# Three groups in one apt invocation (single layer is cheaper than three):
+#   1. Build/CI tooling (curl, git, jq, unzip, ca-certs)
+#   2. Playwright chromium runtime libs (so the browser launches without
+#      `playwright install --with-deps`)
+#   3. Fonts. Headless chromium has no fonts of its own — without these,
+#      every text glyph renders as a zero-width `.notdef` and Playwright's
+#      `toBeVisible()` reports DOM text as hidden. Liberation covers core
+#      Latin metrics-compatible with Arial/Times; Noto Core fills in the
+#      symbols and extended ranges Skeleton/Tailwind reach for. Don't drop
+#      these — E2E goes from "30 failed" to "all pass" with them present.
 # ─────────────────────────────────────────────────────────────────────
 RUN apt-get update && apt-get install -y --no-install-recommends \
         ca-certificates \
@@ -61,7 +71,8 @@ RUN apt-get update && apt-get install -y --no-install-recommends \
         fonts-liberation \
         fonts-noto-core \
         fontconfig \
-    && rm -rf /var/lib/apt/lists/*
+    && rm -rf /var/lib/apt/lists/* \
+    && fc-cache -f
 
 # ─────────────────────────────────────────────────────────────────────
 # pnpm via corepack (ships with Node.js)
@@ -114,11 +125,14 @@ RUN pnpm dlx "playwright@${PLAYWRIGHT_VERSION}" install chromium
 
 WORKDIR /workspace
 
-# Verify installation
+# Verify installation. Font count guards against silently shipping an image
+# without renderable glyphs — if this drops to 0 again, E2E breaks at
+# `toBeVisible()` even though the DOM is correct.
 RUN node --version \
     && pnpm --version \
     && buf --version \
     && protoc-gen-es --version \
     && oras version \
     && jq --version \
-    && ls "${PLAYWRIGHT_BROWSERS_PATH}"
+    && ls "${PLAYWRIGHT_BROWSERS_PATH}" \
+    && fonts=$(fc-list | wc -l) && echo "fonts: ${fonts}" && [ "${fonts}" -gt 0 ]