fix: feat: E2E quality gate — mobile viewports + cross-browser matrix (#1099)

Add Playwright projects for Chromium, Firefox, WebKit, iPhone 14, and
Pixel 7 viewports. Chromium runs all specs (01-07); other projects run
read-only specs (03, 06, 07) after Chromium finishes, using project
dependencies to ensure chain state exists.

Coverage audit:
- Tests 01/02 already cover /app/get-krk, /app/cheats as part of flows
- Test 03 verifies GraphQL endpoints
- Test 06 covers wallet + position dashboards
- New test 07 adds landing page and docs smoke coverage

Changes:
- playwright.config.ts: 5 projects (3 desktop browsers + 2 mobile)
- wallet-provider.ts: accept optional viewport/screen for mobile contexts
- 03, 06 specs: pass project viewport to wallet context
- 07-landing-pages.spec.ts: new spec for landing homepage + docs
- e2e.yml: timeout 600→900s for cross-browser matrix, updated comments

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

playwright.config.ts

@@ -1,10 +1,22 @@
-import { defineConfig } from '@playwright/test';
+import { defineConfig, devices } from '@playwright/test';
+
+/**
+ * Cross-browser + mobile viewport matrix for E2E quality gate.
+ *
+ * - `chromium` runs ALL numbered specs (01-07) including transactional tests
+ *   that mutate on-chain state.
+ * - Other projects depend on `chromium` finishing first (chain state must exist)
+ *   and only run read-only / UI-rendering specs (03, 06, 07).
+ */
+
+// Read-only specs safe to run in every browser/viewport after chain state exists.
+const CROSS_BROWSER_SPECS = '0[367]-*.spec.ts';
 
 export default defineConfig({
   testDir: './tests/e2e',
   testMatch: process.env.CI ? '[0-9]*.spec.ts' : '**/*.spec.ts',
   fullyParallel: false,
-  timeout: 10 * 60 * 1000, // Increased from 5 to 10 minutes for persona journeys with multiple buys
+  timeout: 10 * 60 * 1000,
   expect: {
     timeout: 30_000,
   },
@@ -12,13 +24,58 @@ export default defineConfig({
   workers: process.env.CI ? 1 : undefined,
   use: {
     headless: true,
-    viewport: { width: 1280, height: 720 },
-    // Set screen dimensions to match viewport - required for proper isMobile detection
-    // The webapp uses screen.width (not window.innerWidth) to detect mobile
-    screen: { width: 1280, height: 720 },
     actionTimeout: 0,
     launchOptions: {
       args: ['--disable-dev-shm-usage', '--no-sandbox'],
     },
   },
+  projects: [
+    /* ── Desktop browsers ─────────────────────────────────── */
+    {
+      name: 'chromium',
+      use: {
+        ...devices['Desktop Chrome'],
+        viewport: { width: 1280, height: 720 },
+        screen: { width: 1280, height: 720 },
+      },
+    },
+    {
+      name: 'firefox',
+      use: {
+        ...devices['Desktop Firefox'],
+        viewport: { width: 1280, height: 720 },
+        screen: { width: 1280, height: 720 },
+      },
+      dependencies: ['chromium'],
+      testMatch: CROSS_BROWSER_SPECS,
+    },
+    {
+      name: 'webkit',
+      use: {
+        ...devices['Desktop Safari'],
+        viewport: { width: 1280, height: 720 },
+        screen: { width: 1280, height: 720 },
+      },
+      dependencies: ['chromium'],
+      testMatch: CROSS_BROWSER_SPECS,
+    },
+
+    /* ── Mobile viewports ─────────────────────────────────── */
+    {
+      name: 'iphone',
+      use: {
+        ...devices['iPhone 14'],
+      },
+      dependencies: ['chromium'],
+      testMatch: CROSS_BROWSER_SPECS,
+    },
+    {
+      name: 'android',
+      use: {
+        ...devices['Pixel 7'],
+      },
+      dependencies: ['chromium'],
+      testMatch: CROSS_BROWSER_SPECS,
+    },
+  ],
 });