diff --git a/app/components/NewsletterModal.tsx b/app/components/NewsletterModal.tsx index a4bbd1d..32fddee 100644 --- a/app/components/NewsletterModal.tsx +++ b/app/components/NewsletterModal.tsx @@ -156,12 +156,23 @@ export function NewsletterModal({ open, onClose }: { open: boolean; onClose: () // takes over once the 2-column split itself starts at lg:. className="relative bg-bg-base rounded-md overflow-hidden w-full max-w-[36rem] lg:max-w-[75rem] max-h-[90vh] overflow-y-auto" > + {/* sticky, not absolute — the dialog itself is the scrolling + container (overflow-y-auto above), so an absolute-positioned + child scrolls away with the rest of the content instead of + staying pinned to the visible top-right corner (reported + 2026-07-29). sticky top-6 keeps it fixed to the scrolled + viewport's top edge; ml-auto pushes it to the right within + the dialog's normal block flow (sticky positioning doesn't + use right-* the way absolute does); -mb-6 cancels its own + height (size-6 = 1.5rem) so it doesn't push the modal-top + content below it down — same visual overlap as the old + absolute positioning, just still visible after scrolling. */} diff --git a/app/components/TrustRow.tsx b/app/components/TrustRow.tsx index a654a2a..03f968a 100644 --- a/app/components/TrustRow.tsx +++ b/app/components/TrustRow.tsx @@ -11,48 +11,32 @@ export async function TrustRow() { if (items.length === 0) return null; return ( - // 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. - // - // Outer wrapper only positions the *whole badge group* (center below - // sm:, left-aligned sm:-lg:, centered row again at lg:) — it does NOT - // align each badge individually. A first attempt put items-center - // directly on this container with each badge as a sibling; since - // flex's align-items centers each item within the container's own - // width independently, badges with different title/description - // lengths ended up with different left edges (not lining up with - // each other — reported 2026-07-29, exactly the "sonst sieht es - // schief aus" risk). Fixed by wrapping all badges in one inner - // group (below) that's always internally left-aligned to itself, - // then centering/left-aligning that single group as a unit here. -
- {/* Inner group — shrink-to-fit width (not w-full), so it's exactly - as wide as its widest badge; items-start keeps every badge's - left edge flush with every other badge's, regardless of each - one's own content width. This single group is what the outer - wrapper above centers/left-aligns as one block. */} -
- {items.map((item, i) => ( -
- {i > 0 &&
} -
-
- -
-
-

{item.title}

-

{item.description}

-
+ // flex-wrap + justify-center instead of a hard sm:/lg: structural + // breakpoint — CSS flexbox centers each *wrapped line* independently, + // so badges naturally flow as many-per-row as actually fit at the + // current width (1 per row on a narrow phone, 2 with the 3rd + // centered below it once there's room, all 3 in one row at Desktop + // widths) with no breakpoint math and no overflow risk, since an + // item that doesn't fit just wraps instead of forcing a scrollbar + // (this used to be a hard lg: exception for exactly that overflow + // reason — see git history — no longer needed with wrap). Divider + // bars between badges stay lg:-only for simplicity, since which + // badges share a line isn't fixed/known ahead of time below lg:. +
+ {items.map((item, i) => ( +
+ {i > 0 &&
} +
+
+ +
+
+

{item.title}

+

{item.description}

- ))} -
+
+ ))}
); }