Keep game stats width stable across tabs

e2e/tests/game-stats-sizing.spec.ts

@@ -0,0 +1,36 @@
+import { expect, test } from "../fixtures/test-fixtures";
+import { mockPreseasonSchedule } from "../fixtures/mock-data";
+
+test("keeps the game stats dialog the same size across Stats and Momentum", async ({
+  page,
+  seedUser: _seedUser,
+  mockEspnApi: _mockEspnApi,
+}) => {
+  await page.setViewportSize({ width: 1194, height: 834 });
+  await page.route("**/api/schedule**", (route) => route.fulfill({ json: mockPreseasonSchedule }));
+  await page.goto("/");
+  await page
+    .getByRole("button", { name: "View live updates for Seattle Seahawks at Tennessee Titans" })
+    .click();
+
+  const dialog = page.getByTestId("game-stats-dialog");
+  const statsPanel = dialog.getByRole("tabpanel", { name: "Stats" });
+  await expect(statsPanel.getByText("Total Yards", { exact: true })).toBeVisible();
+  const statsDialogBox = await dialog.boundingBox();
+  const statsPanelBox = await statsPanel.boundingBox();
+
+  await dialog.getByRole("tab", { name: "Momentum" }).click();
+  const momentumPanel = dialog.getByRole("tabpanel", { name: "Momentum" });
+  await expect(momentumPanel.getByText("Win Probability Over Time", { exact: true })).toBeVisible();
+  const momentumDialogBox = await dialog.boundingBox();
+  const momentumPanelBox = await momentumPanel.boundingBox();
+
+  expect(statsDialogBox).not.toBeNull();
+  expect(statsPanelBox).not.toBeNull();
+  expect(momentumDialogBox).not.toBeNull();
+  expect(momentumPanelBox).not.toBeNull();
+  expect(Math.abs(momentumDialogBox!.width - statsDialogBox!.width)).toBeLessThan(1);
+  expect(Math.abs(momentumDialogBox!.height - statsDialogBox!.height)).toBeLessThan(1);
+  expect(Math.abs(momentumPanelBox!.width - statsPanelBox!.width)).toBeLessThan(1);
+  expect(statsPanelBox!.width).toBeGreaterThanOrEqual(statsDialogBox!.width - 2);
+});

src/components/dialogs/GameStatsDialog.tsx

@@ -189,7 +189,7 @@ export function GameStatsDialog({
   };
 
   const content = (
-    <div className={cn("flex min-h-0 flex-col", variant === "dialog" && "h-full")}>
+    <div className={cn("flex min-h-0 w-full min-w-0 flex-col", variant === "dialog" && "h-full")}>
       {/* Custom header with team info */}
       <div className="border-b border-gray-700 px-4 py-4 md:px-6">
         {/* Reserve a row so the close target never covers either team. */}