From 62ff067bb956b17a9b3569eadc2a32abd24c27b8 Mon Sep 17 00:00:00 2001
From: Thomas Hallock <thomas@evolutioniq.com>
Date: Tue, 21 Oct 2025 09:32:14 -0500
Subject: [PATCH] fix(homepage): adjust responsive breakpoints to prevent skill
 card clipping
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Changed layout breakpoints from md (768px) to xl (1280px) to ensure:
- Skills section doesn't get clipped at medium viewport sizes
- Layout only switches to side-by-side when there's sufficient space
- Container min-width is responsive (100% below xl, 1400px at xl+)

This prevents the issue where content was overflowing at intermediate
viewport widths.

🤖 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, 5 insertions(+), 5 deletions(-)

diff --git a/apps/web/src/app/page.tsx b/apps/web/src/app/page.tsx
index 0a8231a2..b82e946f 100644
--- a/apps/web/src/app/page.tsx
+++ b/apps/web/src/app/page.tsx
@@ -149,24 +149,24 @@ export default function HomePage() {
                 border: '1px solid',
                 borderColor: 'gray.700',
                 shadow: 'lg',
-                minW: '1400px',
+                minW: { base: '100%', xl: '1400px' },
                 mx: 'auto',
               })}
             >
               <div
                 className={css({
                   display: 'flex',
-                  flexDirection: { base: 'column', md: 'row' },
+                  flexDirection: { base: 'column', xl: 'row' },
                   gap: '8',
-                  alignItems: { base: 'center', md: 'flex-start' },
+                  alignItems: { base: 'center', xl: 'flex-start' },
                 })}
               >
                 {/* Tutorial on the left */}
                 <div
                   className={css({
                     flex: '1',
-                    minW: { base: '100%', md: '500px' },
-                    maxW: { base: '100%', md: '500px' },
+                    minW: { base: '100%', xl: '500px' },
+                    maxW: { base: '100%', xl: '500px' },
                   })}
                 >
                   <TutorialPlayer