Marco/einfach-produktiv
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Give About's photo more room at Tablet, not the text column

Browse Source 
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.
This commit is contained in:
Marco
2026-07-29 11:02:29 +00:00
parent 932cf60c5c
commit c3a6c84d8a
1 changed files with 17 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/components/About.tsx
+17 -20
View File
@@ -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 */}