From 220ee5aeb7fc913cd77333a15bb12c63db45f377 Mon Sep 17 00:00:00 2001
From: Marco <marco.kunitz@googlemail.com>
Date: Tue, 30 Jun 2026 21:41:33 +0000
Subject: [PATCH] fix(About): flex-[1_0_0] on both columns for exact 50/50
 split
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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>
---
 app/components/About.tsx | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/app/components/About.tsx b/app/components/About.tsx
index 7b6c422..a2c1ca6 100644
--- a/app/components/About.tsx
+++ b/app/components/About.tsx
@@ -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"