Add 4 new E2E tests for mobile viewport behavior

Tests mobile responsiveness including:
- Login page renders correctly on mobile viewport
- Dashboard displays correctly on mobile viewport
- Dashboard uses single-column layout on mobile (< 768px)
- Navigation elements are interactive on mobile

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

e2e/mobile.spec.ts

@@ -0,0 +1,132 @@
+// ABOUTME: E2E tests for mobile viewport behavior and responsive design.
+// ABOUTME: Tests that the dashboard displays correctly on mobile-sized screens.
+import { expect, test } from "@playwright/test";
+
+// Mobile viewport: iPhone SE/8 (375x667)
+const MOBILE_VIEWPORT = { width: 375, height: 667 };
+
+test.describe("mobile viewport", () => {
+  test.describe("unauthenticated", () => {
+    test("login page renders correctly on mobile viewport", async ({
+      page,
+    }) => {
+      await page.setViewportSize(MOBILE_VIEWPORT);
+      await page.goto("/login");
+
+      // Login form should be visible - heading is "PhaseFlow"
+      const heading = page.getByRole("heading", { name: /phaseflow/i });
+      await expect(heading).toBeVisible();
+
+      // Email input should be visible
+      const emailInput = page.getByLabel(/email/i);
+      await expect(emailInput).toBeVisible();
+
+      // Viewport width should be mobile
+      const viewportSize = page.viewportSize();
+      expect(viewportSize?.width).toBe(375);
+    });
+  });
+
+  test.describe("authenticated", () => {
+    test.beforeEach(async ({ page }) => {
+      const email = process.env.TEST_USER_EMAIL;
+      const password = process.env.TEST_USER_PASSWORD;
+
+      if (!email || !password) {
+        test.skip();
+        return;
+      }
+
+      // Set mobile viewport before navigating
+      await page.setViewportSize(MOBILE_VIEWPORT);
+
+      // Login via the login page
+      await page.goto("/login");
+      await page.waitForLoadState("networkidle");
+
+      const emailInput = page.getByLabel(/email/i);
+      const hasEmailForm = await emailInput.isVisible().catch(() => false);
+
+      if (!hasEmailForm) {
+        test.skip();
+        return;
+      }
+
+      await emailInput.fill(email);
+      await page.getByLabel(/password/i).fill(password);
+      await page.getByRole("button", { name: /sign in/i }).click();
+
+      // Wait for redirect to dashboard
+      await page.waitForURL("/", { timeout: 10000 });
+      await page.waitForLoadState("networkidle");
+    });
+
+    test("dashboard displays correctly on mobile viewport", async ({
+      page,
+    }) => {
+      // Verify viewport is mobile size
+      const viewportSize = page.viewportSize();
+      expect(viewportSize?.width).toBe(375);
+
+      // Header should be visible
+      const header = page.getByRole("heading", { name: /phaseflow/i });
+      await expect(header).toBeVisible();
+
+      // Settings link should be visible
+      const settingsLink = page.getByRole("link", { name: /settings/i });
+      await expect(settingsLink).toBeVisible();
+
+      // Decision card should be visible
+      const decisionCard = page
+        .locator('[data-testid="decision-card"]')
+        .or(page.getByText(/rest|gentle|light|reduced|train/i).first());
+      await expect(decisionCard).toBeVisible();
+
+      // Data panel should be visible
+      const dataPanel = page.getByText(/body battery|hrv/i).first();
+      await expect(dataPanel).toBeVisible();
+    });
+
+    test("dashboard uses single-column layout on mobile", async ({ page }) => {
+      // On mobile (<768px), the Data Panel and Nutrition Panel should stack vertically
+      // This is controlled by the md:grid-cols-2 class
+
+      // Find the grid container that holds Data Panel and Nutrition Panel
+      // It should NOT have two-column grid on mobile (should be single column)
+      const gridContainer = page.locator(".grid.gap-4").first();
+      const containerExists = await gridContainer
+        .isVisible()
+        .catch(() => false);
+
+      if (containerExists) {
+        // Get the computed grid template columns
+        const gridTemplateColumns = await gridContainer.evaluate((el) => {
+          return window.getComputedStyle(el).gridTemplateColumns;
+        });
+
+        // On mobile (375px < 768px), should NOT be two columns
+        // Single column would be "none" or a single value like "1fr"
+        // Two columns would be something like "1fr 1fr" or "repeat(2, 1fr)"
+        const isTwoColumn = gridTemplateColumns.includes(" ");
+        expect(isTwoColumn).toBe(false);
+      }
+    });
+
+    test("navigation elements are interactive on mobile", async ({ page }) => {
+      // Settings link should be clickable
+      const settingsLink = page.getByRole("link", { name: /settings/i });
+      await expect(settingsLink).toBeVisible();
+
+      // Click settings and verify navigation
+      await settingsLink.click();
+      await expect(page).toHaveURL(/\/settings/);
+
+      // Back button should work to return to dashboard
+      const backLink = page.getByRole("link", { name: /back|dashboard|home/i });
+      await expect(backLink).toBeVisible();
+      await backLink.click();
+
+      await expect(page).toHaveURL("/");
+    });
+  });
+});