From a2d030e97afbdaada5311332fb144851cd2c6ed5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Rapha=C3=ABl=20Bosi?=
 <71827178+bosiraphael@users.noreply.github.com>
Date: Thu, 18 Jun 2026 15:05:31 +0200
Subject: [PATCH] Fix flaky Argos diffs (#21771)

Inputs and selects with a trailing icon (copy button, chevron, etc.)
were flaky in Argos: the icon would intermittently flag as appearing
twice.

The icon's x-position depends on font-rendered content width, and under
Argos's `fit-content` capture the whole row is content-sized. Inter is
loaded from the Google Fonts CDN with `display=swap`, and Argos's font
gate (`document.fonts.status === "loaded"`) doesn't reliably catch the
late swap, so the snapshot sometimes lands pre-swap and sometimes
post-swap. The diff then paints both the old and new icon positions,
which reads as a duplicated icon.

This adds a Storybook loader that force-loads the Inter weights and
awaits `document.fonts.ready` before each story renders, so screenshots
are always taken post-swap. Fixes the whole class at once rather than
per component.

Note: affected trailing-icon stories will need a one-time Argos
re-baseline.

<!-- This is an auto-generated description by cubic. -->
<a
href="https://cubic.dev/pr/twentyhq/twenty/pull/21771?utm_source=github"
target="_blank" rel="noopener noreferrer"
data-no-image-dialog="true"><picture><source
media="(prefers-color-scheme: dark)"
srcset="https://www.cubic.dev/buttons/review-in-cubic-dark.svg"><source
media="(prefers-color-scheme: light)"
srcset="https://www.cubic.dev/buttons/review-in-cubic-light.svg"><img
alt="Review in cubic"
src="https://www.cubic.dev/buttons/review-in-cubic-dark.svg"></picture></a>
<!-- End of auto-generated description by cubic. -->
---
 packages/twenty-front/.storybook/preview.tsx | 13 ++++++++++++-
 1 file changed, 12 insertions(+), 1 deletion(-)

diff --git a/packages/twenty-front/.storybook/preview.tsx b/packages/twenty-front/.storybook/preview.tsx
index c7a39d2dae..0130f45a07 100644
--- a/packages/twenty-front/.storybook/preview.tsx
+++ b/packages/twenty-front/.storybook/preview.tsx
@@ -98,6 +98,17 @@ const STORYBOOK_DEFAULT_USER_CONTEXT = {
   timeZone: 'UTC',
 };
 
+const INTER_FONT_WEIGHTS = ['400', '500', '600'];
+
+const waitForInterFontLoadedBeforeScreenshot = async () => {
+  await Promise.all(
+    INTER_FONT_WEIGHTS.map((weight) =>
+      document.fonts.load(`${weight} 1em Inter`),
+    ),
+  );
+  await document.fonts.ready;
+};
+
 const preview: Preview = {
   decorators: [
     (Story) => {
@@ -124,7 +135,7 @@ const preview: Preview = {
     resetJotaiStore();
   },
 
-  loaders: [mswLoader],
+  loaders: [mswLoader, waitForInterFontLoadedBeforeScreenshot],
 
   parameters: {
     controls: {