fix(About): flex-[1_0_0] on both columns for exact 50/50 split
flex-1 (shrink:1) let the text column grow past 50% by shrinking the image. flex-[1_0_0] (shrink:0) matches Figma's flex:1 0 0 so neither column can shrink — both are exactly half the section width. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
@@ -2,8 +2,8 @@ export function About() {
|
||||
return (
|
||||
<section id="ueber-bjoern" className="bg-[#111] flex items-stretch w-full">
|
||||
|
||||
{/* Left: text content */}
|
||||
<div className="flex-1 flex flex-col gap-4 justify-center px-[5rem] py-8 min-w-0">
|
||||
{/* Left: text content — flex-[1_0_0] = flex: 1 0 0, no shrink, exactly 50% */}
|
||||
<div className="flex-[1_0_0] flex flex-col gap-4 justify-center px-[5rem] py-8 min-w-0">
|
||||
|
||||
{/* Large serif statement — width-constrained as per design */}
|
||||
<p
|
||||
@@ -57,8 +57,8 @@ export function About() {
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Right: author photo fills full column height */}
|
||||
<div className="flex-1 relative overflow-hidden" style={{ minHeight: "14rem" }}>
|
||||
{/* Right: author photo — flex-[1_0_0] keeps it at exactly 50% */}
|
||||
<div className="flex-[1_0_0] relative overflow-hidden" style={{ minHeight: "14rem" }}>
|
||||
<img
|
||||
alt="Björn"
|
||||
src="/about-author.jpg"
|
||||
|
||||
Reference in New Issue
Block a user