From 56fc8d970d1ece62d884e78cf48d09a4f26eed1d Mon Sep 17 00:00:00 2001
From: Marco <marco.kunitz@googlemail.com>
Date: Wed, 29 Jul 2026 12:09:44 +0000
Subject: [PATCH] Revert TrustRow's breakpoint from sm: to lg:, center stacked
 badges

Same fixed-content-doesn't-fit bug as Footer's legal-links row,
confirmed via live-site horizontal-overflow measurement: ~100px
overflow at 666px viewport, ~54px at 768px. Multiple whitespace-nowrap
title+description badges don't fit in one row below ~1024px regardless
of fluid scaling. Also centers stacked badges (was items-start below
sm:, now items-center through the whole non-lg: range) per feedback.
---
 app/components/TrustRow.tsx | 14 +++++++++++---
 1 file changed, 11 insertions(+), 3 deletions(-)

diff --git a/app/components/TrustRow.tsx b/app/components/TrustRow.tsx
index c47821d..5a69123 100644
--- a/app/components/TrustRow.tsx
+++ b/app/components/TrustRow.tsx
@@ -11,10 +11,18 @@ export async function TrustRow() {
   if (items.length === 0) return null;
 
   return (
-    <div className="w-full bg-bg-base flex flex-col sm:flex-row gap-6 sm:gap-12 items-start sm:items-center justify-center py-8 px-[var(--layout-padding-x)]">
+    // Structural breakpoint is lg:, not sm: — a deliberate exception to
+    // the site's sm: (640px) structural consolidation, same category as
+    // Footer's legal-links row (see that component's own comment):
+    // multiple whitespace-nowrap title+description badges side by side
+    // don't fit in one row below ~1024px regardless of fluid scaling.
+    // Confirmed via a real horizontal-overflow measurement against the
+    // live site (2026-07-29): scrollWidth exceeded the viewport by
+    // ~100px at 666px and ~54px at 768px before this fix.
+    <div className="w-full bg-bg-base flex flex-col lg:flex-row gap-6 lg:gap-12 items-center justify-center py-8 px-[var(--layout-padding-x)]">
       {items.map((item, i) => (
-        <div key={item.id} className="flex items-center gap-6 sm:gap-12">
-          {i > 0 && <div className="hidden sm:block h-10 w-px bg-border" />}
+        <div key={item.id} className="flex items-center gap-6 lg:gap-12">
+          {i > 0 && <div className="hidden lg:block h-10 w-px bg-border" />}
           <div className="flex gap-4 items-center">
             <div className="relative size-8 shrink-0">
               <Image alt="" src={item.icon} fill sizes="32px" className="object-contain" />