From a6ac55b7b161e0dd33a4dd5acc0df647b2a513aa Mon Sep 17 00:00:00 2001
From: Thomas Hallock <thomas@evolutioniq.com>
Date: Mon, 20 Oct 2025 21:20:43 -0500
Subject: [PATCH] fix(homepage): prevent text overflow in skill cards
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Fixed text being cut off on the right side of skill cards by:
- Adding minWidth: '0' to text container to enable proper flex shrinking
- Adding flexWrap: 'wrap' to title/badge row for better wrapping behavior

This fixes the flexbox issue where text was overflowing the card boundaries.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
---
 apps/web/src/app/page.tsx | 10 ++++++++--
 1 file changed, 8 insertions(+), 2 deletions(-)

diff --git a/apps/web/src/app/page.tsx b/apps/web/src/app/page.tsx
index 179a58cc..9e981419 100644
--- a/apps/web/src/app/page.tsx
+++ b/apps/web/src/app/page.tsx
@@ -288,8 +288,14 @@ export default function HomePage() {
                               >
                                 <MiniAbacus values={skill.values} columns={skill.columns} />
                               </div>
-                              <div className={stack({ gap: '2', flex: '1' })}>
-                                <div className={hstack({ gap: '2', alignItems: 'center' })}>
+                              <div className={stack({ gap: '2', flex: '1', minWidth: '0' })}>
+                                <div
+                                  className={hstack({
+                                    gap: '2',
+                                    alignItems: 'center',
+                                    flexWrap: 'wrap',
+                                  })}
+                                >
                                   <div
                                     className={css({
                                       color: 'white',