From c3a6c84d8a7e0b31d66ac2ee0d67bf04e6fdd0d7 Mon Sep 17 00:00:00 2001
From: Marco <marco.kunitz@googlemail.com>
Date: Wed, 29 Jul 2026 11:02:29 +0000
Subject: [PATCH] Give About's photo more room at Tablet, not the text column
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The wider text share at sm: didn't actually help the inner quote/bio
row go inline (it stays stacked until lg: regardless) — it just took
space away from the photo, which read as too narrow/cramped on Tablet.
1:1.4 text:image ratio now applies from sm: up; only the -ml-48 overlap
itself stays gated to lg:, since that trick needs more absolute room.
---
 app/components/About.tsx | 37 +++++++++++++++++--------------------
 1 file changed, 17 insertions(+), 20 deletions(-)

diff --git a/app/components/About.tsx b/app/components/About.tsx
index 33e3879..07c1d7f 100644
--- a/app/components/About.tsx
+++ b/app/components/About.tsx
@@ -8,18 +8,15 @@ export function About() {
       {/* Text content — relative + z-10 so it renders above the overlapping
           photo at lg+. Comes first in DOM at every breakpoint (no reorder
           here — unlike Hero, there's no conversion CTA at stake).
-          sm:flex-[1.4_0_0] lg:flex-[1_0_0] — at Tablet the text column
-          gets the wider 1.4:1 share (moved down from the old md:, not
-          collapsed away as a first pass here tried): this isn't just
-          compensation for the grid arriving before the fluid floor had
-          room, it's also what the *inner* quote/divider/bio row (still
-          lg:-only, see below) and the photo's own -ml-48 overlap actually
-          need — collapsing straight to the 1:1.4 Desktop ratio at sm:
-          left the text column too narrow and the photo overlapping too
-          aggressively at real Tablet widths (reported 2026-07-29).
-          Reverts to the real ratio from lg: up, where the overlap trick
-          needs the image to have more room. */}
-      <Reveal className="flex flex-col gap-4 justify-center px-[var(--layout-padding-x)] py-8 sm:flex-[1.4_0_0] lg:flex-[1_0_0] min-w-0 relative z-10">
+          The 1:1.4 text:image ratio (text gets the narrower share) applies
+          from sm: up unchanged — the photo needs the room, the text
+          column doesn't need to be wide (the inner quote/bio row stays
+          stacked at Tablet regardless, see below, so a wider text column
+          doesn't even help it go inline; it just steals space the photo
+          should have — reported 2026-07-29). Only the -ml-48 overlap
+          itself (see the photo below) is gated to lg:, since that trick
+          needs more absolute room than Tablet has to not look cramped. */}
+      <Reveal className="flex flex-col gap-4 justify-center px-[var(--layout-padding-x)] py-8 sm:flex-[1_0_0] min-w-0 relative z-10">
 
         {/* Large serif statement — width-constrained as per design */}
         <p
@@ -86,14 +83,14 @@ export function About() {
         </div>
       </Reveal>
 
-      {/* Author photo — plain side-by-side (no overlap) at Tablet, sharing
-          the narrower 1:1.4 flex-basis with the text column above;
-          overlaps the text column via -ml-48 only from lg+, where the
-          text column has reverted to its narrower share and there's real
-          room for the photo to bleed under it. Plain full-width photo
-          below the text on true Mobile. */}
+      {/* Author photo — gets the wider 1.4 share from sm: up already (see
+          the text column's own comment above); plain, no overlap at
+          Tablet. Overlaps the text column via -ml-48 only from lg+, where
+          there's real absolute room for the photo to bleed under it
+          without looking cramped. Plain full-width photo below the text
+          on true Mobile. */}
       <Reveal
-        className="relative overflow-hidden w-full sm:flex-[1_0_0] lg:flex-[1.4_0_0] lg:-ml-48"
+        className="relative overflow-hidden w-full sm:flex-[1.4_0_0] lg:-ml-48"
         style={{ minHeight: "14rem" }}
         delay={0.15}
       >
@@ -101,7 +98,7 @@ export function About() {
           alt="Björn"
           src="/about-author.jpg"
           fill
-          sizes="(min-width: 1024px) 58vw, (min-width: 640px) 42vw, 100vw"
+          sizes="(min-width: 640px) 58vw, 100vw"
           className="object-cover object-center pointer-events-none"
         />
         {/* Left gradient: wide enough to cover the text-column overlap — lg+ only, matching the overlap itself */}