From 84f21a08fd522264bdf49d33a97b677d62843700 Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Thu, 7 May 2026 10:09:57 +0000
Subject: [PATCH] Fix: size board text relative to its row, not the whole stack
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Previous fix sized text to 22% of the Stack's height, which works for
3 lines but overflows once you have 4+ — each row is only 1/N of the
stack, so 22cqh is bigger than the row whenever N > ~4. Caps and
descenders bled into neighboring rows.

Move container-type: size from Stack to Row and size font in cqh of
the row. 70% of row height keeps Bebas Neue caps + descenders inside
their row regardless of line count, while still filling the row at
the typical 1-3 line case.

https://claude.ai/code/session_011pGzV6osudSkwYLZ93A74R
---
 web/src/components/Board.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/web/src/components/Board.tsx b/web/src/components/Board.tsx
index 3b0f33c..c345683 100644
--- a/web/src/components/Board.tsx
+++ b/web/src/components/Board.tsx
@@ -20,7 +20,6 @@ const Stack = styled.div<{ $bg: string }>`
   flex-direction: column;
   background: ${(p) => p.$bg};
   overflow: hidden;
-  container-type: size;
 `;
 
 const Row = styled.div<{ $bg: string; $first: boolean }>`
@@ -32,6 +31,7 @@ const Row = styled.div<{ $bg: string; $first: boolean }>`
   justify-content: center;
   background: ${(p) => p.$bg};
   position: relative;
+  container-type: size;
 
   ${(p) => !p.$first && `
     &::before {
@@ -49,7 +49,7 @@ const Row = styled.div<{ $bg: string; $first: boolean }>`
 
 const Text = styled.span`
   color: #121212;
-  font-size: clamp(1rem, 22cqh, 28rem);
+  font-size: clamp(1rem, 70cqh, 28rem);
   line-height: 1;
   padding: 0 4cqw;
   text-align: center;