From a9c834447200cd77b45f0afaa3a9637da640bfe1 Mon Sep 17 00:00:00 2001
From: Marco <marco.kunitz@googlemail.com>
Date: Wed, 29 Jul 2026 11:24:38 +0000
Subject: [PATCH] Add a soft edge fade to About's photo at Tablet too

The left gradient was gated to lg: (matching the -ml-48 overlap), but
without any overlap at Tablet the photo sits flush against the dark
text column with a hard vertical seam. Narrower fade (w-16) from sm:
up softens that seam; widens to w-72 at lg: to also cover the deeper
overlap once that kicks in.
---
 app/components/About.tsx | 9 +++++++--
 1 file changed, 7 insertions(+), 2 deletions(-)

diff --git a/app/components/About.tsx b/app/components/About.tsx
index 07c1d7f..e61b0fd 100644
--- a/app/components/About.tsx
+++ b/app/components/About.tsx
@@ -101,8 +101,13 @@ export function About() {
           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 */}
-        <div className="hidden lg:block absolute inset-y-0 left-0 w-72 bg-gradient-to-r from-bg-dark to-transparent pointer-events-none" />
+        {/* Left gradient — from sm: up, not just lg:. Even without the
+            -ml-48 overlap at Tablet, the photo sits directly against the
+            dark text column with no transition, reading as a hard vertical
+            seam (reported 2026-07-29). A narrower fade (w-16) softens just
+            that seam at Tablet; widens to w-72 at lg: to also cover the
+            deeper -ml-48 overlap once that kicks in. */}
+        <div className="hidden sm:block absolute inset-y-0 left-0 w-16 lg:w-72 bg-gradient-to-r from-bg-dark to-transparent pointer-events-none" />
       </Reveal>
 
     </section>