From 02fa2855852758c0d3a214db0f8cdaa5b3191c6d Mon Sep 17 00:00:00 2001
From: Chris Parsons <438676+chrisparsons83@users.noreply.github.com>
Date: Sun, 10 May 2026 19:51:34 -0700
Subject: [PATCH] Fix mobile spacing for draft board and dashboard layout (#13,
 #329) (#404)

Reduce double-stacked padding on draft board page from 64px to 32px on
mobile by using responsive p-2/px-2 md:p-4/md:px-4 classes.

Replace dashboard CSS grid with flex layout so My Leagues and Create
League stack naturally at the top without being stretched apart by the
row-span-2 events column. Mobile order preserved: My Leagues, Events,
Create League.
---
 app/components/DraftGrid.tsx                  |  2 +-
 app/routes/home.tsx                           | 25 ++++++++++---------
 .../$leagueId.draft-board.$seasonId.tsx       |  2 +-
 3 files changed, 15 insertions(+), 14 deletions(-)

diff --git a/app/components/DraftGrid.tsx b/app/components/DraftGrid.tsx
index 0dfc599..a9b595f 100644
--- a/app/components/DraftGrid.tsx
+++ b/app/components/DraftGrid.tsx
@@ -65,7 +65,7 @@ export function DraftGrid({
   const totalTeams = draftSlots.length;
 
   return (
-    <div className="p-4">
+    <div className="p-2 md:p-4">
       {title && <h2 className="text-xl font-semibold mb-4">{title}</h2>}
       <div className="w-full overflow-x-auto">
         <div className="min-w-max">
diff --git a/app/routes/home.tsx b/app/routes/home.tsx
index 27ed9ca..4bade20 100644
--- a/app/routes/home.tsx
+++ b/app/routes/home.tsx
@@ -215,17 +215,23 @@ export default function Home({ loaderData }: Route.ComponentProps) {
   return (
     <div className="container mx-auto py-8 px-4">
       {/*
-        lg+: 3-col grid, left column (My Leagues + Create) spans 2, right (Events) spans 1.
+        lg+: flex row, left column (My Leagues + Create) takes 2/3, right (Events) takes 1/3.
         mobile/tablet: single column stacked in order: My Leagues, Upcoming Events, Create League.
       */}
-      <div className="grid grid-cols-1 gap-6 lg:grid-cols-3">
-        {/* My Leagues — order 1 on mobile, col-span-2 on desktop */}
-        <div className="order-1 lg:col-span-2">
+      <div className="flex flex-col gap-6 lg:flex-row">
+        <div className="flex flex-col gap-6 lg:w-2/3">
           <MyLeaguesCard leagues={leagueRows} />
+          <div className="lg:hidden">
+            <UpcomingEventsCard
+              events={upcomingCalendarEvents}
+              limit={8}
+              viewAllUrl="/upcoming-events"
+              showLeagueAvatar={leagueRows.length > 1}
+            />
+          </div>
+          <CreateLeagueCard />
         </div>
-
-        {/* Upcoming Events — order 2 on mobile, right column on desktop spanning both rows */}
-        <div className="order-2 lg:col-span-1 lg:row-span-2">
+        <div className="hidden lg:block lg:w-1/3">
           <UpcomingEventsCard
             events={upcomingCalendarEvents}
             limit={8}
@@ -233,11 +239,6 @@ export default function Home({ loaderData }: Route.ComponentProps) {
             showLeagueAvatar={leagueRows.length > 1}
           />
         </div>
-
-        {/* Create a League — order 3 on mobile, below My Leagues on desktop */}
-        <div className="order-3 lg:col-span-2">
-          <CreateLeagueCard />
-        </div>
       </div>
     </div>
   );
diff --git a/app/routes/leagues/$leagueId.draft-board.$seasonId.tsx b/app/routes/leagues/$leagueId.draft-board.$seasonId.tsx
index 8cc1c89..d1ed2ff 100644
--- a/app/routes/leagues/$leagueId.draft-board.$seasonId.tsx
+++ b/app/routes/leagues/$leagueId.draft-board.$seasonId.tsx
@@ -260,7 +260,7 @@ export default function DraftBoard() {
       </div>
 
       {/* Draft Grid */}
-      <div className="w-full px-4 py-4">
+      <div className="w-full py-4 px-2 md:px-4">
         <DraftGrid
           draftSlots={draftSlots}
           draftGrid={draftGrid}