Update draft room UI.

app/components/AutodraftSettings.tsx

@@ -3,7 +3,6 @@ import { Check, Info, ChevronDown } from "lucide-react";
 import { toast } from "sonner";
 import { Label } from "~/components/ui/label";
 import { Popover, PopoverContent, PopoverTrigger } from "~/components/ui/popover";
-import { Button } from "~/components/ui/button";
 
 type AutodraftMode = "next_pick" | "while_on";
 

app/components/DraftGrid.tsx

@@ -6,6 +6,7 @@ import {
 } from "~/components/ui/context-menu";
 import { DraftPickCell, type CoronaState } from "~/components/draft/DraftPickCell";
 import { TeamAvatar } from "~/components/TeamAvatar";
+import type { SeasonStatus } from "~/models/season";
 
 interface DraftCell {
   pickNumber: number;
@@ -36,6 +37,8 @@ interface DraftGridProps {
   connectedTeams?: Set<string>;
   ownerMap?: Record<string, string>;
   coronaStates?: Record<string, CoronaState>;
+  seasonStatus?: SeasonStatus;
+  draftPaused?: boolean;
 }
 
 export function DraftGrid({
@@ -52,6 +55,8 @@ export function DraftGrid({
   connectedTeams = new Set(),
   ownerMap = {},
   coronaStates = {},
+  seasonStatus,
+  draftPaused,
 }: DraftGridProps) {
   const totalTeams = draftSlots.length;
 
@@ -61,30 +66,33 @@ export function DraftGrid({
       <div className="w-full overflow-x-auto">
         <div className="min-w-max">
         {/* Team Headers */}
-        <div className="flex gap-2 mb-2">
+        <div className="flex gap-1.5 mb-1.5">
           {draftSlots.map((slot) => {
             const teamTime = teamTimers?.[slot.team.id];
             const isAutodraft = autodraftStatus[slot.team.id] || false;
             const isConnected = connectedTeams.has(slot.team.id);
 
             return (
-              <div key={slot.id} className="flex-1 min-w-32 text-center">
+              <div key={slot.id} className="flex-1 min-w-20 text-center">
                 <div className="flex justify-center mb-1">
                   <TeamAvatar
                     teamId={slot.team.id}
                     teamName={ownerMap[slot.team.id] || slot.team.name}
                     logoUrl={slot.team.logoUrl}
-                    size="md"
+                    size="lg"
                   />
                 </div>
                 <div
-                  className={`font-semibold text-sm truncate px-2 ${!isConnected ? "italic text-muted-foreground" : ""}`}
+                  className={`font-semibold text-xs truncate px-1 flex items-center justify-center ${!isConnected ? "italic text-muted-foreground" : ""}`}
                 >
-                  {ownerMap[slot.team.id] || slot.team.name}
+                  {isAutodraft && (
+                    <span className="mr-1 inline-flex items-center justify-center h-4 w-4 text-[10px] font-bold text-white bg-black shrink-0">A</span>
+                  )}
+                  <span className="truncate">{ownerMap[slot.team.id] || slot.team.name}</span>
                 </div>
                 {teamTimers && formatTime && (
                   <div
-                    className={`text-xs font-mono ${
+                    className={`text-sm font-mono ${
                       teamTime === undefined
                         ? "text-muted-foreground"
                         : teamTime > 60
@@ -95,9 +103,6 @@ export function DraftGrid({
                     }`}
                   >
                     {formatTime(teamTime)}
-                    {isAutodraft && (
-                      <span className="ml-1 text-muted-foreground">(auto)</span>
-                    )}
                   </div>
                 )}
               </div>
@@ -106,7 +111,7 @@ export function DraftGrid({
         </div>
 
         {/* Draft Grid Rows */}
-        <div className="space-y-2.5">
+        <div className="space-y-1.5">
           {draftGrid.map((roundPicks, roundIndex) => {
             const round = roundIndex + 1;
             const isEvenRound = round % 2 === 0;
@@ -115,7 +120,7 @@ export function DraftGrid({
               : roundPicks;
 
             return (
-              <div key={round} className="flex gap-2">
+              <div key={round} className="flex gap-1.5">
                 {displayPicks.map((cell, index) => {
                   const actualIndex = isEvenRound
                     ? roundPicks.length - 1 - index
@@ -144,6 +149,8 @@ export function DraftGrid({
                       coronaState={
                         cell ? coronaStates[cell.participant.id] : undefined
                       }
+                      seasonStatus={seasonStatus}
+                      draftPaused={draftPaused}
                     />
                   );
 

app/components/__tests__/DraftGrid.test.tsx

@@ -67,16 +67,45 @@ describe('DraftGrid Component', () => {
   });
 
   describe('Current Pick Highlighting', () => {
-    it('should highlight current pick with "On Clock" text', () => {
+    it('should show "Up Next" when draft is pre_draft', () => {
       render(
         <DraftGrid
           draftSlots={mockDraftSlots}
           draftGrid={mockGrid}
           currentPick={2}
+          seasonStatus="pre_draft"
         />
       );
 
-      expect(screen.getByText('On Clock')).toBeInTheDocument();
+      expect(screen.getByText('Up Next')).toBeInTheDocument();
+    });
+
+    it('should show "Paused Draft" when draft is paused', () => {
+      render(
+        <DraftGrid
+          draftSlots={mockDraftSlots}
+          draftGrid={mockGrid}
+          currentPick={2}
+          seasonStatus="draft"
+          draftPaused={true}
+        />
+      );
+
+      expect(screen.getByText('Paused Draft')).toBeInTheDocument();
+    });
+
+    it('should show "On The Clock" when draft is active', () => {
+      render(
+        <DraftGrid
+          draftSlots={mockDraftSlots}
+          draftGrid={mockGrid}
+          currentPick={2}
+          seasonStatus="draft"
+          draftPaused={false}
+        />
+      );
+
+      expect(screen.getByText('On The Clock')).toBeInTheDocument();
     });
 
     it('should apply correct styling to current pick', () => {
@@ -85,12 +114,14 @@ describe('DraftGrid Component', () => {
           draftSlots={mockDraftSlots}
           draftGrid={mockGrid}
           currentPick={2}
+          seasonStatus="draft"
+          draftPaused={false}
         />
       );
 
-      const currentPickCell = screen.getByText('On Clock').closest('[class*="border-electric"]');
+      const currentPickCell = screen.getByText('On The Clock').closest('.border-transparent');
-      expect(currentPickCell).toHaveClass('border-electric');
+      expect(currentPickCell).toHaveClass('bg-muted/80');
-      expect(currentPickCell).toHaveClass('bg-electric/20');
+      expect(currentPickCell).toHaveClass('border-transparent');
     });
   });
 

app/components/draft/DraftGridSection.tsx

@@ -16,6 +16,7 @@ import { Button } from "~/components/ui/button";
 import { MoreVertical } from "lucide-react";
 import { formatClockTime, getTimerColorClass } from "~/lib/draft-timer";
 import { DraftPickCell } from "~/components/draft/DraftPickCell";
+import type { SeasonStatus } from "~/models/season";
 
 type MobileSheetData =
   | { type: "team"; teamId: string }
@@ -53,6 +54,8 @@ interface DraftGridSectionProps {
   autodraftStatus: Record<string, { isEnabled: boolean; mode: "next_pick" | "while_on"; queueOnly: boolean }>;
   connectedTeams: Set<string>;
   isCommissioner: boolean;
+  seasonStatus?: SeasonStatus;
+  draftPaused?: boolean;
   onAdjustTimeBankOpen?: (teamId: string) => void;
   onSetAutodraftOpen?: (teamId: string) => void;
   onForceAutopick: (pickNumber: number, teamId: string) => void;
@@ -70,6 +73,8 @@ export const DraftGridSection = memo(function DraftGridSection({
   autodraftStatus,
   connectedTeams,
   isCommissioner,
+  seasonStatus,
+  draftPaused,
   onAdjustTimeBankOpen,
   onSetAutodraftOpen,
   onForceAutopick,
@@ -91,9 +96,7 @@ export const DraftGridSection = memo(function DraftGridSection({
       <div className="flex-1 overflow-auto">
         <div className="inline-block min-w-full min-h-full">
           {/* Team Headers */}
-          <div className="flex gap-2 mb-2 sticky top-0 z-10 bg-background/95 backdrop-blur-sm py-1">
+          <div className="flex gap-1.5 mb-1.5 sticky top-0 z-10 bg-background/95 backdrop-blur-sm py-1">
-            {/* Spacer for round column — sticky so it covers the corner when scrolling both axes */}
-            <div className="w-8 flex-shrink-0 sticky left-0 z-[6] bg-background/95" />
             {draftSlots.map((slot) => {
               const teamTime = teamTimers[slot.team.id];
               const isAutodraft = autodraftStatus[slot.team.id]?.isEnabled || false;
@@ -106,11 +109,11 @@ export const DraftGridSection = memo(function DraftGridSection({
                       teamId={slot.team.id}
                       teamName={ownerMap[slot.team.id] || slot.team.name}
                       logoUrl={slot.team.logoUrl}
-                      size="sm"
+                      size="md"
                     />
                   </div>
                   <div
-                    className={`font-semibold text-sm truncate px-2 ${
+                    className={`font-semibold text-xs px-1 flex items-center justify-center ${
                       slot.team.id === currentTeamId
                         ? "text-electric font-bold"
                         : !isConnected
@@ -118,17 +121,15 @@ export const DraftGridSection = memo(function DraftGridSection({
                           : ""
                     }`}
                    >
-                    {ownerMap[slot.team.id] || slot.team.name}
+                    {isAutodraft && (
+                      <span className="mr-1 inline-flex items-center justify-center h-4 w-4 text-[10px] font-bold text-white bg-black shrink-0">A</span>
+                    )}
+                    <span className="truncate">{ownerMap[slot.team.id] || slot.team.name}</span>
                   </div>
                   <div
-                    className={`text-xs font-mono px-2 ${getTimerColorClass(teamTime)}`}
+                    className={`text-xs font-mono px-1 ${getTimerColorClass(teamTime)}`}
                   >
                     {formatClockTime(teamTime)}
-                    {isAutodraft && (
-                      <span className="ml-1 text-muted-foreground">
-                        (auto)
-                      </span>
-                    )}
                   </div>
                   {isCommissioner && (onAdjustTimeBankOpen || onSetAutodraftOpen) && (
                     <button
@@ -145,7 +146,7 @@ export const DraftGridSection = memo(function DraftGridSection({
                 return (
                   <ContextMenu key={slot.id}>
                     <ContextMenuTrigger asChild>
-                      <div className="flex-1 min-w-32 text-center cursor-context-menu">
+                      <div className="flex-1 min-w-20 text-center cursor-context-menu">
                         {headerInner}
                       </div>
                     </ContextMenuTrigger>
@@ -166,7 +167,7 @@ export const DraftGridSection = memo(function DraftGridSection({
               }
 
               return (
-                <div key={slot.id} className="flex-1 min-w-32 text-center">
+                <div key={slot.id} className="flex-1 min-w-20 text-center">
                   {headerInner}
                 </div>
               );
@@ -174,7 +175,7 @@ export const DraftGridSection = memo(function DraftGridSection({
           </div>
 
           {/* Draft Grid Rows */}
-          <div className="space-y-2.5">
+          <div className="space-y-1.5">
             {draftGrid.map((roundPicks, roundIndex) => {
               const round = roundIndex + 1;
               const isEvenRound = round % 2 === 0;
@@ -183,11 +184,7 @@ export const DraftGridSection = memo(function DraftGridSection({
                 : roundPicks;
 
               return (
-                <div key={round} className="flex gap-2 items-stretch">
+                <div key={round} className="flex gap-1.5 items-stretch">
-                  {/* Round label */}
-                  <div className="w-8 flex-shrink-0 sticky left-0 z-[5] bg-background/95 flex items-center justify-center">
-                    <span className="text-xs font-mono text-muted-foreground">R{round}</span>
-                  </div>
                   {displayPicks.map((cell) => {
                     const isCurrent = cell.pickNumber === currentPick;
                     const isPicked = !!cell.pick;
@@ -229,6 +226,8 @@ export const DraftGridSection = memo(function DraftGridSection({
                               state={cellState}
                               pick={pickData}
                               coronaState={pendingCorona}
+                              seasonStatus={seasonStatus}
+                              draftPaused={draftPaused}
                               className="cursor-context-menu"
                             >
                               {mobileButtons}
@@ -268,6 +267,8 @@ export const DraftGridSection = memo(function DraftGridSection({
                               state={cellState}
                               pick={pickData}
                               coronaState={pendingCorona}
+                              seasonStatus={seasonStatus}
+                              draftPaused={draftPaused}
                               className="cursor-context-menu"
                             >
                               {mobileButtons}
@@ -305,6 +306,8 @@ export const DraftGridSection = memo(function DraftGridSection({
                         state={cellState}
                         pick={pickData}
                         coronaState={pendingCorona}
+                        seasonStatus={seasonStatus}
+                        draftPaused={draftPaused}
                       >
                         {mobileButtons}
                       </DraftPickCell>

app/components/draft/DraftPickCell.tsx

@@ -1,5 +1,6 @@
 import { forwardRef, type CSSProperties, type ComponentPropsWithoutRef } from "react";
 import { cn } from "~/lib/utils";
+import type { SeasonStatus } from "~/models/season";
 
 export type CoronaState =
   | { type: "eliminated"; points: 0 }
@@ -24,6 +25,8 @@ type DraftPickCellProps = ComponentPropsWithoutRef<"div"> & {
   };
   corona?: CoronaVariant;
   coronaState?: CoronaState;
+  seasonStatus?: SeasonStatus;
+  draftPaused?: boolean;
 };
 
 const coronaClasses: Record<CoronaVariant, string> = {
@@ -57,6 +60,8 @@ function DraftPickCell({
   pick,
   corona = "gradient",
   coronaState,
+  seasonStatus,
+  draftPaused,
   className,
   children,
   ...rest
@@ -64,11 +69,18 @@ function DraftPickCell({
   const showCorona = state === "picked" || (state === "upcoming" && !!coronaState);
   const isCurrent = state === "current";
 
+  let currentLabel = "On The Clock";
+  if (seasonStatus === "pre_draft") {
+    currentLabel = "Up Next";
+  } else if (seasonStatus === "draft" && draftPaused) {
+    currentLabel = "Paused Draft";
+  }
+
   return (
     <div
       ref={ref}
       className={cn(
-        "relative flex-1 min-w-32 overflow-hidden",
+        "relative flex-1 min-w-20 overflow-hidden",
         className,
       )}
       {...rest}
@@ -90,7 +102,7 @@ function DraftPickCell({
       ) : null}
       <div
         className={cn(
-          "relative z-10 h-14 border-2 rounded-lg p-2 transition-all",
+          "relative z-10 h-14 border-2 rounded-lg p-1.5 transition-all",
           (showCorona || isCurrent) && "mr-1",
           isCurrent
             ? "bg-muted/80 border-transparent"
@@ -100,29 +112,29 @@ function DraftPickCell({
         )}
         title={`Overall Pick #${pickNumber}`}
       >
-        <div className={cn("flex", isCurrent ? "items-center justify-center h-full" : "gap-1 items-start")}>
+        <div className={cn("flex flex-col", isCurrent ? "items-center justify-center h-full" : "gap-0.5")}>
-          {state === "picked" && pick ? (
-            <div className="text-sm min-w-0 flex-1">
-              <div className="font-semibold truncate text-sm">{pick.participant.name}</div>
-              <div className="text-muted-foreground truncate text-xs">
-                {pick.sport.name}
-              </div>
-            </div>
-          ) : isCurrent ? (
-            <div className="text-sm font-bold text-white">On The Clock</div>
-          ) : null}
           {!isCurrent && (
-            <div className="flex flex-col items-end shrink-0">
+            <div className="flex items-center justify-between">
-              <div className="text-xs font-mono text-muted-foreground leading-5">
+              <div className="text-[10px] font-mono text-muted-foreground leading-3">
                 {round}.{String(pickInRound).padStart(2, "0")}
               </div>
               {coronaState && coronaState.type !== "pending" && (
-                <span className={`text-xs font-mono font-bold mt-0.5 ${coronaState.type === "eliminated" ? "text-coral-accent" : "text-emerald-400"}`}>
+                <span className={`text-[10px] font-mono font-bold ${coronaState.type === "eliminated" ? "text-coral-accent" : "text-emerald-400"}`}>
                   {coronaState.type === "scored" && "▲"}{coronaState.points}
                 </span>
               )}
             </div>
           )}
+          {state === "picked" && pick ? (
+            <>
+              <div className="font-semibold truncate text-xs leading-4">{pick.participant.name}</div>
+              <div className="text-muted-foreground truncate text-[10px] leading-3">
+                {pick.sport.name}
+              </div>
+            </>
+          ) : isCurrent ? (
+            <div className="text-sm font-bold text-white">{currentLabel}</div>
+          ) : null}
         </div>
         {children && <div className="absolute inset-0 pointer-events-none [&_*]:pointer-events-auto">{children}</div>}
       </div>

app/components/draft/MiniDraftGrid.tsx

@@ -1,5 +1,6 @@
 import { memo, useMemo } from "react";
 import { DraftPickCell } from "~/components/draft/DraftPickCell";
+import type { SeasonStatus } from "~/models/season";
 import {
   ContextMenu,
   ContextMenuContent,
@@ -36,6 +37,8 @@ interface MiniDraftGridProps {
   currentPick: number;
   currentRound: number;
   ownerMap?: Record<string, string>;
+  seasonStatus?: SeasonStatus;
+  draftPaused?: boolean;
   onForceAutopick?: (pickNumber: number, teamId: string) => void;
   onForceManualPickOpen?: (pickNumber: number, teamId: string) => void;
   onReplacePick?: (pickNumber: number, teamId: string) => void;
@@ -48,6 +51,8 @@ export const MiniDraftGrid = memo(function MiniDraftGrid({
   currentPick,
   currentRound,
   ownerMap = {},
+  seasonStatus,
+  draftPaused,
   onForceAutopick,
   onForceManualPickOpen,
   onReplacePick,
@@ -113,6 +118,8 @@ export const MiniDraftGrid = memo(function MiniDraftGrid({
                             pickInRound={cell.pickInRound}
                             state={cellState}
                             pick={pickData}
+                            seasonStatus={seasonStatus}
+                            draftPaused={draftPaused}
                             className="[&>div]:h-10 cursor-context-menu"
                           />
                         </ContextMenuTrigger>
@@ -142,6 +149,8 @@ export const MiniDraftGrid = memo(function MiniDraftGrid({
                             pickInRound={cell.pickInRound}
                             state={cellState}
                             pick={pickData}
+                            seasonStatus={seasonStatus}
+                            draftPaused={draftPaused}
                             className="[&>div]:h-10 cursor-context-menu"
                           />
                         </ContextMenuTrigger>
@@ -172,6 +181,8 @@ export const MiniDraftGrid = memo(function MiniDraftGrid({
                       pickInRound={cell.pickInRound}
                       state={cellState}
                       pick={pickData}
+                      seasonStatus={seasonStatus}
+                      draftPaused={draftPaused}
                       className="[&>div]:h-10"
                     />
                   );

app/components/draft/QueueSection.tsx

@@ -30,7 +30,6 @@ interface QueueSectionProps {
     name: string;
     sport: { name: string };
   }>;
-  isMyTurn: boolean;
   canPick: boolean;
   onRemoveFromQueue: (queueId: string) => void;
   onReorder: (participantIds: string[]) => void;
@@ -122,7 +121,6 @@ const SortableQueueItem = memo(function SortableQueueItem({
 export const QueueSection = memo(function QueueSection({
   queue,
   availableParticipants,
-  isMyTurn,
   canPick,
   onRemoveFromQueue,
   onReorder,

app/routes/leagues/$leagueId.draft-board.$seasonId.tsx

@@ -311,6 +311,8 @@ export default function DraftBoard() {
           currentPick={currentPick}
           ownerMap={ownerMap}
           coronaStates={coronaStates}
+          seasonStatus={season.status}
+          draftPaused={season.draftPaused}
         />
       </div>
     </div>

app/routes/leagues/$leagueId.draft.$seasonId.tsx

@@ -7,7 +7,7 @@ import { useDraftSocket } from "~/hooks/useDraftSocket";
 import { logger } from "~/lib/logger";
 import { useCallback, useEffect, useState, useMemo, useRef } from "react";
 import { Button } from "~/components/ui/button";
-import { Tabs, TabsContent, TabsList, TabsTrigger } from "~/components/ui/tabs";
+import { Tabs, TabsList, TabsTrigger } from "~/components/ui/tabs";
 import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle } from "~/components/ui/dialog";
 import { getAuth } from "@clerk/react-router/server";
 import { getTeamQueue } from "~/models/draft-queue";
@@ -1509,11 +1509,13 @@ export default function DraftRoom() {
     currentPick,
     currentRound,
     ownerMap,
+    seasonStatus: season.status,
+    draftPaused: isPaused,
     onForceAutopick: isCommissioner ? handleForceAutopick : undefined,
     onForceManualPickOpen: isCommissioner ? handleForceManualPickOpen : undefined,
     onReplacePick: isCommissioner ? handleReplacePickOpen : undefined,
     onRollbackToPick: isCommissioner && !isDraftComplete ? handleRollbackToPick : undefined,
-  }), [draftSlots, draftGrid, currentPick, currentRound, ownerMap, isCommissioner, handleForceAutopick, handleForceManualPickOpen, handleReplacePickOpen, handleRollbackToPick, isDraftComplete]);
+  }), [draftSlots, draftGrid, currentPick, currentRound, ownerMap, season.status, isPaused, isCommissioner, handleForceAutopick, handleForceManualPickOpen, handleReplacePickOpen, handleRollbackToPick, isDraftComplete]);
 
   const availableParticipantsSectionProps = useMemo(() => ({
     participants: filteredParticipants,
@@ -1550,6 +1552,8 @@ export default function DraftRoom() {
     connectedTeams,
     isCommissioner,
     ownerMap,
+    seasonStatus: season.status,
+    draftPaused: isPaused,
     onAdjustTimeBankOpen: isCommissioner ? handleAdjustTimeBankOpen : undefined,
     onSetAutodraftOpen: isCommissioner ? handleSetAutodraftOpen : undefined,
     onForceAutopick: handleForceAutopick,
@@ -1584,7 +1588,6 @@ export default function DraftRoom() {
     ? {
         queue,
         availableParticipants,
-        isMyTurn,
         canPick,
         onRemoveFromQueue: handleRemoveFromQueue,
         onReorder: handleReorderQueue,