Draft room tweaks.

app/components/draft/DraftSummaryView.tsx

@@ -1,8 +1,9 @@
-import { memo, useMemo } from "react";
+import { memo, useMemo, Fragment } from "react";
+import { TeamAvatar } from "~/components/TeamAvatar";
 import { type DraftPick, groupPicksByTeamAndSport } from "./picks-utils";
 
 interface DraftSummaryViewProps {
-  draftSlots: Array<{ id: string; team: { id: string; name: string } }>;
+  draftSlots: Array<{ id: string; team: { id: string; name: string; logoUrl?: string | null } }>;
   ownerMap?: Record<string, string>;
   picks: DraftPick[];
   sports: Array<{ id: string; name: string }>;
@@ -58,90 +59,93 @@ export const DraftSummaryView = memo(function DraftSummaryView({
     );
   }
 
+  const gridCols = `140px 96px repeat(${draftSlots.length}, minmax(80px, 1fr))`;
+
   return (
     <div className="w-full h-full overflow-auto">
-      <table className="w-full border-collapse">
-        <thead className="sticky top-0 bg-background z-10">
-          <tr>
-            <th
-              scope="col"
-              className="border-r border-b border-border p-2 text-left font-semibold bg-muted sticky left-0 z-20 min-w-[120px]"
+      <div className="grid w-full" style={{ gridTemplateColumns: gridCols }}>
+
+        {/* Header row */}
+        <div className="sticky top-0 left-0 z-30 bg-muted border-r border-b border-border px-3 py-2 text-xs font-semibold uppercase tracking-wider text-muted-foreground">
+          Sport
+        </div>
+        <div className="sticky top-0 z-20 bg-muted border-r border-b border-border px-2 py-2 text-center text-xs font-semibold uppercase tracking-wider text-muted-foreground">
+          Total
+        </div>
+        {draftSlots.map((slot, index) => {
+          const ownerName = ownerMap[slot.team.id];
+          const isLast = index === draftSlots.length - 1;
+          const used = flexPicksUsedByTeam.get(slot.team.id) ?? 0;
+          const flexesExhausted = flexPicksAvailable > 0 && used >= flexPicksAvailable;
+          return (
+            <div
+              key={slot.id}
+              className={`sticky top-0 z-20 bg-muted/40 border-b border-border px-1 py-2 min-w-0 ${!isLast ? "border-r" : ""}`}
             >
-              Sport
-            </th>
-            <th
-              scope="col"
-              className="border-r border-b border-border p-2 text-center font-semibold bg-muted min-w-[48px]"
-            >
-              Total
-            </th>
-            {draftSlots.map((slot, index) => {
-              const displayName = ownerMap[slot.team.id] || slot.team.name;
-              const isLast = index === draftSlots.length - 1;
-              const used = flexPicksUsedByTeam.get(slot.team.id) ?? 0;
-              const flexesExhausted = flexPicksAvailable > 0 && used >= flexPicksAvailable;
-              return (
-                <th
-                  key={slot.id}
-                  scope="col"
-                  className={`border-b border-border p-2 text-center font-semibold bg-muted/50 min-w-[60px] ${!isLast ? "border-r" : ""}`}
-                >
-                  <span className="text-sm">{displayName}</span>
-                  {flexPicksAvailable > 0 && (
-                    <div className={`text-xs mt-0.5 ${flexesExhausted ? "text-destructive font-medium" : "font-normal text-muted-foreground"}`}>
-                      {used} of {flexPicksAvailable} flexes
-                    </div>
-                  )}
-                </th>
-              );
-            })}
-          </tr>
-        </thead>
-        <tbody>
-          {sports.map((sport, sportIndex) => {
-            const isLastRow = sportIndex === sports.length - 1;
-            const { total: sportTotal, teams: sportTeamCount } = sportStats.get(sport.id) ?? { total: 0, teams: 0 };
-            return (
-              <tr key={sport.id}>
-                <th
-                  scope="row"
-                  className={`border-r border-border p-2 font-medium text-sm text-left bg-muted sticky left-0 z-10 ${!isLastRow ? "border-b" : ""}`}
-                >
-                  {sport.name}
-                </th>
-                <td
-                  className={`border-r border-border p-2 text-center text-sm font-semibold bg-muted/30 ${!isLastRow ? "border-b" : ""}`}
-                >
-                  {sportTotal > 0 ? (
-                    <>
-                      <div>{sportTotal}</div>
-                      <div className="text-xs font-normal text-muted-foreground mt-0.5">
-                        {sportTeamCount} team{sportTeamCount !== 1 ? "s" : ""}
-                      </div>
-                    </>
-                  ) : null}
-                </td>
-                {draftSlots.map((slot, slotIndex) => {
-                  const count =
-                    picksByTeamAndSport.get(slot.team.id)?.get(sport.id)
-                      ?.length ?? 0;
-                  const isLast = slotIndex === draftSlots.length - 1;
-                  return (
-                    <td
-                      key={`${slot.team.id}-${sport.id}`}
-                      className={`border-border p-2 text-center text-sm ${
-                        count >= 2 ? "bg-accent/30 font-semibold" : "bg-background"
-                      } ${!isLastRow ? "border-b" : ""} ${!isLast ? "border-r" : ""}`}
-                    >
-                      {count > 0 ? count : null}
-                    </td>
-                  );
-                })}
-              </tr>
-            );
-          })}
-        </tbody>
-      </table>
+              <div className="flex flex-col items-center gap-1">
+                <TeamAvatar
+                  teamId={slot.team.id}
+                  teamName={ownerName || slot.team.name}
+                  logoUrl={slot.team.logoUrl}
+                  size="md"
+                />
+                <div className="text-xs font-semibold text-center truncate w-full">
+                  {ownerName || slot.team.name}
+                </div>
+                {flexPicksAvailable > 0 && (
+                  <span className={`text-xs ${flexesExhausted ? "text-destructive font-medium" : "text-muted-foreground"}`}>
+                    {used}/{flexPicksAvailable} flex picks
+                  </span>
+                )}
+              </div>
+            </div>
+          );
+        })}
+
+        {/* Data rows */}
+        {sports.map((sport, sportIndex) => {
+          const isLastRow = sportIndex === sports.length - 1;
+          const { total: sportTotal, teams: sportTeamCount } =
+            sportStats.get(sport.id) ?? { total: 0, teams: 0 };
+          return (
+            <Fragment key={sport.id}>
+              <div className={`sticky left-0 z-10 bg-muted border-r border-border px-3 py-2.5 font-medium text-sm whitespace-nowrap ${!isLastRow ? "border-b" : ""}`}>
+                {sport.name}
+              </div>
+              <div className={`border-r border-border px-2 py-2.5 text-center bg-muted/20 ${!isLastRow ? "border-b" : ""}`}>
+                {sportTotal > 0 ? (
+                  <>
+                    <div className="text-sm font-bold tabular-nums">{sportTotal}</div>
+                    <div className="text-xs text-muted-foreground">{sportTeamCount}/{draftSlots.length} teams</div>
+                  </>
+                ) : (
+                  <span className="text-muted-foreground/40 text-sm">—</span>
+                )}
+              </div>
+              {draftSlots.map((slot, slotIndex) => {
+                const count = picksByTeamAndSport.get(slot.team.id)?.get(sport.id)?.length ?? 0;
+                const isLast = slotIndex === draftSlots.length - 1;
+                const isFlex = count >= 2;
+                return (
+                  <div
+                    key={`${slot.team.id}-${sport.id}`}
+                    className={`border-border px-3 py-2.5 text-center ${isFlex ? "bg-amber-500/10" : "bg-background"} ${!isLastRow ? "border-b" : ""} ${!isLast ? "border-r" : ""}`}
+                  >
+                    {count > 0 ? (
+                      <span className={`text-sm font-bold tabular-nums ${isFlex ? "text-amber-600 dark:text-amber-400" : ""}`}>
+                        {count}
+                      </span>
+                    ) : (
+                      <span className="text-muted-foreground/30 text-sm">—</span>
+                    )}
+                  </div>
+                );
+              })}
+            </Fragment>
+          );
+        })}
+
+      </div>
     </div>
   );
 });

app/components/ui/team-owner-badge.tsx

@@ -1,9 +1,24 @@
-import { getAvatarColor } from "~/lib/color-hash";
+const AVATAR_COLORS = [
+  "#adf661",
+  "#2ce1c1",
+  "#8b5cf6",
+  "#f59e0b",
+  "#ef4444",
+  "#3b82f6",
+];
+
+function hashName(name: string): number {
+  let hash = 0;
+  for (let i = 0; i < name.length; i++) {
+    hash = (hash * 31 + name.charCodeAt(i)) & 0xffff;
+  }
+  return hash;
+}
 
 interface TeamOwnerBadgeProps {
   teamName: string;
   ownerName?: string;
-  align?: "left" | "right"; // right = avatar on the right side for the right column
+  align?: "left" | "right";
 }
 
 export function TeamOwnerBadge({
@@ -11,14 +26,23 @@ export function TeamOwnerBadge({
   ownerName,
   align = "left",
 }: TeamOwnerBadgeProps) {
-  const initial = teamName.charAt(0).toUpperCase();
-  const colorClass = getAvatarColor(teamName);
+  const initials =
+    teamName
+      .split(/\s+/)
+      .filter(Boolean)
+      .slice(0, 2)
+      .map((w) => w[0].toUpperCase())
+      .join("") || "?";
+  const color = AVATAR_COLORS[hashName(teamName) % AVATAR_COLORS.length];
 
   const avatar = (
     <div
-      className={`h-6 w-6 rounded-full ${colorClass} text-white text-xs font-bold flex items-center justify-center shrink-0`}
+      role="img"
+      aria-label={teamName}
+      className="h-6 w-6 flex shrink-0 items-center justify-center font-bold text-[10px]"
+      style={{ backgroundColor: "#000", color }}
     >
-      {initial}
+      {initials}
     </div>
   );