From 4547a7a4e7c15fe87880ddb55c4cd5d86e69f70c Mon Sep 17 00:00:00 2001
From: Chris Parsons <438676+chrisparsons83@users.noreply.github.com>
Date: Fri, 27 Feb 2026 23:12:21 -0800
Subject: [PATCH] refactor: default draft room to board tab and clean up tab
 section (#43)

- Change default desktop tab from "participants" to "board"
- Extract mobileTabs/mobileColCount before JSX to eliminate IIFE pattern
- Remove redundant h-full wrapper divs from TabsContent for consistency

Co-authored-by: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 .../leagues/$leagueId.draft.$seasonId.tsx     | 76 +++++++++----------
 1 file changed, 34 insertions(+), 42 deletions(-)

diff --git a/app/routes/leagues/$leagueId.draft.$seasonId.tsx b/app/routes/leagues/$leagueId.draft.$seasonId.tsx
index f911301..df163f3 100644
--- a/app/routes/leagues/$leagueId.draft.$seasonId.tsx
+++ b/app/routes/leagues/$leagueId.draft.$seasonId.tsx
@@ -332,7 +332,7 @@ export default function DraftRoom() {
     const stored = localStorage.getItem("draftSidebarCollapsed");
     return stored ? JSON.parse(stored) : false;
   });
-  const [activeTab, setActiveTab] = useState<"participants" | "board" | "teams">("participants");
+  const [activeTab, setActiveTab] = useState<"participants" | "board" | "teams">("board");
   const [mobileTab, setMobileTab] = useState<"available" | "queue" | "board" | "roster" | "controls">(
     !userTeam && isCommissioner ? "board" : "available"
   );
@@ -1209,6 +1209,11 @@ export default function DraftRoom() {
       }
     : null;
 
+  const mobileTabs = userTeam
+    ? [MOBILE_TABS_BASE[0], QUEUE_TAB, ...MOBILE_TABS_BASE.slice(1)]
+    : MOBILE_TABS_BASE;
+  const mobileColCount = mobileTabs.length;
+
   return (
     <div className="h-dvh bg-background flex flex-col overflow-hidden">
       {/* Draft Completion Banner */}
@@ -1463,9 +1468,7 @@ export default function DraftRoom() {
                 </div>
 
                 <TabsContent value="participants" className="flex-1 overflow-hidden m-0">
-                  <div className="h-full">
-                    <AvailableParticipantsSection {...availableParticipantsSectionProps} />
-                  </div>
+                  <AvailableParticipantsSection {...availableParticipantsSectionProps} />
                 </TabsContent>
 
                 <TabsContent value="board" className="flex-1 overflow-hidden m-0">
@@ -1473,9 +1476,7 @@ export default function DraftRoom() {
                 </TabsContent>
 
                 <TabsContent value="teams" className="flex-1 overflow-hidden m-0">
-                  <div className="h-full">
-                    <TeamsDraftedGrid {...teamsDraftedGridProps} />
-                  </div>
+                  <TeamsDraftedGrid {...teamsDraftedGridProps} />
                 </TabsContent>
               </Tabs>
             </div>
@@ -1484,41 +1485,32 @@ export default function DraftRoom() {
       </div>
 
       {/* Mobile Bottom Nav */}
-      {(() => {
-        // Build tabs dynamically: insert Queue tab after Available only when user has a team
-        const mobileTabs = userTeam
-          ? [MOBILE_TABS_BASE[0], QUEUE_TAB, ...MOBILE_TABS_BASE.slice(1)]
-          : MOBILE_TABS_BASE;
-        const colCount = mobileTabs.length;
-        return (
-          <nav className={`md:hidden flex-shrink-0 border-t bg-card grid`} style={{ gridTemplateColumns: `repeat(${colCount}, 1fr)` }}>
-            {mobileTabs.map((tab) => {
-              const showTurnIndicator =
-                (tab.id === "available" || tab.id === "queue") &&
-                isMyTurn &&
-                season.status === "draft" &&
-                !isDraftComplete;
-              return (
-                <button
-                  key={tab.id}
-                  onClick={() => setMobileTab(tab.id as typeof mobileTab)}
-                  className={`relative flex flex-col items-center justify-center py-2 gap-0.5 min-h-[56px] transition-colors ${
-                    mobileTab === tab.id ? "text-electric" : "text-muted-foreground"
-                  }`}
-                >
-                  <div className="relative">
-                    <tab.Icon className="h-5 w-5" />
-                    {showTurnIndicator && (
-                      <span className="absolute -top-1 -right-1 w-2 h-2 rounded-full bg-electric" />
-                    )}
-                  </div>
-                  <span className="text-[10px] font-medium">{tab.label}</span>
-                </button>
-              );
-            })}
-          </nav>
-        );
-      })()}
+      <nav className={`md:hidden flex-shrink-0 border-t bg-card grid`} style={{ gridTemplateColumns: `repeat(${mobileColCount}, 1fr)` }}>
+        {mobileTabs.map((tab) => {
+          const showTurnIndicator =
+            (tab.id === "available" || tab.id === "queue") &&
+            isMyTurn &&
+            season.status === "draft" &&
+            !isDraftComplete;
+          return (
+            <button
+              key={tab.id}
+              onClick={() => setMobileTab(tab.id as typeof mobileTab)}
+              className={`relative flex flex-col items-center justify-center py-2 gap-0.5 min-h-[56px] transition-colors ${
+                mobileTab === tab.id ? "text-electric" : "text-muted-foreground"
+              }`}
+            >
+              <div className="relative">
+                <tab.Icon className="h-5 w-5" />
+                {showTurnIndicator && (
+                  <span className="absolute -top-1 -right-1 w-2 h-2 rounded-full bg-electric" />
+                )}
+              </div>
+              <span className="text-[10px] font-medium">{tab.label}</span>
+            </button>
+          );
+        })}
+      </nav>
 
       {/* Force Manual Pick Dialog */}
       <Dialog