From 34129f99dc87cfa66744a01cf7a35dafe38bb8e1 Mon Sep 17 00:00:00 2001
From: Jared Schoeny <jared@schoeny.com>
Date: Sat, 11 Jul 2026 12:20:16 -0600
Subject: [PATCH] Fix up homepage layout issues on mobile

---
 src/app/page.tsx                         |  4 ++--
 src/components/Home/HeroPatchDiagram.tsx | 12 ++++++------
 2 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/src/app/page.tsx b/src/app/page.tsx
index 00a43f2..0704d17 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -149,7 +149,7 @@ export default async function Home() {
     <div>
       <section className="relative overflow-hidden">
         <div className="absolute inset-0 bg-grid opacity-30 pointer-events-none" />
-        <div className="mx-auto max-w-screen-2xl px-6 py-12 sm:py-20">
+        <div className="mx-auto max-w-screen-2xl px-6 pt-12 pb-8 sm:py-20">
           <div className="grid items-center gap-10 lg:grid-cols-[minmax(0,1fr)_minmax(0,34rem)] xl:grid-cols-[minmax(0,1fr)_minmax(0,42rem)]">
             <div>
               <MilestoneCelebration />
@@ -222,7 +222,7 @@ export default async function Home() {
             </p>
           </div>
         </div>
-        <div className="my-6 mx-auto flex flex-col items-center max-w-[320px] sm:mt-10">
+        <div className="mt-12 mb-4 mx-auto flex flex-col items-center max-w-[320px] sm:mt-16">
           <Link href="/faq" className="inline-flex items-center rounded-full elevate border border-black/10 bg-black/5 dark:border-white/10 dark:bg-white/5 px-4 py-1.5 text-sm text-foreground hover:bg-black/10 dark:hover:bg-white/10">
             <span className="font-medium">New to Hackdex?</span>
             <span className="ml-1 underline underline-offset-2">Read the FAQ</span>
diff --git a/src/components/Home/HeroPatchDiagram.tsx b/src/components/Home/HeroPatchDiagram.tsx
index 4342de0..9157f18 100644
--- a/src/components/Home/HeroPatchDiagram.tsx
+++ b/src/components/Home/HeroPatchDiagram.tsx
@@ -33,8 +33,8 @@ export default function HeroPatchDiagram() {
   const slots: (Pick | null)[] = picks.length === 3 ? picks : [null, null, null];
 
   return (
-    <div className="relative mx-auto w-full max-w-full" aria-hidden="true">
-      <div className="flex w-full flex-col items-center gap-0">
+    <div className="relative mx-auto w-full min-w-0 max-w-full mt-6 sm:mt-0" aria-hidden="true">
+      <div className="flex w-full min-w-0 flex-col items-center gap-0">
         {/* Base ROM card */}
         <div className="card relative z-10 w-full max-w-64 p-3">
           <div className="flex items-center gap-3">
@@ -52,7 +52,7 @@ export default function HeroPatchDiagram() {
         </div>
 
         {/* Connectors + cards share one shrink-wrapped width so they stay centered together */}
-        <div className="flex w-full max-w-md flex-col items-center md:w-fit md:max-w-none">
+        <div className="flex w-full min-w-0 max-w-md flex-col items-center md:w-fit md:max-w-none">
           <div className="relative h-14 w-full sm:h-[4.75rem]">
             <svg
               className="absolute inset-0 h-full w-full overflow-visible"
@@ -85,12 +85,12 @@ export default function HeroPatchDiagram() {
             </svg>
           </div>
 
-          <div className="relative z-10 flex w-full items-start gap-2 sm:gap-3 xl:gap-4">
+          <div className="relative z-10 flex w-full min-w-0 items-start gap-1.5 sm:gap-3 xl:gap-4">
             {slots.map((hack, index) => (
               <div
                 key={index}
                 data-ready={hack ? "true" : "false"}
-                className={`hero-hack-card card anim-float min-w-0 flex-1 p-2 sm:p-2.5 md:w-32 md:flex-none lg:w-36 xl:w-40 ${index === 1 ? "mt-3 sm:mt-5" : ""}`}
+                className={`hero-hack-card card anim-float min-w-0 flex-1 basis-0 p-1.5 sm:p-2.5 md:w-32 md:flex-none md:basis-auto lg:w-36 xl:w-40 ${index === 1 ? "mt-3 sm:mt-5" : ""}`}
                 style={{ animationDelay: hack?.delay ?? `${index * 0.6}s` }}
               >
                 <div className="relative aspect-[3/2] w-full overflow-hidden rounded-md bg-[var(--surface-2)]">
@@ -105,7 +105,7 @@ export default function HeroPatchDiagram() {
                     />
                   )}
                 </div>
-                <div data-ready={hack ? "true" : "false"} className="mt-1.5 truncate text-[11px] font-medium tracking-tight text-foreground/85 sm:mt-2 sm:text-xs opacity-0 data-[ready=true]:opacity-100 transition-opacity duration-500">
+                <div data-ready={hack ? "true" : "false"} className="mt-1.5 min-w-0 truncate text-[11px] font-medium tracking-tight text-foreground/85 sm:mt-2 sm:text-xs opacity-0 data-[ready=true]:opacity-100 transition-opacity duration-500">
                   {hack?.title ?? "\u00A0" /* non-breaking space */}
                 </div>
               </div>