From 8d2dfbe64035d6f6e504931929b5cc06b94a6218 Mon Sep 17 00:00:00 2001
From: Maciek <tomczukmaciej@gmail.com>
Date: Tue, 22 Sep 2026 19:32:11 +0200
Subject: [PATCH 01/10] test(app): Raise the Playwright global timeout and
 report slow test files

Signed-off-by: Maciek <tomczukmaciej@gmail.com>
---
 app/src/__tests__/playwright.config.ts | 8 +++++---
 1 file changed, 5 insertions(+), 3 deletions(-)

diff --git a/app/src/__tests__/playwright.config.ts b/app/src/__tests__/playwright.config.ts
index 0462b223..c7fdd1b7 100644
--- a/app/src/__tests__/playwright.config.ts
+++ b/app/src/__tests__/playwright.config.ts
@@ -9,12 +9,14 @@ export default defineConfig({
   testDir: './e2e',
   timeout: 30 * 1000,
   expect: { timeout: 5000 },
-  globalTimeout: 12 * 60 * 1000,
+  // Must stay well under the 30-minute job timeout in .github/workflows/frontend.yml.
+  globalTimeout: 20 * 60 * 1000,
   maxFailures: 10,
   fullyParallel: true,
-  // Limit workers in CI to reduce flakiness / resource contention
-  workers: process.env.CI ? 2 : undefined,
+  // Public-repo ubuntu-latest runners have 4 vCPUs; leave one for the vite server.
+  workers: process.env.CI ? 3 : undefined,
   retries: 1,
+  reportSlowTests: { max: 10, threshold: 30 * 1000 },
   reporter: [
     ['github'],
     ['html', { open: 'never' }]

From eac20ad555530ba43474dda9b0fe305774a34017 Mon Sep 17 00:00:00 2001
From: Maciek <tomczukmaciej@gmail.com>
Date: Tue, 22 Sep 2026 19:32:44 +0200
Subject: [PATCH 02/10] test(app): Drop the chromium-mobile-light Playwright
 project

Signed-off-by: Maciek <tomczukmaciej@gmail.com>
---
 app/src/__tests__/playwright.config.ts | 2 --
 1 file changed, 2 deletions(-)

diff --git a/app/src/__tests__/playwright.config.ts b/app/src/__tests__/playwright.config.ts
index c7fdd1b7..624bacd1 100644
--- a/app/src/__tests__/playwright.config.ts
+++ b/app/src/__tests__/playwright.config.ts
@@ -44,8 +44,6 @@ export default defineConfig({
     { name: 'chromium-mobile-dark', use: { ...devices['Pixel 5'], colorScheme: 'dark', storageState: 'src/__tests__/e2e/.auth-storage.json' }, dependencies: ['auth-setup'] },
     // Safari/WebKit coverage: latest supported iPhone (15 Pro) using default WebKit engine
     { name: 'iphone15pro-dark', use: { ...devices['iPhone 15 Pro'], colorScheme: 'dark', storageState: 'src/__tests__/e2e/.auth-storage.json' }, dependencies: ['auth-setup'] },
-    // Mobile baseline: Pixel 5 light mode
-    { name: 'chromium-mobile-light', use: { ...devices['Pixel 5'], colorScheme: 'light', storageState: 'src/__tests__/e2e/.auth-storage.json' }, dependencies: ['auth-setup'] },
     // Desktop without pre-auth storage so login flows can exercise authentication UI
     { name: 'chromium-desktop', use: { ...devices['Desktop Chrome'] } }
   ]

From 9ef828062d900e19c5e375f17a31e07bacf46cac Mon Sep 17 00:00:00 2001
From: Maciek <tomczukmaciej@gmail.com>
Date: Tue, 22 Sep 2026 19:33:06 +0200
Subject: [PATCH 03/10] test(app): Scope Playwright specs to projects with tags
 instead of runtime skips

Signed-off-by: Maciek <tomczukmaciej@gmail.com>
---
 app/package.json                              |  4 +--
 .../connection/connectionStatusHeader.spec.ts | 12 +++------
 .../mobileConnectionStatusBar.spec.ts         |  6 ++---
 app/src/__tests__/e2e/functional/auth.spec.ts |  3 +--
 .../custom-rules-empty-groups.spec.ts         |  8 ++----
 .../custom-rules-group-reorder.spec.ts        |  8 ++----
 .../custom-rules-paste-target.spec.ts         |  5 ++--
 .../e2e/functional/login-advanced.spec.ts     |  5 ++--
 .../e2e/functional/login-basic.spec.ts        |  5 ++--
 .../__tests__/e2e/functional/logout.spec.ts   |  5 ++--
 .../e2e/functional/session-limit.spec.ts      |  5 ++--
 .../functional/settings-tooltip-tap.spec.ts   |  5 ++--
 .../e2e/functional/setup-ip-tooltip.spec.ts   |  5 ++--
 .../layout/custom-rules-delete-modal.spec.ts  |  4 +--
 .../layout/custom-rules-edit-modal.spec.ts    |  6 +----
 .../e2e/layout/custom-rules-ios.spec.ts       |  6 +----
 .../e2e/layout/desktop-layout.spec.ts         |  3 +--
 .../e2e/layout/faq-expand-scroll.spec.ts      |  8 +-----
 app/src/__tests__/e2e/layout/layout.spec.ts   |  9 +++----
 app/src/__tests__/e2e/layout/logs-ios.spec.ts |  6 +----
 .../layout/mobile-header-transition.spec.ts   |  5 ++--
 .../layout/mobile-horizontal-overflow.spec.ts | 11 +-------
 .../e2e/layout/mobile-nav-scroll.spec.ts      | 12 +--------
 .../e2e/layout/mobileHeaderTitle.spec.ts      | 12 ++-------
 .../e2e/layout/navigation-visibility.spec.ts  |  6 ++---
 .../e2e/layout/protected-pages-ios.spec.ts    | 10 +------
 .../e2e/layout/responsive-navigation.spec.ts  |  6 ++---
 .../__tests__/e2e/layout/responsive.spec.ts   |  3 +--
 .../e2e/layout/setup-guide-scroll.spec.ts     |  9 +------
 .../__tests__/e2e/layout/setup-ios.spec.ts    |  4 +--
 .../e2e/layout/setup-linux-dnscrypt.spec.ts   |  4 +--
 .../setup-overlay-header-visibility.spec.ts   | 14 +++-------
 .../e2e/layout/setup-overlay-mobile.spec.ts   |  5 +---
 .../e2e/layout/setup-routers-stamps.spec.ts   |  4 +--
 .../layout/setup-sidepanel-desktop.spec.ts    |  4 +--
 .../e2e/layout/tap-targets-auth.spec.ts       |  8 ++----
 .../e2e/layout/tap-targets-protected.spec.ts  |  7 +----
 .../e2e/layout/ultrawide-layout.spec.ts       |  3 +--
 .../logs/logs-mobile-bottom-header.spec.ts    |  4 +--
 .../e2e/logs/logs-mobile-overflow.spec.ts     | 13 ++++------
 .../e2e/manual/mobileSnapshots.spec.ts        | 13 +++-------
 app/src/__tests__/e2e/utils/desktopOnly.ts    | 14 ----------
 app/src/__tests__/playwright.config.ts        | 26 ++++++++++++++++---
 43 files changed, 95 insertions(+), 220 deletions(-)
 delete mode 100644 app/src/__tests__/e2e/utils/desktopOnly.ts

diff --git a/app/package.json b/app/package.json
index 48d11c0b..f1e807b9 100644
--- a/app/package.json
+++ b/app/package.json
@@ -16,8 +16,8 @@
     "test:e2e:headed": "playwright test -c src/__tests__/playwright.config.ts --headed --workers=2",
     "test:e2e:inspect": "playwright test -c src/__tests__/playwright.config.ts --ui",
     "test:e2e:report": "playwright show-report",
-    "snapshots:mobile": "MOBILE_SNAPSHOTS=1 playwright test -c src/__tests__/playwright.config.ts --project=chromium-mobile --project=iphone15pro src/__tests__/e2e/manual/mobileSnapshots.spec.ts --update-snapshots",
-    "snapshots:mobile:ci": "MOBILE_SNAPSHOTS=1 playwright test -c src/__tests__/playwright.config.ts --project=chromium-mobile --project=iphone15pro src/__tests__/e2e/manual/mobileSnapshots.spec.ts"
+    "snapshots:mobile": "MOBILE_SNAPSHOTS=1 playwright test -c src/__tests__/playwright.config.ts --project=chromium-mobile-dark --project=iphone15pro-dark src/__tests__/e2e/manual/mobileSnapshots.spec.ts --update-snapshots",
+    "snapshots:mobile:ci": "MOBILE_SNAPSHOTS=1 playwright test -c src/__tests__/playwright.config.ts --project=chromium-mobile-dark --project=iphone15pro-dark src/__tests__/e2e/manual/mobileSnapshots.spec.ts"
   },
   "dependencies": {
     "@dnd-kit/core": "^6.3.1",
diff --git a/app/src/__tests__/e2e/connection/connectionStatusHeader.spec.ts b/app/src/__tests__/e2e/connection/connectionStatusHeader.spec.ts
index ee526189..3404c04f 100644
--- a/app/src/__tests__/e2e/connection/connectionStatusHeader.spec.ts
+++ b/app/src/__tests__/e2e/connection/connectionStatusHeader.spec.ts
@@ -30,20 +30,16 @@ async function mockDnsSequence(page: Page, responses: Record<string, unknown>[])
   });
 }
 
-// Desktop only tests rely on chromium-desktop project
-// Assumes /setup route renders the header when desktop
+// The header only renders on desktop viewports; /setup is where it mounts.
 
-test.describe('Desktop ConnectionStatusHeader', () => {
-  test.beforeEach(async ({ page }, testInfo) => {
-    // Skip on mobile viewports - header only appears on desktop
-    test.skip(!/desktop/i.test(testInfo.project.name), 'Desktop header tests require desktop viewport');
+test.describe('Desktop ConnectionStatusHeader', { tag: '@desktop' }, () => {
+  test.beforeEach(async ({ page }) => {
     await registerMocks(page, { authenticated: true, customProfiles: [{ id: 'prof1', profile_id: 'prof1', name: 'Default' }] });
     await page.goto('/setup');
     await page.evaluate(() => window.localStorage?.removeItem('moddns-storage'));
   });
 
-  test.afterEach(async ({ page }, testInfo) => {
-    if (!/desktop/i.test(testInfo.project.name)) return;
+  test.afterEach(async ({ page }) => {
     if (page.isClosed()) return;
     await page.evaluate(() => window.localStorage?.removeItem('moddns-storage'));
   });
diff --git a/app/src/__tests__/e2e/connection/mobileConnectionStatusBar.spec.ts b/app/src/__tests__/e2e/connection/mobileConnectionStatusBar.spec.ts
index 8e84b4fc..dd86b9f5 100644
--- a/app/src/__tests__/e2e/connection/mobileConnectionStatusBar.spec.ts
+++ b/app/src/__tests__/e2e/connection/mobileConnectionStatusBar.spec.ts
@@ -13,12 +13,10 @@ async function mockDnsSequence(page: Page, responses: Record<string, unknown>[])
   });
 }
 
-test.describe('Mobile ConnectionStatusBar', () => {
+test.describe('Mobile ConnectionStatusBar', { tag: '@mobile' }, () => {
   test.use({ viewport: { width: 375, height: 800 } });
 
-  test.beforeEach(async ({ page }, testInfo) => {
-    // Skip on desktop - mobile bar only appears on mobile viewports
-    test.skip(/desktop/i.test(testInfo.project.name), 'Mobile bar tests require mobile viewport');
+  test.beforeEach(async ({ page }) => {
     await registerMocks(page, { authenticated: true, customProfiles: [{ id: 'prof1', profile_id: 'prof1', name: 'Default' }] });
     await page.goto('/setup');
   });
diff --git a/app/src/__tests__/e2e/functional/auth.spec.ts b/app/src/__tests__/e2e/functional/auth.spec.ts
index a0fc11c9..a4cc5c98 100644
--- a/app/src/__tests__/e2e/functional/auth.spec.ts
+++ b/app/src/__tests__/e2e/functional/auth.spec.ts
@@ -40,8 +40,7 @@ test.describe('@functional Authentication', () => {
     expect(errors).toEqual([]);
   });
 
-  test('successful logout returns to login without hook errors', async ({ page }) => {
-    if (!/desktop/i.test(test.info().project.name)) test.skip();
+  test('successful logout returns to login without hook errors', { tag: '@desktop' }, async ({ page }) => {
     const consoleErrors: string[] = [];
     page.on('console', msg => { if (msg.type() === 'error') consoleErrors.push(msg.text()); });
 
diff --git a/app/src/__tests__/e2e/functional/custom-rules-empty-groups.spec.ts b/app/src/__tests__/e2e/functional/custom-rules-empty-groups.spec.ts
index 875bef2b..42068e22 100644
--- a/app/src/__tests__/e2e/functional/custom-rules-empty-groups.spec.ts
+++ b/app/src/__tests__/e2e/functional/custom-rules-empty-groups.spec.ts
@@ -23,12 +23,8 @@ const withOneRule = {
   },
 };
 
-test.describe('@functional custom rules keep empty groups visible', () => {
-  // eslint-disable-next-line no-empty-pattern
-  test.beforeEach(({}, testInfo) => {
-    test.skip(!/chromium-desktop/i.test(testInfo.project.name), 'group folders are exercised on desktop');
-  });
-
+// Group folders are exercised on desktop.
+test.describe('@functional custom rules keep empty groups visible', { tag: '@desktop' }, () => {
   test('renders registry groups when the profile has no custom rules', async ({ page }) => {
     await registerMocks(page, { authenticated: true, customProfiles: [withoutRules] });
     await page.goto('/custom-rules');
diff --git a/app/src/__tests__/e2e/functional/custom-rules-group-reorder.spec.ts b/app/src/__tests__/e2e/functional/custom-rules-group-reorder.spec.ts
index 3ed18fcf..0eb8fe13 100644
--- a/app/src/__tests__/e2e/functional/custom-rules-group-reorder.spec.ts
+++ b/app/src/__tests__/e2e/functional/custom-rules-group-reorder.spec.ts
@@ -19,12 +19,8 @@ const profile = {
   },
 };
 
-test.describe('@functional custom rules group reorder', () => {
-  // eslint-disable-next-line no-empty-pattern
-  test.beforeEach(({}, testInfo) => {
-    test.skip(!/chromium-desktop/i.test(testInfo.project.name), 'pointer-drag reorder is exercised on desktop');
-  });
-
+// Pointer-drag reorder is exercised on desktop.
+test.describe('@functional custom rules group reorder', { tag: '@desktop' }, () => {
   test('renders groups in registry order (not alphabetical)', async ({ page }) => {
     await registerMocks(page, { authenticated: true, customProfiles: [profile] });
     await page.goto('/custom-rules');
diff --git a/app/src/__tests__/e2e/functional/custom-rules-paste-target.spec.ts b/app/src/__tests__/e2e/functional/custom-rules-paste-target.spec.ts
index f8deedc9..fe1fb512 100644
--- a/app/src/__tests__/e2e/functional/custom-rules-paste-target.spec.ts
+++ b/app/src/__tests__/e2e/functional/custom-rules-paste-target.spec.ts
@@ -39,9 +39,8 @@ test.describe('@functional custom rules add box exposes a pasteable input', () =
     expect(inputBox.width).toBeGreaterThan(controlBox.width * 0.5);
   });
 
-  test('a real right-click on the empty field reaches the input (desktop)', async ({ page }) => {
-    test.skip(!/chromium-desktop/i.test(test.info().project.name), 'context menus are a desktop pointer path');
-
+  // Context menus are a desktop pointer path.
+  test('a real right-click on the empty field reaches the input', { tag: '@desktop' }, async ({ page }) => {
     await registerMocks(page, {
       authenticated: true,
       customProfiles: [{ id: 'prof1', profile_id: 'prof1', name: 'Default', settings: { custom_rules: [] } }],
diff --git a/app/src/__tests__/e2e/functional/login-advanced.spec.ts b/app/src/__tests__/e2e/functional/login-advanced.spec.ts
index 925b1f28..af03574b 100644
--- a/app/src/__tests__/e2e/functional/login-advanced.spec.ts
+++ b/app/src/__tests__/e2e/functional/login-advanced.spec.ts
@@ -1,5 +1,4 @@
-import { expect } from '@playwright/test';
-import { desktopOnly as test } from '../utils/desktopOnly';
+import { test, expect } from '@playwright/test';
 import { AUTH_TOAST_IDS } from '../../../lib/authToasts';
 import { installWebAuthnSuccessStub, installWebAuthnErrorStub } from '../utils/webauthn';
 
@@ -11,7 +10,7 @@ async function ensurePasswordMode(page: import('@playwright/test').Page) {
   }
 }
 
-test.describe('Login advanced flows (desktop only)', () => {
+test.describe('Login advanced flows', { tag: '@desktop' }, () => {
   test('TOTP required then success with OTP', async ({ page }) => {
     let authed = false;
 
diff --git a/app/src/__tests__/e2e/functional/login-basic.spec.ts b/app/src/__tests__/e2e/functional/login-basic.spec.ts
index f6aac01c..eb1490e2 100644
--- a/app/src/__tests__/e2e/functional/login-basic.spec.ts
+++ b/app/src/__tests__/e2e/functional/login-basic.spec.ts
@@ -1,9 +1,8 @@
-import { expect } from '@playwright/test';
-import { desktopOnly as test } from '../utils/desktopOnly';
+import { test, expect } from '@playwright/test';
 import { registerMocks } from '../../mocks/registerMocks';
 import { AUTH_TOAST_IDS } from '../../../lib/authToasts';
 
-test.describe('Login basic flows (desktop only)', () => {
+test.describe('Login basic flows', { tag: '@desktop' }, () => {
   test('successful password login shows toast and redirects', async ({ page }) => {
     // Dynamic auth state for account/profile routes
     let authed = false;
diff --git a/app/src/__tests__/e2e/functional/logout.spec.ts b/app/src/__tests__/e2e/functional/logout.spec.ts
index b8b24d5d..009ba9cf 100644
--- a/app/src/__tests__/e2e/functional/logout.spec.ts
+++ b/app/src/__tests__/e2e/functional/logout.spec.ts
@@ -1,11 +1,10 @@
-import { expect } from '@playwright/test';
-import { desktopOnly as test } from '../utils/desktopOnly';
+import { test, expect } from '@playwright/test';
 import { AUTH_TOAST_IDS } from '../../../lib/authToasts';
 import { registerMocks } from '../../mocks/registerMocks';
 
 // Covers manual logout via UI and ensures single success toast + redirect.
 
-test.describe('Logout flows (desktop only)', () => {
+test.describe('Logout flows', { tag: '@desktop' }, () => {
   test('Manual logout (force helper) from authenticated home redirects to login and shows toast', async ({ page }) => {
     await registerMocks(page, { authenticated: true, customProfiles: [{ id: 'prof_1', name: 'Main' }] });
 
diff --git a/app/src/__tests__/e2e/functional/session-limit.spec.ts b/app/src/__tests__/e2e/functional/session-limit.spec.ts
index 52275ceb..194dc210 100644
--- a/app/src/__tests__/e2e/functional/session-limit.spec.ts
+++ b/app/src/__tests__/e2e/functional/session-limit.spec.ts
@@ -1,10 +1,9 @@
-import { expect } from '@playwright/test';
-import { desktopOnly as test } from '../utils/desktopOnly';
+import { test, expect } from '@playwright/test';
 import { AUTH_TOAST_IDS } from '../../../lib/authToasts';
 
 // Scenario: user hits session limit (429 with specific error), sees dialog, cancels -> remains on login, no success toast.
 
-test.describe('Session limit dialog cancel flow (desktop only)', () => {
+test.describe('Session limit dialog cancel flow', { tag: '@desktop' }, () => {
   test('Cancel maintains login state without authenticating', async ({ page }) => {
     const authed = false;
 
diff --git a/app/src/__tests__/e2e/functional/settings-tooltip-tap.spec.ts b/app/src/__tests__/e2e/functional/settings-tooltip-tap.spec.ts
index a9c208e5..7c134314 100644
--- a/app/src/__tests__/e2e/functional/settings-tooltip-tap.spec.ts
+++ b/app/src/__tests__/e2e/functional/settings-tooltip-tap.spec.ts
@@ -4,9 +4,8 @@ import { registerMocks } from '../../mocks/registerMocks';
 // #127: the shared Tooltip was hover-only, so the (i) info buttons did nothing
 // on touch devices. Taps must now toggle the tooltip, and tapping elsewhere
 // must dismiss it.
-test.describe('Settings retention tooltip on touch', () => {
-  test.beforeEach(async ({ page, isMobile }) => {
-    test.skip(!isMobile, 'touch interaction is mobile-only');
+test.describe('Settings retention tooltip on touch', { tag: '@mobile' }, () => {
+  test.beforeEach(async ({ page }) => {
     await registerMocks(page, { authenticated: true });
   });
 
diff --git a/app/src/__tests__/e2e/functional/setup-ip-tooltip.spec.ts b/app/src/__tests__/e2e/functional/setup-ip-tooltip.spec.ts
index e9420bfc..1b9be50b 100644
--- a/app/src/__tests__/e2e/functional/setup-ip-tooltip.spec.ts
+++ b/app/src/__tests__/e2e/functional/setup-ip-tooltip.spec.ts
@@ -6,9 +6,8 @@ import { registerMocks } from '../../mocks/registerMocks';
 // tooltip and must NOT trigger the copy action; tapping the address value must
 // still copy. Copy always raises a toast (success or failure), so "no toast"
 // proves copy was not triggered.
-test.describe('Setup IP info tooltip on touch', () => {
-  test.beforeEach(async ({ page, isMobile }) => {
-    test.skip(!isMobile, 'touch interaction is mobile-only');
+test.describe('Setup IP info tooltip on touch', { tag: '@mobile' }, () => {
+  test.beforeEach(async ({ page }) => {
     await registerMocks(page, { authenticated: true });
   });
 
diff --git a/app/src/__tests__/e2e/layout/custom-rules-delete-modal.spec.ts b/app/src/__tests__/e2e/layout/custom-rules-delete-modal.spec.ts
index 74f23133..69353aae 100644
--- a/app/src/__tests__/e2e/layout/custom-rules-delete-modal.spec.ts
+++ b/app/src/__tests__/e2e/layout/custom-rules-delete-modal.spec.ts
@@ -5,10 +5,8 @@ import { registerMocks } from '../../mocks/registerMocks';
 // group name is very long (QA issue #634 — "Overflow issue in the Delete group
 // modal when group name is too long"). The interpolated name must wrap/break
 // inside the dialog rather than spill past its right edge.
-(test.describe as typeof test.describe)('@layout Custom Rules delete group modal long name', () => {
+test.describe('@layout Custom Rules delete group modal long name', { tag: '@desktop' }, () => {
   test('delete confirmation stays within the modal', async ({ page }) => {
-    test.skip(!/chromium-desktop/i.test(test.info().project.name), 'desktop layout regression');
-
     const longGroup = 'StuffsadsadadasdasdasdasdasdasdasdasdasdasdaszdasdsddsdsdsFddgd';
     await registerMocks(page, {
       authenticated: true,
diff --git a/app/src/__tests__/e2e/layout/custom-rules-edit-modal.spec.ts b/app/src/__tests__/e2e/layout/custom-rules-edit-modal.spec.ts
index 0b70172f..0b2425de 100644
--- a/app/src/__tests__/e2e/layout/custom-rules-edit-modal.spec.ts
+++ b/app/src/__tests__/e2e/layout/custom-rules-edit-modal.spec.ts
@@ -5,10 +5,8 @@ import { registerMocks } from '../../mocks/registerMocks';
 // is very long (QA issue #634 — "The Edit modal breaks when the group name is too
 // long"). The group <Select> value should truncate inside the dialog rather than
 // expand it or spill past its right edge.
-(test.describe as typeof test.describe)('@layout Custom Rules edit modal long group name', () => {
+test.describe('@layout Custom Rules edit modal long group name', { tag: '@desktop' }, () => {
   test('group select stays within the modal', async ({ page }) => {
-    test.skip(!/chromium-desktop/i.test(test.info().project.name), 'desktop layout regression');
-
     const longGroup = 'StuffsadsadadasdasdasdasdasdasdasdasdasdasdaszdasdsddsdsdsFddgd';
     await registerMocks(page, {
       authenticated: true,
@@ -40,8 +38,6 @@ import { registerMocks } from '../../mocks/registerMocks';
   // check icon / off the viewport edge (QA issue #634 follow-up — "Cutoff issue in
   // the group dropdown inside the Edit rule modal when the group name is too long").
   test('open group dropdown option stays on screen', async ({ page }) => {
-    test.skip(!/chromium-desktop/i.test(test.info().project.name), 'desktop layout regression');
-
     const longGroup = 'StuffsadsadadasdasdasdasdasdasdasdasdasdasdaszdasdsddsdsdsFddgd';
     await registerMocks(page, {
       authenticated: true,
diff --git a/app/src/__tests__/e2e/layout/custom-rules-ios.spec.ts b/app/src/__tests__/e2e/layout/custom-rules-ios.spec.ts
index 5acd1c59..3ac2ad9a 100644
--- a/app/src/__tests__/e2e/layout/custom-rules-ios.spec.ts
+++ b/app/src/__tests__/e2e/layout/custom-rules-ios.spec.ts
@@ -1,10 +1,8 @@
 import { test, expect } from '@playwright/test';
 import { registerMocks } from '../../mocks/registerMocks';
 
-(test.describe as typeof test.describe)('@layout @ios Custom Rules iOS visibility', () => {
+test.describe('@layout Custom Rules iOS visibility', { tag: '@ios' }, () => {
   test('content renders on iOS', async ({ page }) => {
-    test.skip(!/iphone15pro/i.test(test.info().project.name), 'Only relevant for iPhone viewport projects');
-
   await registerMocks(page, { authenticated: true, customProfiles: [{ id: 'prof1', profile_id: 'prof1', name: 'Default', settings: { custom_rules: [] } }] });
 
     await page.goto('/custom-rules');
@@ -16,8 +14,6 @@ import { registerMocks } from '../../mocks/registerMocks';
   // Regression: a long group name must truncate, not push the group header off-screen
   // (QA issue #634 — "Group names are cut off on mobile viewports when they are too long").
   test('long group name does not overflow on mobile', async ({ page }) => {
-    test.skip(!/iphone15pro/i.test(test.info().project.name), 'Only relevant for iPhone viewport projects');
-
     const longGroup = 'StuffsadsadadasdasdasdasdasdasdasdasdasdasdaszdasdsddsdsdsFddgd';
     await registerMocks(page, {
       authenticated: true,
diff --git a/app/src/__tests__/e2e/layout/desktop-layout.spec.ts b/app/src/__tests__/e2e/layout/desktop-layout.spec.ts
index 67621a77..69ae6c65 100644
--- a/app/src/__tests__/e2e/layout/desktop-layout.spec.ts
+++ b/app/src/__tests__/e2e/layout/desktop-layout.spec.ts
@@ -4,9 +4,8 @@ import { registerMocks } from '../../mocks/registerMocks';
 const routes = ['/home','/settings','/account-preferences','/mobileconfig'];
 
 for (const route of routes) {
-  test.describe(`@layout Desktop layout ${route}`, () => {
+  test.describe(`@layout Desktop layout ${route}`, { tag: '@desktop' }, () => {
     test.beforeEach(async ({ page }) => {
-      if (!/desktop/i.test(test.info().project.name)) test.skip();
   await registerMocks(page, { authenticated: true, customProfiles: [{ id: 'prof_1', name: 'Default' }] });
       await page.goto(route);
     });
diff --git a/app/src/__tests__/e2e/layout/faq-expand-scroll.spec.ts b/app/src/__tests__/e2e/layout/faq-expand-scroll.spec.ts
index fb7c815d..6a224475 100644
--- a/app/src/__tests__/e2e/layout/faq-expand-scroll.spec.ts
+++ b/app/src/__tests__/e2e/layout/faq-expand-scroll.spec.ts
@@ -4,7 +4,6 @@ import { registerMocks } from '../../mocks/registerMocks';
 // Expanding an FAQ answer while scrolled must keep the viewport where it is.
 // Mobile projects only: the report is a phone-viewport regression.
 
-const MOBILE_PROJECTS = ['chromium-mobile-dark', 'iphone15pro-dark'];
 const LAST_QUESTION = 'Do you support 2FA?';
 // Height transition is 300ms; give layout time to settle before measuring.
 const SETTLE_MS = 600;
@@ -21,12 +20,7 @@ async function openFaqScrolledToLastQuestion(page: Page) {
     return { lastQuestion, scrollYBefore };
 }
 
-test.describe('FAQ expand keeps scroll position', () => {
-    // eslint-disable-next-line no-empty-pattern
-    test.beforeEach(async ({}, testInfo) => {
-        test.skip(!MOBILE_PROJECTS.includes(testInfo.project.name), 'mobile projects only');
-    });
-
+test.describe('FAQ expand keeps scroll position', { tag: '@mobile' }, () => {
     test('expanding the last answer does not move the viewport', async ({ page }) => {
         const { lastQuestion, scrollYBefore } = await openFaqScrolledToLastQuestion(page);
         await lastQuestion.click();
diff --git a/app/src/__tests__/e2e/layout/layout.spec.ts b/app/src/__tests__/e2e/layout/layout.spec.ts
index e36ec95d..6a16f93d 100644
--- a/app/src/__tests__/e2e/layout/layout.spec.ts
+++ b/app/src/__tests__/e2e/layout/layout.spec.ts
@@ -2,9 +2,9 @@ import { test, expect } from '@playwright/test';
 import { registerMocks } from '../../mocks/registerMocks';
 import { expectNoHorizontalOverflow, expectVisibleAndInViewport, collectTapTargetViolations } from '../utils/layoutAssertions';
 
-test.describe('@layout Mobile layout basics', () => {
-  test.beforeEach(() => {
-    if (test.info().project.name !== 'chromium-mobile') test.skip();
+test.describe('@layout Mobile layout basics', { tag: '@android' }, () => {
+  test.beforeEach(async ({ page }) => {
+    await registerMocks(page, { authenticated: true, customProfiles: [{ id: 'prof_1', name: 'Default' }] });
   });
   test('home layout: no overflow (nav optional)', async ({ page }) => {
     await page.goto('/home');
@@ -48,9 +48,8 @@ test.describe('@layout Mobile layout basics', () => {
   });
 });
 
-test.describe('@layout Dark mode smoke', () => {
+test.describe('@layout Dark mode smoke', { tag: '@android' }, () => {
   test('login renders in dark mode', async ({ page }) => {
-    if (test.info().project.name !== 'chromium-mobile-dark') test.skip();
   // Ensure consistent unauthenticated state so login page mounts immediately without lingering loading.
   await registerMocks(page, { authenticated: false });
   await page.goto('/login');
diff --git a/app/src/__tests__/e2e/layout/logs-ios.spec.ts b/app/src/__tests__/e2e/layout/logs-ios.spec.ts
index 55b3cb95..03d55cfb 100644
--- a/app/src/__tests__/e2e/layout/logs-ios.spec.ts
+++ b/app/src/__tests__/e2e/layout/logs-ios.spec.ts
@@ -1,10 +1,8 @@
 import { test, expect } from '@playwright/test';
 import { registerMocks } from '../../mocks/registerMocks';
 
-(test.describe as typeof test.describe)('@layout @ios Logs iOS visibility', () => {
+test.describe('@layout Logs iOS visibility', { tag: '@ios' }, () => {
   test('renders logs page structure on iPhone', async ({ page }) => {
-    test.skip(!/iphone15pro/i.test(test.info().project.name), 'Only run on iPhone project');
-
   await registerMocks(page, { authenticated: true, customProfiles: [{ id: 'prof1', profile_id: 'prof1', name: 'Default', settings: { custom_rules: [], logs: { enabled: true } } }], extraRoutes: async (p) => {
       await p.route('**/api/v1/profiles/prof1/logs*', route => route.fulfill({ status: 200, contentType: 'application/json', body: JSON.stringify([]) }));
     } });
@@ -16,8 +14,6 @@ import { registerMocks } from '../../mocks/registerMocks';
   });
 
   test('search placeholder fits the input on iPhone', async ({ page }) => {
-    test.skip(!/iphone15pro/i.test(test.info().project.name), 'Only run on iPhone project');
-
   await registerMocks(page, { authenticated: true, customProfiles: [{ id: 'prof1', profile_id: 'prof1', name: 'Default', settings: { custom_rules: [], logs: { enabled: true } } }], extraRoutes: async (p) => {
       await p.route('**/api/v1/profiles/prof1/logs*', route => route.fulfill({ status: 200, contentType: 'application/json', body: JSON.stringify([]) }));
     } });
diff --git a/app/src/__tests__/e2e/layout/mobile-header-transition.spec.ts b/app/src/__tests__/e2e/layout/mobile-header-transition.spec.ts
index 9738acef..1b9bd7a6 100644
--- a/app/src/__tests__/e2e/layout/mobile-header-transition.spec.ts
+++ b/app/src/__tests__/e2e/layout/mobile-header-transition.spec.ts
@@ -8,9 +8,8 @@ import { registerMocks } from '../../mocks/registerMocks';
 // Playwright cannot simulate the URL-bar collapse itself, so this is a regression
 // guard on the mechanism: the wrapper must not transition `all` or any geometry
 // property on mobile viewports.
-test.describe('@layout mobile header wrapper transition', () => {
-  test.beforeEach(async ({ page, isMobile }) => {
-    test.skip(!isMobile, 'mobile-only regression guard');
+test.describe('@layout mobile header wrapper transition', { tag: '@mobile' }, () => {
+  test.beforeEach(async ({ page }) => {
     await registerMocks(page, { authenticated: true });
   });
 
diff --git a/app/src/__tests__/e2e/layout/mobile-horizontal-overflow.spec.ts b/app/src/__tests__/e2e/layout/mobile-horizontal-overflow.spec.ts
index 439fb5df..f65e8120 100644
--- a/app/src/__tests__/e2e/layout/mobile-horizontal-overflow.spec.ts
+++ b/app/src/__tests__/e2e/layout/mobile-horizontal-overflow.spec.ts
@@ -47,16 +47,7 @@ async function performRouteInteractions(route: string, page: import('@playwright
   }
 }
 
-function isMobileProject(name?: string) {
-  return !!name && /(chromium-mobile|iphone15pro)/i.test(name);
-}
-
-test.describe('@layout mobile horizontal overflow ALL PAGES', () => {
-  // eslint-disable-next-line no-empty-pattern
-  test.beforeEach(async ({}, testInfo) => {
-    if (!isMobileProject(testInfo.project.name)) test.skip();
-  });
-
+test.describe('@layout mobile horizontal overflow ALL PAGES', { tag: '@mobile' }, () => {
   for (const route of PUBLIC_ROUTES) {
     test(`public route no-overflow: ${route}`, async ({ page }) => {
       await registerMocks(page, { authenticated: false });
diff --git a/app/src/__tests__/e2e/layout/mobile-nav-scroll.spec.ts b/app/src/__tests__/e2e/layout/mobile-nav-scroll.spec.ts
index 931b1c92..b01e02fc 100644
--- a/app/src/__tests__/e2e/layout/mobile-nav-scroll.spec.ts
+++ b/app/src/__tests__/e2e/layout/mobile-nav-scroll.spec.ts
@@ -4,17 +4,7 @@ import { registerMocks } from '../../mocks/registerMocks';
 // This test ensures the mobile navigation drawer is vertically scrollable in landscape mode
 // and that the last interactive element (support button) can be brought into view.
 
-// Some projects in config have suffixes like -dark; match loosely
-function isMobileLike(name?: string) {
-  return !!name && /(chromium-mobile|iphone15pro)/i.test(name);
-}
-
-test.describe('@layout mobile nav scrollability', () => {
-  // eslint-disable-next-line no-empty-pattern
-  test.beforeEach(async ({}, testInfo) => {
-    if (!isMobileLike(testInfo.project.name)) test.skip();
-  });
-
+test.describe('@layout mobile nav scrollability', { tag: '@mobile' }, () => {
   test('navigation menu scrolls to bottom in landscape', async ({ page }) => {
   await registerMocks(page, { authenticated: true, customProfiles: [{ id: 'p1', profile_id: 'p1', name: 'Default', settings: { logs: { enabled: true }, custom_rules: [] } }] });
     await page.goto('/home');
diff --git a/app/src/__tests__/e2e/layout/mobileHeaderTitle.spec.ts b/app/src/__tests__/e2e/layout/mobileHeaderTitle.spec.ts
index a3cfd9bf..06c005c6 100644
--- a/app/src/__tests__/e2e/layout/mobileHeaderTitle.spec.ts
+++ b/app/src/__tests__/e2e/layout/mobileHeaderTitle.spec.ts
@@ -1,18 +1,10 @@
 import { test, expect } from '@playwright/test';
 import { registerMocks } from '../../mocks/registerMocks';
 
-// Skip on desktop-like projects by inspecting project name heuristically
-// (Adjust condition if specific project names are defined in playwright.config)
-const desktopIndicators = ['chromium-desktop', 'firefox-desktop', 'webkit-desktop'];
-const shouldSkip = (projectName?: string) => !!projectName && desktopIndicators.some(ind => projectName.includes(ind));
-
-test.describe('Mobile Header Page Title', () => {
+test.describe('Mobile Header Page Title', { tag: '@mobile' }, () => {
   test.use({ viewport: { width: 430, height: 900 } });
 
-  test.beforeEach(async ({ page }, testInfo) => {
-    if (shouldSkip(testInfo.project.name)) {
-      test.skip(true, 'Skipping mobile-only header title test on desktop project');
-    }
+  test.beforeEach(async ({ page }) => {
     await registerMocks(page, {
       authenticated: true,
       customProfiles: [{ id: 'prof1', profile_id: 'prof1', name: 'Default' }]
diff --git a/app/src/__tests__/e2e/layout/navigation-visibility.spec.ts b/app/src/__tests__/e2e/layout/navigation-visibility.spec.ts
index 76d4268c..26734c44 100644
--- a/app/src/__tests__/e2e/layout/navigation-visibility.spec.ts
+++ b/app/src/__tests__/e2e/layout/navigation-visibility.spec.ts
@@ -3,15 +3,13 @@ import { registerMocks } from '../../mocks/registerMocks';
 const NAV_SELECTOR = '[data-testid="main-navigation"]';
 
 test.describe('@layout Navigation visibility responsive behaviour', () => {
-  test('is hidden on mobile viewport', async ({ page }) => {
-    test.skip(test.info().project.name.includes('desktop'), 'Skip on desktop project');
+  test('is hidden on mobile viewport', { tag: '@mobile' }, async ({ page }) => {
   await registerMocks(page, { authenticated: true, customProfiles: [{ id: 'prof1', name: 'Default', uuid: 'prof1' }] });
     await page.goto('/setup');
     await expect(page.locator(NAV_SELECTOR)).toHaveCount(0);
   });
 
-  test('is visible on desktop viewport', async ({ page }) => {
-    test.skip(!test.info().project.name.includes('desktop'), 'Run only on desktop project');
+  test('is visible on desktop viewport', { tag: '@desktop' }, async ({ page }) => {
   await registerMocks(page, { authenticated: true, customProfiles: [{ id: 'prof1', name: 'Default', uuid: 'prof1' }] });
     await page.goto('/setup');
     const nav = page.locator(NAV_SELECTOR);
diff --git a/app/src/__tests__/e2e/layout/protected-pages-ios.spec.ts b/app/src/__tests__/e2e/layout/protected-pages-ios.spec.ts
index c981d36e..7b659ecc 100644
--- a/app/src/__tests__/e2e/layout/protected-pages-ios.spec.ts
+++ b/app/src/__tests__/e2e/layout/protected-pages-ios.spec.ts
@@ -1,15 +1,7 @@
 import { test, expect } from "@playwright/test";
 import { registerMocks } from "../../mocks/registerMocks";
 
-test.describe("Protected pages – iOS rendering", () => {
-  // eslint-disable-next-line no-empty-pattern
-  test.beforeEach(async ({}, testInfo) => {
-    test.skip(
-      testInfo.project.name !== "iphone15pro-dark",
-      "iPhone 15 Pro only"
-    );
-  });
-
+test.describe("Protected pages – iOS rendering", { tag: "@ios" }, () => {
   test("Settings renders on iOS", async ({ page }) => {
     await registerMocks(page, { authenticated: true });
     await page.goto("/settings");
diff --git a/app/src/__tests__/e2e/layout/responsive-navigation.spec.ts b/app/src/__tests__/e2e/layout/responsive-navigation.spec.ts
index 60e34561..68919da6 100644
--- a/app/src/__tests__/e2e/layout/responsive-navigation.spec.ts
+++ b/app/src/__tests__/e2e/layout/responsive-navigation.spec.ts
@@ -22,12 +22,10 @@ const getHeaderBar = (page: Page) => page.getByTestId('app-header-bar');
 
 // NOTE: We rely on data-testid="app-header-bar" set in mobile header only.
 
-// Only run on chromium-desktop project to leverage viewport resizing; skip mobile projects with fixed device descriptors
-// (project name check similar to existing responsive.spec)
+// Desktop only: viewport resizing needs a project without a fixed device descriptor.
 
-test.describe('@layout responsive navigation (navDesktop)', () => {
+test.describe('@layout responsive navigation (navDesktop)', { tag: '@desktop' }, () => {
   test.beforeEach(async ({ page }) => {
-    if (test.info().project.name !== 'chromium-desktop') test.skip();
     await ensureAuthed(page);
   });
 
diff --git a/app/src/__tests__/e2e/layout/responsive.spec.ts b/app/src/__tests__/e2e/layout/responsive.spec.ts
index 72ba946d..89972b33 100644
--- a/app/src/__tests__/e2e/layout/responsive.spec.ts
+++ b/app/src/__tests__/e2e/layout/responsive.spec.ts
@@ -18,9 +18,8 @@ async function getMainContainerWidths(page: Page) {
   });
 }
 
-test.describe('@layout Responsive layout matrix', () => {
+test.describe('@layout Responsive layout matrix', { tag: '@desktop' }, () => {
   test('home adapts across breakpoints (mobile + desktop)', async ({ page }) => {
-    if (test.info().project.name !== 'chromium-desktop') test.skip();
     for (const width of BREAKPOINTS) {
       await page.setViewportSize({ width, height: 900 });
       await page.goto('/home');
diff --git a/app/src/__tests__/e2e/layout/setup-guide-scroll.spec.ts b/app/src/__tests__/e2e/layout/setup-guide-scroll.spec.ts
index a09a1bbe..bae6de55 100644
--- a/app/src/__tests__/e2e/layout/setup-guide-scroll.spec.ts
+++ b/app/src/__tests__/e2e/layout/setup-guide-scroll.spec.ts
@@ -4,14 +4,7 @@ import { AUTH_KEY } from '@/lib/consts';
 
 // Verifies the setup guide overlay/panel is scrollable in mobile landscape.
 
-test.describe('@layout setup guide scrollability', () => {
-  // eslint-disable-next-line no-empty-pattern
-  test.beforeEach(async ({}, testInfo) => {
-    // Only run on mobile-like projects (naming pattern from config)
-    if (!/(chromium-mobile|iphone15pro)/i.test(testInfo.project.name)) test.skip();
-    if (/iphone15pro/i.test(testInfo.project.name)) { test.skip(); }
-  });
-
+test.describe('@layout setup guide scrollability', { tag: '@android' }, () => {
   test('setup guide overlay scrolls to bottom in landscape', async ({ page }) => {
   await registerMocks(page, { authenticated: true, customProfiles: [{ id: 'p1', profile_id: 'p1', name: 'Default', settings: { logs: { enabled: true }, custom_rules: [] } }] });
     await page.goto('/setup');
diff --git a/app/src/__tests__/e2e/layout/setup-ios.spec.ts b/app/src/__tests__/e2e/layout/setup-ios.spec.ts
index 00e261d2..35175ee3 100644
--- a/app/src/__tests__/e2e/layout/setup-ios.spec.ts
+++ b/app/src/__tests__/e2e/layout/setup-ios.spec.ts
@@ -1,10 +1,8 @@
 import { test, expect } from '@playwright/test';
 import { registerMocks } from '../../mocks/registerMocks';
 
-(test.describe as typeof test.describe)('@layout @ios Setup iOS visibility', () => {
+test.describe('@layout Setup iOS visibility', { tag: '@ios' }, () => {
   test('renders setup page content on iPhone', async ({ page }) => {
-    test.skip(!/iphone15pro/i.test(test.info().project.name), 'Only run on iPhone project');
-
   await registerMocks(page, { authenticated: true, customProfiles: [{ id: 'prof1', profile_id: 'prof1', name: 'Default', settings: { custom_rules: [] } }] });
 
     await page.goto('/setup');
diff --git a/app/src/__tests__/e2e/layout/setup-linux-dnscrypt.spec.ts b/app/src/__tests__/e2e/layout/setup-linux-dnscrypt.spec.ts
index 81d9225f..abb4a749 100644
--- a/app/src/__tests__/e2e/layout/setup-linux-dnscrypt.spec.ts
+++ b/app/src/__tests__/e2e/layout/setup-linux-dnscrypt.spec.ts
@@ -6,10 +6,8 @@ import { registerMocks } from '../../mocks/registerMocks';
 // device id, so a single fixture is enough.
 const STAMP_DOH = 'sdns://AgcAAAAAAAAAAA0xLjEuMS4xAA5kbnMubW9kZG5zLm5ldBYvZG5zLXF1ZXJ5L2FiYzEyM2RlZjQ';
 
-(test.describe as typeof test.describe)('@layout @desktop Setup → Linux → dnscrypt-proxy tab', () => {
+test.describe('@layout Setup → Linux → dnscrypt-proxy tab', { tag: '@desktop' }, () => {
   test('fetches the DoH stamp and renders a ready-to-paste dnscrypt-proxy.toml block', async ({ page }) => {
-    test.skip(!/-desktop$/i.test(test.info().project.name), 'Run only on *-desktop project');
-
     const calls: Array<{ profile_id?: string; device_id?: string }> = [];
 
     await registerMocks(page, {
diff --git a/app/src/__tests__/e2e/layout/setup-overlay-header-visibility.spec.ts b/app/src/__tests__/e2e/layout/setup-overlay-header-visibility.spec.ts
index 7db3e544..4263e4ec 100644
--- a/app/src/__tests__/e2e/layout/setup-overlay-header-visibility.spec.ts
+++ b/app/src/__tests__/e2e/layout/setup-overlay-header-visibility.spec.ts
@@ -4,14 +4,8 @@ import { AUTH_KEY } from '@/lib/consts';
 
 // Ensures app header remains visible and clickable when setup overlay is open in mobile landscape.
 
-test.describe('@layout setup overlay header visibility', () => {
-  // eslint-disable-next-line no-empty-pattern
-  test.beforeEach(async ({}, testInfo) => {
-    if (!/(chromium-mobile|iphone15pro)/i.test(testInfo.project.name)) test.skip();
-  });
-
+test.describe('@layout setup overlay header visibility', { tag: '@android' }, () => {
   test('header visible above overlay and overlay scrolls', async ({ page }) => {
-    if (/iphone15pro/i.test(test.info().project.name)) test.skip();
     // Strategy: land on public route first so no protected loader / redirect runs before we seed auth + mocks.
     await page.goto('/login');
 
@@ -30,10 +24,8 @@ test.describe('@layout setup overlay header visibility', () => {
     await page.goto('/setup');
     await page.waitForURL(/\/setup$/, { timeout: 10000 });
 
-    // Force a landscape-like viewport only for chromium mobile (iphone preset keeps default to avoid mismatch)
-    if (/chromium-mobile/i.test(test.info().project.name)) {
-      try { await page.setViewportSize({ width: 700, height: 430 }); } catch { /* ignore if not supported */ }
-    }
+    // Force a landscape-like viewport.
+    await page.setViewportSize({ width: 700, height: 430 });
 
     // Open Windows guide
     const windowsCard = page.getByTestId('setup-platform-card-windows');
diff --git a/app/src/__tests__/e2e/layout/setup-overlay-mobile.spec.ts b/app/src/__tests__/e2e/layout/setup-overlay-mobile.spec.ts
index 4e5321cf..b6a60b5f 100644
--- a/app/src/__tests__/e2e/layout/setup-overlay-mobile.spec.ts
+++ b/app/src/__tests__/e2e/layout/setup-overlay-mobile.spec.ts
@@ -1,11 +1,8 @@
 import { test, expect } from '@playwright/test';
 import { registerMocks } from '../../mocks/registerMocks';
 
-(test.describe as typeof test.describe)('@layout @mobile Setup overlay mobile', () => {
+test.describe('@layout Setup overlay mobile', { tag: '@android' }, () => {
   test('opens platform guide in full-screen overlay and can close', async ({ page }) => {
-    if (/iphone15pro/i.test(test.info().project.name)) test.skip();
-    test.skip(/-desktop$/i.test(test.info().project.name), 'Skip on desktop projects');
-
   await registerMocks(page, { authenticated: true, customProfiles: [{ id: 'prof1', profile_id: 'prof1', name: 'Default', settings: { custom_rules: [] } }] });
 
     await page.goto('/setup');
diff --git a/app/src/__tests__/e2e/layout/setup-routers-stamps.spec.ts b/app/src/__tests__/e2e/layout/setup-routers-stamps.spec.ts
index 93c55468..71a4ee30 100644
--- a/app/src/__tests__/e2e/layout/setup-routers-stamps.spec.ts
+++ b/app/src/__tests__/e2e/layout/setup-routers-stamps.spec.ts
@@ -15,10 +15,8 @@ const STAMPS_WITH_DEVICE = {
   doq: 'sdns://BAcAAAAAAAAAABEyMDQuMTEuMTQuMjU6ODUzAB5MaXZpbmctLVJvb20tYWJjMTIzZGVmNC5kbnMubW9kZG5zLm5ldA',
 };
 
-(test.describe as typeof test.describe)('@layout @desktop Setup → Routers → DNS Stamps tab', () => {
+test.describe('@layout Setup → Routers → DNS Stamps tab', { tag: '@desktop' }, () => {
   test('renders three stamps, tooltip toggles, advanced disclosure triggers refetch with device id', async ({ page }) => {
-    test.skip(!/-desktop$/i.test(test.info().project.name), 'Run only on *-desktop project');
-
     // Track how many times the API was called and with which payload so we can
     // assert the debounced refetch actually happened with the device id.
     const calls: Array<{ profile_id?: string; device_id?: string }> = [];
diff --git a/app/src/__tests__/e2e/layout/setup-sidepanel-desktop.spec.ts b/app/src/__tests__/e2e/layout/setup-sidepanel-desktop.spec.ts
index aaf877b0..c723adee 100644
--- a/app/src/__tests__/e2e/layout/setup-sidepanel-desktop.spec.ts
+++ b/app/src/__tests__/e2e/layout/setup-sidepanel-desktop.spec.ts
@@ -1,10 +1,8 @@
 import { test, expect } from '@playwright/test';
 import { registerMocks } from '../../mocks/registerMocks';
 
-(test.describe as typeof test.describe)('@layout @desktop Setup side panel desktop', () => {
+test.describe('@layout Setup side panel desktop', { tag: '@desktop' }, () => {
   test('opens platform guide in side panel on desktop', async ({ page }) => {
-    test.skip(!/-desktop$/i.test(test.info().project.name), 'Run only on *-desktop project');
-
   await registerMocks(page, { authenticated: true, customProfiles: [{ id: 'prof1', profile_id: 'prof1', name: 'Default', settings: { custom_rules: [] } }] });
 
     await page.goto('/setup');
diff --git a/app/src/__tests__/e2e/layout/tap-targets-auth.spec.ts b/app/src/__tests__/e2e/layout/tap-targets-auth.spec.ts
index 60600af1..300df48c 100644
--- a/app/src/__tests__/e2e/layout/tap-targets-auth.spec.ts
+++ b/app/src/__tests__/e2e/layout/tap-targets-auth.spec.ts
@@ -3,7 +3,7 @@ import type { Page } from '@playwright/test';
 import { collectTapTargetViolations } from '../utils/layoutAssertions'; // path corrected one level up
 
 // Auth-specific tap target enforcement for /login and /signup.
-// Runs on chromium-mobile only to keep suite fast.
+// Runs on the Android project only to keep the suite fast.
 
 const MIN_SIZE = 40; // same threshold used elsewhere (visual comfort; actual min-h is 44px via classes)
 
@@ -25,11 +25,7 @@ async function assertNoExcessiveViolations(page: Page, route: string) {
   expect(violations.length).toBeGreaterThanOrEqual(0); // keep assertion
 }
 
-test.describe('@layout Auth tap targets', () => {
-  test.beforeEach(() => {
-    if (test.info().project.name !== 'chromium-mobile') test.skip();
-  });
-
+test.describe('@layout Auth tap targets', { tag: '@android' }, () => {
   test('login page tap targets', async ({ page }) => {
     await assertNoExcessiveViolations(page, '/login');
   });
diff --git a/app/src/__tests__/e2e/layout/tap-targets-protected.spec.ts b/app/src/__tests__/e2e/layout/tap-targets-protected.spec.ts
index 5545ba42..37f9de51 100644
--- a/app/src/__tests__/e2e/layout/tap-targets-protected.spec.ts
+++ b/app/src/__tests__/e2e/layout/tap-targets-protected.spec.ts
@@ -14,14 +14,9 @@ const protectedRoutes = [
   { path: "/faq", name: "FAQ" },
 ];
 
-test.describe("Tap targets – protected pages", () => {
+test.describe("Tap targets – protected pages", { tag: "@mobile" }, () => {
   for (const route of protectedRoutes) {
     test(`${route.name} has adequate tap targets`, async ({ page }) => {
-      test.skip(
-        test.info().project.name === "chromium-desktop",
-        "Mobile-only test"
-      );
-
       await page.goto(route.path);
       await page.waitForLoadState("networkidle");
 
diff --git a/app/src/__tests__/e2e/layout/ultrawide-layout.spec.ts b/app/src/__tests__/e2e/layout/ultrawide-layout.spec.ts
index fa074d03..0940efca 100644
--- a/app/src/__tests__/e2e/layout/ultrawide-layout.spec.ts
+++ b/app/src/__tests__/e2e/layout/ultrawide-layout.spec.ts
@@ -8,9 +8,8 @@ const CLAMP_BASE = 1200; // mirrors DESKTOP_CONTENT_BASE_WIDTH in App.tsx
 const WIDTH_TOLERANCE = 8;
 const EDGE_TOLERANCE = 4;
 
-test.describe('@layout Ultrawide clamp alignment', () => {
+test.describe('@layout Ultrawide clamp alignment', { tag: '@desktop' }, () => {
   test.beforeEach(async ({ page }) => {
-    if (!/desktop/i.test(test.info().project.name)) test.skip();
     await page.setViewportSize(ULTRAWIDE_VIEWPORT);
     await registerMocks(page, { authenticated: true, customProfiles: [{ id: 'prof_1', name: 'Default' }] });
     await page.goto(ROUTE);
diff --git a/app/src/__tests__/e2e/logs/logs-mobile-bottom-header.spec.ts b/app/src/__tests__/e2e/logs/logs-mobile-bottom-header.spec.ts
index 2096dc59..03a6b168 100644
--- a/app/src/__tests__/e2e/logs/logs-mobile-bottom-header.spec.ts
+++ b/app/src/__tests__/e2e/logs/logs-mobile-bottom-header.spec.ts
@@ -21,10 +21,8 @@ const row = (i: number) => ({
     dns_request: { domain: `row-${i}.example.test`, query_type: 'A' },
 });
 
-test.describe('Logs mobile bottom header', () => {
+test.describe('Logs mobile bottom header', { tag: '@ios' }, () => {
     test('app header stays pinned at the bottom of a long list and through a refresh', async ({ page }) => {
-        test.skip(!/iphone15pro/i.test(test.info().project.name), 'Only run on iPhone project');
-
         await registerMocks(page, { authenticated: true, customProfiles: [profile] });
         await page.route(/\/api\/v1\/profiles\/prof1\/logs(\?|$)/i, route => {
             const url = new URL(route.request().url());
diff --git a/app/src/__tests__/e2e/logs/logs-mobile-overflow.spec.ts b/app/src/__tests__/e2e/logs/logs-mobile-overflow.spec.ts
index e390042f..d25e171b 100644
--- a/app/src/__tests__/e2e/logs/logs-mobile-overflow.spec.ts
+++ b/app/src/__tests__/e2e/logs/logs-mobile-overflow.spec.ts
@@ -241,10 +241,8 @@ test.describe('Logs mobile layout', () => {
     await expect(panel).toHaveAttribute('data-expanded', 'false');
   });
 
-  test('mobile: one-time expand hint shows, dismisses after first expand, and stays gone', async ({ page }, testInfo) => {
-    // The hint is mobile-only (md:hidden); skip on desktop projects.
-    test.skip(!/(chromium-mobile|iphone15pro)/i.test(testInfo.project.name), 'mobile-only hint');
-
+  // The hint is mobile-only (md:hidden).
+  test('mobile: one-time expand hint shows, dismisses after first expand, and stays gone', { tag: '@mobile' }, async ({ page }) => {
     await registerMocks(page, {
       authenticated: true,
       customProfiles: [{ id: 'prof1', profile_id: 'prof1', name: 'Default', settings: { logs: { enabled: true } } }]
@@ -311,10 +309,9 @@ test.describe('Logs mobile layout', () => {
     await expect(panel.getByTestId('querylog-detail-query-type')).toHaveText('A, AAAA');
   });
 
-  test('tablet width: meta labels stack vertically and the row has no horizontal overflow', async ({ page }, testInfo) => {
-    // The tablet band (769–1023px) renders the desktop branch at Tailwind `md`. No project sits
-    // there, so drive it on the desktop project with an explicit tablet viewport.
-    test.skip(!/chromium-desktop/i.test(testInfo.project.name), 'tablet-band layout is desktop-branch only');
+  // The tablet band (769–1023px) renders the desktop branch at Tailwind `md`. No project sits
+  // there, so drive it on the desktop project with an explicit tablet viewport.
+  test('tablet width: meta labels stack vertically and the row has no horizontal overflow', { tag: '@desktop' }, async ({ page }) => {
     await page.setViewportSize({ width: 820, height: 1000 });
 
     await registerMocks(page, {
diff --git a/app/src/__tests__/e2e/manual/mobileSnapshots.spec.ts b/app/src/__tests__/e2e/manual/mobileSnapshots.spec.ts
index 340920cd..d8d15c5b 100644
--- a/app/src/__tests__/e2e/manual/mobileSnapshots.spec.ts
+++ b/app/src/__tests__/e2e/manual/mobileSnapshots.spec.ts
@@ -4,8 +4,8 @@ import path from 'node:path';
 import { registerMocks } from '../../mocks/registerMocks';
 
 // Manual mobile snapshot suite.
-// Trigger ONLY via: MOBILE_SNAPSHOTS=1 npm run snapshots:mobile
-// Not included in CI because CI won't set MOBILE_SNAPSHOTS.
+// Trigger ONLY via: npm run snapshots:mobile
+// playwright.config.ts ignores this directory unless MOBILE_SNAPSHOTS=1 is set.
 
 // Order: public first (baseline) then protected pages (should render authenticated views)
 const ROUTES = [
@@ -35,15 +35,10 @@ const PROTECTED_PREFIXES = [
   '/query-logs',
 ];
 
-
-const shouldRun = process.env.MOBILE_SNAPSHOTS === '1';
-
-(shouldRun ? test.describe : test.describe.skip)('Manual mobile full-page snapshots', () => {
+test.describe('Manual mobile full-page snapshots', { tag: '@mobile' }, () => {
   for (const route of ROUTES) {
     test(`snapshot: ${route}`, async ({ page }) => {
       const project = test.info().project.name;
-      // Only run on selected mobile device variants (android baseline + ios baseline)
-      if (!['chromium-mobile', 'iphone15pro'].includes(project)) test.skip();
       const isProtected = PROTECTED_PREFIXES.some(p => route.startsWith(p));
       await registerMocks(page, { authenticated: isProtected });
       await page.goto(route);
@@ -60,7 +55,7 @@ const shouldRun = process.env.MOBILE_SNAPSHOTS === '1';
       // Baseline lives under: <testFile>-snapshots/<pwName>-<project>-linux.png
       const testDir = path.dirname(test.info().file); // path to spec file directory
       const snapshotsDir = path.join(testDir, 'mobile-device-snapshots');
-      const device = project === 'chromium-mobile' ? 'android' : 'ios';
+      const device = project === 'chromium-mobile-dark' ? 'android' : 'ios';
       const targetDir = path.join(snapshotsDir, device);
       fs.mkdirSync(targetDir, { recursive: true });
       // Playwright baseline naming: <spec>-snapshots/<test-title-part>.png
diff --git a/app/src/__tests__/e2e/utils/desktopOnly.ts b/app/src/__tests__/e2e/utils/desktopOnly.ts
deleted file mode 100644
index 1ff7c3b7..00000000
--- a/app/src/__tests__/e2e/utils/desktopOnly.ts
+++ /dev/null
@@ -1,14 +0,0 @@
-/* eslint-disable react-hooks/rules-of-hooks */
-import { test as base } from '@playwright/test';
-
-// Wrap test to skip execution automatically on non-desktop projects.
-export const test = base.extend({
-  page: async ({ page }, use, testInfo) => {
-    if (!testInfo.project.name.includes('desktop')) {
-      testInfo.skip(true, 'Desktop-only auth tests');
-    }
-    await use(page);
-  }
-});
-
-export const desktopOnly = test;
diff --git a/app/src/__tests__/playwright.config.ts b/app/src/__tests__/playwright.config.ts
index 624bacd1..300222bc 100644
--- a/app/src/__tests__/playwright.config.ts
+++ b/app/src/__tests__/playwright.config.ts
@@ -34,6 +34,12 @@ export default defineConfig({
     reuseExistingServer: !process.env.CI,
     timeout: 60_000
   },
+  // The manual snapshot suite only runs when explicitly requested (npm run snapshots:mobile).
+  testIgnore: process.env.MOBILE_SNAPSHOTS === '1' ? [] : [/\/manual\//],
+  // Project scoping is declared with tags, not runtime test.skip() calls (a skipped test
+  // still pays for its browser context). Tags: @desktop (Chromium desktop), @android
+  // (Pixel 5, Chromium), @ios (iPhone 15 Pro, WebKit), @mobile (both mobile projects).
+  // Untagged tests run on every project; a tagged test runs only on the projects named.
   projects: [
     // Auth storage bootstrap project (runs first to produce storageState for dependent projects)
     {
@@ -41,10 +47,24 @@ export default defineConfig({
       testMatch: /auth\.setup\.ts/,
     },
     // Mobile baseline: Pixel 5 (Chromium engine)
-    { name: 'chromium-mobile-dark', use: { ...devices['Pixel 5'], colorScheme: 'dark', storageState: 'src/__tests__/e2e/.auth-storage.json' }, dependencies: ['auth-setup'] },
+    {
+      name: 'chromium-mobile-dark',
+      use: { ...devices['Pixel 5'], colorScheme: 'dark', storageState: 'src/__tests__/e2e/.auth-storage.json' },
+      dependencies: ['auth-setup'],
+      grepInvert: /^(?!.*@(?:android|mobile)\b)(?=.*@(?:desktop|ios)\b)/,
+    },
     // Safari/WebKit coverage: latest supported iPhone (15 Pro) using default WebKit engine
-    { name: 'iphone15pro-dark', use: { ...devices['iPhone 15 Pro'], colorScheme: 'dark', storageState: 'src/__tests__/e2e/.auth-storage.json' }, dependencies: ['auth-setup'] },
+    {
+      name: 'iphone15pro-dark',
+      use: { ...devices['iPhone 15 Pro'], colorScheme: 'dark', storageState: 'src/__tests__/e2e/.auth-storage.json' },
+      dependencies: ['auth-setup'],
+      grepInvert: /^(?!.*@(?:ios|mobile)\b)(?=.*@(?:desktop|android)\b)/,
+    },
     // Desktop without pre-auth storage so login flows can exercise authentication UI
-    { name: 'chromium-desktop', use: { ...devices['Desktop Chrome'] } }
+    {
+      name: 'chromium-desktop',
+      use: { ...devices['Desktop Chrome'] },
+      grepInvert: /^(?!.*@desktop\b)(?=.*@(?:android|ios|mobile)\b)/,
+    },
   ]
 });
\ No newline at end of file

From 9dc7b76d3fa8440f996414337bd9f757e45ff917 Mon Sep 17 00:00:00 2001
From: Maciek <tomczukmaciej@gmail.com>
Date: Tue, 22 Sep 2026 19:35:37 +0200
Subject: [PATCH 04/10] test(app): Run viewport-driven layout specs once per
 engine

Signed-off-by: Maciek <tomczukmaciej@gmail.com>
---
 app/src/__tests__/e2e/layout/blocklists-overflow.spec.ts  | 6 ++++--
 app/src/__tests__/e2e/layout/blocklists-scroll.spec.ts    | 4 +++-
 app/src/__tests__/e2e/layout/content-centering.spec.ts    | 8 +++++---
 app/src/__tests__/e2e/layout/search-focus-ring.spec.ts    | 3 ++-
 .../__tests__/e2e/layout/services-search-shift.spec.ts    | 3 ++-
 app/src/__tests__/e2e/logs/logs-refresh-controls.spec.ts  | 3 ++-
 6 files changed, 18 insertions(+), 9 deletions(-)

diff --git a/app/src/__tests__/e2e/layout/blocklists-overflow.spec.ts b/app/src/__tests__/e2e/layout/blocklists-overflow.spec.ts
index f33c2e43..724505bc 100644
--- a/app/src/__tests__/e2e/layout/blocklists-overflow.spec.ts
+++ b/app/src/__tests__/e2e/layout/blocklists-overflow.spec.ts
@@ -38,8 +38,10 @@ async function registerLongBlocklists(page: import('@playwright/test').Page) {
   });
 }
 
+// These tests set their own viewport, so the project's device descriptor is irrelevant;
+// run once per engine (Chromium desktop + WebKit iPhone) instead of on every project.
 for (const vp of VIEWPORTS) {
-  test.describe(`@layout blocklists overflow (${vp.label})`, () => {
+  test.describe(`@layout blocklists overflow (${vp.label})`, { tag: ['@desktop', '@ios'] }, () => {
     test.beforeEach(async ({ page }) => {
       await registerLongBlocklists(page);
       await page.setViewportSize({ width: vp.width, height: vp.height });
@@ -96,7 +98,7 @@ for (const vp of VIEWPORTS) {
 // so a horizontally-overflowing inner container shows up as clipped content rather than
 // a page scrollbar. This guards against that by asserting that no element extends past
 // the viewport's right edge, across every blocklists tab.
-test.describe('@layout blocklists no inner horizontal overflow', () => {
+test.describe('@layout blocklists no inner horizontal overflow', { tag: ['@desktop', '@ios'] }, () => {
   test.beforeEach(async ({ page }) => {
     await registerMocks(page, { authenticated: true });
     await page.setViewportSize({ width: 390, height: 844 });
diff --git a/app/src/__tests__/e2e/layout/blocklists-scroll.spec.ts b/app/src/__tests__/e2e/layout/blocklists-scroll.spec.ts
index 78ffec98..5035a61b 100644
--- a/app/src/__tests__/e2e/layout/blocklists-scroll.spec.ts
+++ b/app/src/__tests__/e2e/layout/blocklists-scroll.spec.ts
@@ -36,8 +36,10 @@ async function registerBlocklistsWithOverflow(page: import('@playwright/test').P
   });
 }
 
+// These tests set their own viewport, so the project's device descriptor is irrelevant;
+// run once per engine (Chromium desktop + WebKit iPhone) instead of on every project.
 for (const vp of VIEWPORTS) {
-  test.describe(`@layout blocklists scroll reach (${vp.label})`, () => {
+  test.describe(`@layout blocklists scroll reach (${vp.label})`, { tag: ['@desktop', '@ios'] }, () => {
     test.beforeEach(async ({ page }) => {
       await registerBlocklistsWithOverflow(page);
       await page.setViewportSize({ width: vp.width, height: vp.height });
diff --git a/app/src/__tests__/e2e/layout/content-centering.spec.ts b/app/src/__tests__/e2e/layout/content-centering.spec.ts
index 95c631ff..a8288545 100644
--- a/app/src/__tests__/e2e/layout/content-centering.spec.ts
+++ b/app/src/__tests__/e2e/layout/content-centering.spec.ts
@@ -21,7 +21,9 @@ const VIEWPORTS = [
 
 const PROTECTED_ROUTES = ['/setup', '/blocklists', '/home', '/settings', '/custom-rules', '/query-logs'];
 
-test.describe('@layout Content centering - body styles', () => {
+// These tests set their own viewport, so the project's device descriptor is irrelevant;
+// run once per engine (Chromium desktop + WebKit iPhone) instead of on every project.
+test.describe('@layout Content centering - body styles', { tag: ['@desktop', '@ios'] }, () => {
   test('body element should not have centering flex styles', async ({ page }) => {
     await registerMocks(page, { authenticated: true });
     await page.goto('/setup');
@@ -72,7 +74,7 @@ test.describe('@layout Content centering - body styles', () => {
   });
 });
 
-test.describe('@layout Content centering - app content area', () => {
+test.describe('@layout Content centering - app content area', { tag: ['@desktop', '@ios'] }, () => {
   test.beforeEach(async ({ page }) => {
     await registerMocks(page, { authenticated: true });
   });
@@ -107,7 +109,7 @@ test.describe('@layout Content centering - app content area', () => {
   }
 });
 
-test.describe('@layout Content centering - symmetric margins', () => {
+test.describe('@layout Content centering - symmetric margins', { tag: ['@desktop', '@ios'] }, () => {
   test.beforeEach(async ({ page }) => {
     await registerMocks(page, { authenticated: true });
   });
diff --git a/app/src/__tests__/e2e/layout/search-focus-ring.spec.ts b/app/src/__tests__/e2e/layout/search-focus-ring.spec.ts
index e01e6f6f..a7c0b85f 100644
--- a/app/src/__tests__/e2e/layout/search-focus-ring.spec.ts
+++ b/app/src/__tests__/e2e/layout/search-focus-ring.spec.ts
@@ -20,7 +20,8 @@ const CASES = [
 
 for (const c of CASES) {
   for (const vp of c.viewports) {
-    test.describe(`@layout search focus ring ${c.path} (${vp.tag})`, () => {
+    // Sets its own viewport: run once per engine.
+    test.describe(`@layout search focus ring ${c.path} (${vp.tag})`, { tag: ['@desktop', '@ios'] }, () => {
       test.beforeEach(async ({ page }) => {
         await registerMocks(page, {
           authenticated: true,
diff --git a/app/src/__tests__/e2e/layout/services-search-shift.spec.ts b/app/src/__tests__/e2e/layout/services-search-shift.spec.ts
index b4f87f61..e2d2bed8 100644
--- a/app/src/__tests__/e2e/layout/services-search-shift.spec.ts
+++ b/app/src/__tests__/e2e/layout/services-search-shift.spec.ts
@@ -21,7 +21,8 @@ function makeServices(n: number) {
   }));
 }
 
-test.describe('@layout services search bar layout stability', () => {
+// Sets its own viewport: run once per engine (WebKit is where the bug reproduced).
+test.describe('@layout services search bar layout stability', { tag: ['@desktop', '@ios'] }, () => {
   test('search bar width is stable across ALL / BLOCKED / UNBLOCKED filters', async ({ page }) => {
     // No blocked services: clicking BLOCKED renders the empty state (fewest
     // cards) — the strongest trigger for the content column to collapse.
diff --git a/app/src/__tests__/e2e/logs/logs-refresh-controls.spec.ts b/app/src/__tests__/e2e/logs/logs-refresh-controls.spec.ts
index 81716325..b93b0a32 100644
--- a/app/src/__tests__/e2e/logs/logs-refresh-controls.spec.ts
+++ b/app/src/__tests__/e2e/logs/logs-refresh-controls.spec.ts
@@ -39,7 +39,8 @@ const visibleControl = (page: Page, testId: string) =>
     page.locator(`[data-testid="${testId}"]:visible`);
 
 test.describe('Logs refresh controls', () => {
-    test('split button halves stay equal height at tablet width', async ({ page }) => {
+    // Sets its own viewport: run once per engine.
+    test('split button halves stay equal height at tablet width', { tag: ['@desktop', '@ios'] }, async ({ page }) => {
         // The Button default size carries sm:h-9, which silently shrinks the interval
         // trigger below the icon half on 640-1024px viewports unless pinned.
         await page.setViewportSize({ width: 834, height: 1112 });

From 645fccccedf7379a2590c1f37d21949c3aff913d Mon Sep 17 00:00:00 2001
From: Maciek <tomczukmaciej@gmail.com>
Date: Tue, 22 Sep 2026 19:35:52 +0200
Subject: [PATCH 05/10] test(app): Pin the backup-restore flows to the desktop
 project

Signed-off-by: Maciek <tomczukmaciej@gmail.com>
---
 .../__tests__/e2e/account/backup-restore.spec.ts    | 13 +++++++------
 1 file changed, 7 insertions(+), 6 deletions(-)

diff --git a/app/src/__tests__/e2e/account/backup-restore.spec.ts b/app/src/__tests__/e2e/account/backup-restore.spec.ts
index a655220b..9c84c008 100644
--- a/app/src/__tests__/e2e/account/backup-restore.spec.ts
+++ b/app/src/__tests__/e2e/account/backup-restore.spec.ts
@@ -100,7 +100,8 @@ async function uploadJsonToDropzone(page: import('@playwright/test').Page, paylo
 // Test 1: Happy-path export — specRef E1, E13-E15
 // ---------------------------------------------------------------------------
 
-test.describe('Backup & Restore — Export', () => {
+// Dialog flows are engine-agnostic; run them once, on the desktop project.
+test.describe('Backup & Restore — Export', { tag: '@desktop' }, () => {
     test('happy-path export triggers file download', async ({ page }) => {
         await setupBaseMocks(page);
 
@@ -172,7 +173,7 @@ test.describe('Backup & Restore — Export', () => {
 // Test 2: Happy-path import — specRef I1, I4, I19-I20
 // ---------------------------------------------------------------------------
 
-test.describe('Backup & Restore — Import', () => {
+test.describe('Backup & Restore — Import', { tag: '@desktop' }, () => {
     test('happy-path import shows results in step 3 and Done closes dialog', async ({ page }) => {
         await setupBaseMocks(page);
 
@@ -319,10 +320,10 @@ test.describe('Backup & Restore — Import', () => {
     // action buttons off-screen because DialogBody dropped its height cap at >=640px
     // wide (sm:max-h-none). On a short-but-wide viewport the header + submit button
     // must stay in view, with the body scrolling internally.
-    test('import confirm step stays within a short laptop viewport (no cutoff)', async ({ page }) => {
-        // Short-but-wide viewport ~ a 13" laptop content area. Layout bugs like this
-        // are engine-specific — running this under the WebKit (iphone15pro-dark)
-        // project exercises the engine that shifts where Chromium does not.
+    // Short-but-wide viewport ~ a 13" laptop content area. Layout bugs like this
+    // are engine-specific — the extra @ios tag also runs it under WebKit, the
+    // engine that shifts where Chromium does not.
+    test('import confirm step stays within a short laptop viewport (no cutoff)', { tag: '@ios' }, async ({ page }) => {
         await page.setViewportSize({ width: 1000, height: 560 });
 
         await setupBaseMocks(page);

From 8d73cf4863fab66212e83fbe71128ede34f0c4a6 Mon Sep 17 00:00:00 2001
From: Maciek <tomczukmaciej@gmail.com>
Date: Tue, 22 Sep 2026 19:36:07 +0200
Subject: [PATCH 06/10] test(app): Merge the route smoke suites into one
 per-route pass

Signed-off-by: Maciek <tomczukmaciej@gmail.com>
---
 .../e2e/layout/desktop-layout.spec.ts         |  30 ----
 app/src/__tests__/e2e/layout/layout.spec.ts   |  66 ---------
 .../layout/mobile-horizontal-overflow.spec.ts |  74 ----------
 .../e2e/layout/protected-pages-ios.spec.ts    |  32 -----
 .../e2e/layout/protected-pages.spec.ts        |  39 -----
 .../e2e/layout/public-layout.spec.ts          |  33 -----
 .../__tests__/e2e/layout/route-smoke.spec.ts  | 135 ++++++++++++++++++
 .../e2e/layout/tap-targets-auth.spec.ts       |  36 -----
 .../e2e/layout/tap-targets-protected.spec.ts  |  37 -----
 .../__tests__/e2e/utils/layoutAssertions.ts   |  18 ---
 10 files changed, 135 insertions(+), 365 deletions(-)
 delete mode 100644 app/src/__tests__/e2e/layout/desktop-layout.spec.ts
 delete mode 100644 app/src/__tests__/e2e/layout/layout.spec.ts
 delete mode 100644 app/src/__tests__/e2e/layout/mobile-horizontal-overflow.spec.ts
 delete mode 100644 app/src/__tests__/e2e/layout/protected-pages-ios.spec.ts
 delete mode 100644 app/src/__tests__/e2e/layout/protected-pages.spec.ts
 delete mode 100644 app/src/__tests__/e2e/layout/public-layout.spec.ts
 create mode 100644 app/src/__tests__/e2e/layout/route-smoke.spec.ts
 delete mode 100644 app/src/__tests__/e2e/layout/tap-targets-auth.spec.ts
 delete mode 100644 app/src/__tests__/e2e/layout/tap-targets-protected.spec.ts

diff --git a/app/src/__tests__/e2e/layout/desktop-layout.spec.ts b/app/src/__tests__/e2e/layout/desktop-layout.spec.ts
deleted file mode 100644
index 69ae6c65..00000000
--- a/app/src/__tests__/e2e/layout/desktop-layout.spec.ts
+++ /dev/null
@@ -1,30 +0,0 @@
-import { test, expect } from '@playwright/test';
-import { registerMocks } from '../../mocks/registerMocks';
-
-const routes = ['/home','/settings','/account-preferences','/mobileconfig'];
-
-for (const route of routes) {
-  test.describe(`@layout Desktop layout ${route}`, { tag: '@desktop' }, () => {
-    test.beforeEach(async ({ page }) => {
-  await registerMocks(page, { authenticated: true, customProfiles: [{ id: 'prof_1', name: 'Default' }] });
-      await page.goto(route);
-    });
-
-    test('no horizontal overflow & right edge aligned', async ({ page }) => {
-      await page.waitForSelector('[data-testid="app-content"]', { timeout: 5000 });
-      const result = await page.evaluate(() => {
-        const el = document.querySelector('[data-testid="app-content"]');
-        const doc = document.documentElement;
-        if (!el) return null;
-        const rect = (el as HTMLElement).getBoundingClientRect();
-        const hasOverflow = doc.scrollWidth > doc.clientWidth + 1;
-        return { right: rect.right, left: rect.left, viewport: doc.clientWidth, hasOverflow };
-      });
-      expect(result, 'Content container missing').not.toBeNull();
-      if (!result) return;
-      expect(result.hasOverflow, 'No horizontal overflow expected').toBeFalsy();
-      expect(Math.abs(result.viewport - result.right)).toBeLessThanOrEqual(1);
-      expect(result.left).toBeGreaterThanOrEqual(0);
-    });
-  });
-}
diff --git a/app/src/__tests__/e2e/layout/layout.spec.ts b/app/src/__tests__/e2e/layout/layout.spec.ts
deleted file mode 100644
index 6a16f93d..00000000
--- a/app/src/__tests__/e2e/layout/layout.spec.ts
+++ /dev/null
@@ -1,66 +0,0 @@
-import { test, expect } from '@playwright/test';
-import { registerMocks } from '../../mocks/registerMocks';
-import { expectNoHorizontalOverflow, expectVisibleAndInViewport, collectTapTargetViolations } from '../utils/layoutAssertions';
-
-test.describe('@layout Mobile layout basics', { tag: '@android' }, () => {
-  test.beforeEach(async ({ page }) => {
-    await registerMocks(page, { authenticated: true, customProfiles: [{ id: 'prof_1', name: 'Default' }] });
-  });
-  test('home layout: no overflow (nav optional)', async ({ page }) => {
-    await page.goto('/home');
-    await expectNoHorizontalOverflow(page);
-    const navCount = await page.getByRole('navigation').count();
-    if (navCount > 0) {
-      await expectVisibleAndInViewport(page, 'navigation', /.*/);
-    }
-  });
-
-  test('tap targets sized adequately on home', async ({ page }) => {
-    await page.goto('/home');
-    const violations = await collectTapTargetViolations(page, 40);
-    const strict = process.env.STRICT_MOBILE === '1';
-    const softLimit = parseInt(process.env.TAP_TARGET_SOFT_LIMIT || '4', 10);
-    const strictLimit = parseInt(process.env.TAP_TARGET_STRICT_LIMIT || '0', 10);
-    const limit = strict ? strictLimit : softLimit;
-    if (violations.length >= limit + 1) {
-      const details = violations.map(v => `${v.index}:${v.size.w.toFixed(0)}x${v.size.h.toFixed(0)}:'${v.text}'`).join(', ');
-      if (strict) {
-        expect(violations.length, `Tap target violations (index:WxH:'text'): ${details}`).toBeLessThanOrEqual(limit);
-      } else {
-        console.warn(`Soft tap target warning (${violations.length} > ${limit}) -> ${details}`);
-      }
-    }
-    expect(violations.length).toBeGreaterThanOrEqual(0);
-  });
-
-  test('orientation change layout sanity', async ({ page }) => {
-    await page.goto('/home');
-    await page.setViewportSize({ width: 740, height: 360 });
-    const nav = page.getByRole('navigation');
-    if (await nav.count() > 0) {
-      try {
-        await expect(nav).toBeVisible({ timeout: 3000 });
-      } catch (e) {
-        if (process.env.STRICT_MOBILE === '1') throw e;
-        console.warn('[SOFT] nav not visible after orientation change');
-      }
-    }
-  });
-});
-
-test.describe('@layout Dark mode smoke', { tag: '@android' }, () => {
-  test('login renders in dark mode', async ({ page }) => {
-  // Ensure consistent unauthenticated state so login page mounts immediately without lingering loading.
-  await registerMocks(page, { authenticated: false });
-  await page.goto('/login');
-    // Wait (soft) for potential loading screen to disappear to avoid flakiness in CI
-  const loading = page.getByTestId('loading-screen');
-  await expect(loading).toHaveCount(0, { timeout: 3000 });
-  // In some CI/headless environments WebAuthn feature detection may return false,
-  // causing the initial mode to be password-first (button shows "Login with passkey").
-  // Locally (or when WebAuthn is supported) initial passkey mode may be enabled so the
-  // toggle button shows "Login with password". Accept either label to keep the test deterministic.
-  // Use stable test id instead of variant text label
-  await expect(page.getByTestId('btn-login-toggle-mode')).toBeVisible();
-  });
-});
diff --git a/app/src/__tests__/e2e/layout/mobile-horizontal-overflow.spec.ts b/app/src/__tests__/e2e/layout/mobile-horizontal-overflow.spec.ts
deleted file mode 100644
index f65e8120..00000000
--- a/app/src/__tests__/e2e/layout/mobile-horizontal-overflow.spec.ts
+++ /dev/null
@@ -1,74 +0,0 @@
-import { test } from '@playwright/test';
-import { registerMocks } from '../../mocks/registerMocks';
-import { expectNoHorizontalOverflow } from '../utils/layoutAssertions';
-
-// Comprehensive mobile horizontal overflow guard.
-// Runs only on explicitly mobile projects (chromium-mobile, iphone15pro) to keep suite lean.
-// Covers both public and protected routes + key interactions that could introduce overflow.
-
-const PUBLIC_ROUTES = ['/','/login','/signup','/reset-password','/tos','/privacy','/faq'];
-const PROTECTED_ROUTES = ['/home','/setup','/settings','/blocklists','/custom-rules','/account-preferences','/mobileconfig','/query-logs'];
-
-// Interactions per route to surface latent overflow after dynamic UI changes.
-async function performRouteInteractions(route: string, page: import('@playwright/test').Page) {
-  // Global: if bottom nav "More" button exists, open & close nav overlay
-  const moreBtn = page.getByTestId('bottom-nav').getByRole('button', { name: /more/i });
-  if (await moreBtn.count()) {
-    await moreBtn.first().click();
-    // Close via clicking backdrop area
-    await page.mouse.click(10, 10);
-    await expectNoHorizontalOverflow(page);
-  }
-
-  if (route === '/blocklists') {
-  // (Skipped dialog open/close due to overlay interception flakiness on mobile automation) – overflow already asserted.
-  }
-
-  if (route === '/query-logs') {
-    // Expand first timestamp toggle if present to test card height shift
-    const logCards = page.locator('[data-testid="query-log-card"]');
-    if (await logCards.count()) {
-      // Click timestamp area if it has a button
-      const tsBtn = logCards.first().getByRole('button');
-      if (await tsBtn.count()) {
-        await tsBtn.first().click();
-        await expectNoHorizontalOverflow(page);
-      }
-    }
-  }
-
-  if (route === '/custom-rules') {
-    // If add input present, type a value (no submit to avoid backend side-effects beyond mocks)
-    const input = page.getByPlaceholder('Add a domain or IP address');
-    if (await input.count()) {
-      await input.first().fill('example.com');
-      await expectNoHorizontalOverflow(page);
-    }
-  }
-}
-
-test.describe('@layout mobile horizontal overflow ALL PAGES', { tag: '@mobile' }, () => {
-  for (const route of PUBLIC_ROUTES) {
-    test(`public route no-overflow: ${route}`, async ({ page }) => {
-      await registerMocks(page, { authenticated: false });
-      await page.goto(route);
-      await page.waitForLoadState('domcontentloaded');
-      await expectNoHorizontalOverflow(page);
-      await performRouteInteractions(route, page);
-      await expectNoHorizontalOverflow(page);
-    });
-  }
-
-  for (const route of PROTECTED_ROUTES) {
-    test(`protected route no-overflow: ${route}`, async ({ page }) => {
-  await registerMocks(page, { authenticated: true, customProfiles: [{ id: 'prof1', profile_id: 'prof1', name: 'Default', settings: { logs: { enabled: true }, custom_rules: [] } }] });
-      await page.goto(route);
-      await page.waitForLoadState('domcontentloaded');
-      // Wait a moment for layout shifts (fonts, transitions) to settle
-      await page.waitForTimeout(30);
-      await expectNoHorizontalOverflow(page);
-      await performRouteInteractions(route, page);
-      await expectNoHorizontalOverflow(page);
-    });
-  }
-});
diff --git a/app/src/__tests__/e2e/layout/protected-pages-ios.spec.ts b/app/src/__tests__/e2e/layout/protected-pages-ios.spec.ts
deleted file mode 100644
index 7b659ecc..00000000
--- a/app/src/__tests__/e2e/layout/protected-pages-ios.spec.ts
+++ /dev/null
@@ -1,32 +0,0 @@
-import { test, expect } from "@playwright/test";
-import { registerMocks } from "../../mocks/registerMocks";
-
-test.describe("Protected pages – iOS rendering", { tag: "@ios" }, () => {
-  test("Settings renders on iOS", async ({ page }) => {
-    await registerMocks(page, { authenticated: true });
-    await page.goto("/settings");
-    await page.waitForLoadState("networkidle");
-    // Verify key content is visible
-    await expect(page.getByText(/settings/i).first()).toBeVisible();
-  });
-
-  test("Account Preferences renders on iOS", async ({ page }) => {
-    await registerMocks(page, { authenticated: true });
-    await page.goto("/account-preferences");
-    await page.waitForLoadState("networkidle");
-    await expect(page.getByText(/account/i).first()).toBeVisible();
-  });
-
-  test("Mobileconfig renders on iOS", async ({ page }) => {
-    await registerMocks(page, { authenticated: true });
-    await page.goto("/mobileconfig");
-    await page.waitForLoadState("networkidle");
-    await expect(page.getByText(/apple devices/i).first()).toBeVisible();
-  });
-
-  test("FAQ renders on iOS", async ({ page }) => {
-    await page.goto("/faq");
-    await page.waitForLoadState("networkidle");
-    await expect(page.getByText(/faq|frequently/i).first()).toBeVisible();
-  });
-});
diff --git a/app/src/__tests__/e2e/layout/protected-pages.spec.ts b/app/src/__tests__/e2e/layout/protected-pages.spec.ts
deleted file mode 100644
index 4a61544d..00000000
--- a/app/src/__tests__/e2e/layout/protected-pages.spec.ts
+++ /dev/null
@@ -1,39 +0,0 @@
-// moved from src/tests/e2e/protected-pages.spec.ts
-import { test, expect } from '@playwright/test';
-import { registerMocks } from '../../mocks/registerMocks';
-
-const routes = [
-  '/home',
-  '/setup',
-  '/settings',
-  '/blocklists',
-  '/custom-rules',
-  '/account-preferences',
-  '/mobileconfig',
-  '/query-logs',
-];
-
-// All routes are now checked strictly for horizontal overflow
-const skipHorizontalCheck = new Set<string>();
-
-test.describe('@layout Protected pages basic smoke', () => {
-  test.beforeEach(async ({ page }) => {
-    await registerMocks(page, { authenticated: true, customProfiles: [{ id: 'prof_1', name: 'Default' }] });
-  });
-
-  for (const route of routes) {
-    test(`loads ${route} without redirect`, async ({ page }) => {
-      await page.goto(route);
-      await expect(page).toHaveURL(new RegExp(route.replace('/', '/')));
-      if (!skipHorizontalCheck.has(route)) {
-          const hasHorizontal = await page.evaluate(() => {
-            const doc = document.documentElement;
-            return doc.scrollWidth > doc.clientWidth + 1;
-          });
-          if (process.env.STRICT_MOBILE === '1') {
-            expect(hasHorizontal, `Horizontal overflow detected on ${route}`).toBeFalsy();
-          }
-      }
-    });
-  }
-});
diff --git a/app/src/__tests__/e2e/layout/public-layout.spec.ts b/app/src/__tests__/e2e/layout/public-layout.spec.ts
deleted file mode 100644
index aea43fe3..00000000
--- a/app/src/__tests__/e2e/layout/public-layout.spec.ts
+++ /dev/null
@@ -1,33 +0,0 @@
-import { test, expect } from '@playwright/test';
-import { registerMocks } from '../../mocks/registerMocks';
-
-const routes = ['/login','/signup','/reset-password','/tos','/privacy'];
-
-for (const route of routes) {
-  test.describe(`@layout Public layout ${route}`, () => {
-    test.beforeEach(async ({ page }) => {
-  await registerMocks(page, { authenticated: false });
-      await page.goto(route);
-      await page.waitForSelector('[data-testid="public-layout"]', { state: 'attached', timeout: 5000 });
-    });
-
-    test('no horizontal overflow & starts at left edge', async ({ page }) => {
-      const metrics = await page.evaluate(() => {
-        const doc = document.documentElement;
-        const layout = document.querySelector('[data-testid="public-layout"]') as HTMLElement | null;
-        const rect = layout ? layout.getBoundingClientRect() : null;
-        return {
-          hasOverflow: doc.scrollWidth > doc.clientWidth + 1,
-          left: rect?.left ?? null,
-          right: rect?.right ?? null,
-          vw: doc.clientWidth
-        };
-      });
-      expect(metrics.hasOverflow, 'No horizontal overflow expected').toBeFalsy();
-      expect(metrics.left, 'Public layout should start at left edge').toBe(0);
-      if (metrics.right !== null) {
-        expect(Math.abs(metrics.vw - metrics.right)).toBeLessThanOrEqual(1);
-      }
-    });
-  });
-}
diff --git a/app/src/__tests__/e2e/layout/route-smoke.spec.ts b/app/src/__tests__/e2e/layout/route-smoke.spec.ts
new file mode 100644
index 00000000..bdebc4e4
--- /dev/null
+++ b/app/src/__tests__/e2e/layout/route-smoke.spec.ts
@@ -0,0 +1,135 @@
+import { test, expect, type Page } from '@playwright/test';
+import { registerMocks } from '../../mocks/registerMocks';
+import { expectNoHorizontalOverflow, collectTapTargetViolations } from '../utils/layoutAssertions';
+
+// One pass per route, per project. Each route is loaded once and checked for:
+//   - staying on its URL (no redirect),
+//   - the layout root spanning the full viewport width (no left offset, no clipping),
+//   - no horizontal overflow, also after the interactions most likely to introduce it,
+//   - (mobile) tap targets of at least MIN_TAP_SIZE px.
+
+const MIN_TAP_SIZE = 40;
+// Routes whose icon-only controls are narrower than MIN_TAP_SIZE (the copy buttons and
+// (i) triggers on /setup, the homepage buttons on /blocklists cards). Add them back to
+// the tap-target check once those controls meet the threshold.
+const TAP_TARGET_EXCLUDED = new Set(['/setup', '/blocklists']);
+
+// Public routes: '/' is the landing page; the rest render inside PublicLayout.
+const PUBLIC_ROUTES = ['/', '/login', '/signup', '/reset-password', '/tos', '/privacy', '/faq'];
+const PROTECTED_ROUTES = ['/home', '/setup', '/settings', '/blocklists', '/custom-rules', '/account-preferences', '/mobileconfig', '/query-logs'];
+
+const ROOT_SELECTOR: Record<string, string> = {
+  '/': '.moddns-landing',
+};
+function rootSelector(route: string, isProtected: boolean) {
+  return ROOT_SELECTOR[route] ?? (isProtected ? '[data-testid="app-content"]' : '[data-testid="public-layout"]');
+}
+
+const PROFILE = { id: 'prof1', profile_id: 'prof1', name: 'Default', settings: { logs: { enabled: true }, custom_rules: [] } };
+
+async function setup(page: Page, isProtected: boolean) {
+  if (!isProtected) {
+    await registerMocks(page, { authenticated: false });
+    return;
+  }
+  await registerMocks(page, { authenticated: true, customProfiles: [PROFILE] });
+  // Registered after registerMocks so it wins over the /profiles catch-all.
+  await page.route(/\/api\/v1\/profiles\/prof1\/logs(\?|$)/i, route =>
+    route.fulfill({ status: 200, contentType: 'application/json', body: '[]' }));
+}
+
+// `exactLeft`: the root must start at x=0. On desktop the protected layout sits to the
+// right of the persistent sidebar, so only its right edge is pinned there.
+async function expectRootFillsViewport(page: Page, selector: string, exactLeft: boolean) {
+  const metrics = await page.evaluate((sel) => {
+    const root = document.querySelector(sel) as HTMLElement | null;
+    if (!root) return null;
+    const rect = root.getBoundingClientRect();
+    return { left: rect.left, right: rect.right, vw: document.documentElement.clientWidth };
+  }, selector);
+  expect(metrics, `${selector} missing`).not.toBeNull();
+  if (exactLeft) {
+    expect(metrics!.left, 'layout root should start at the left edge').toBe(0);
+  } else {
+    expect(metrics!.left, 'layout root should not be offset left').toBeGreaterThanOrEqual(0);
+  }
+  expect(Math.abs(metrics!.vw - metrics!.right), 'layout root should end at the right edge').toBeLessThanOrEqual(1);
+}
+
+async function expectTapTargets(page: Page, route: string) {
+  const violations = await collectTapTargetViolations(page, MIN_TAP_SIZE);
+  const details = violations.map(v => `${v.index}:${v.size.w.toFixed(0)}x${v.size.h.toFixed(0)}:'${v.text}'`).join(', ');
+  if (process.env.STRICT_MOBILE === '1') {
+    expect(violations, `${route} tap target violations (index:WxH:'text'): ${details}`).toHaveLength(0);
+  } else if (violations.length) {
+    console.warn(`[SOFT] ${route} tap target violations -> ${details}`);
+  }
+}
+
+// Interactions that change layout and could introduce overflow after the initial render.
+async function interact(page: Page, route: string, isMobile: boolean) {
+  if (isMobile) {
+    const moreBtn = page.getByTestId('bottom-nav').getByRole('button', { name: /more/i });
+    if (await moreBtn.count()) {
+      await moreBtn.first().click();
+      await expect(page.getByTestId('overlay-navigation')).toBeVisible();
+      await expectNoHorizontalOverflow(page);
+      await page.getByTestId('nav-close').click();
+    }
+  }
+  if (route === '/query-logs') {
+    const toggle = page.getByTestId('querylog-card-toggle').first();
+    if (await toggle.count()) {
+      await toggle.click();
+      await expectNoHorizontalOverflow(page);
+    }
+  }
+  if (route === '/custom-rules') {
+    const input = page.getByPlaceholder('Add a domain or IP address');
+    if (await input.count()) {
+      await input.first().fill('example.com');
+      await expectNoHorizontalOverflow(page);
+    }
+  }
+}
+
+for (const [routes, isProtected] of [[PUBLIC_ROUTES, false], [PROTECTED_ROUTES, true]] as const) {
+  test.describe(`@layout route smoke (${isProtected ? 'protected' : 'public'})`, () => {
+    for (const route of routes) {
+      test(`${route} renders full-width without overflow`, async ({ page, isMobile }) => {
+        await setup(page, isProtected);
+        await page.goto(route);
+        await expect(page).toHaveURL(new RegExp(`${route.replace(/\//g, '\\/')}$`));
+
+        const selector = rootSelector(route, isProtected);
+        await page.waitForSelector(selector, { state: 'attached', timeout: 10_000 });
+        await expectRootFillsViewport(page, selector, !isProtected || isMobile);
+        await expectNoHorizontalOverflow(page);
+
+        if (isMobile && !TAP_TARGET_EXCLUDED.has(route)) await expectTapTargets(page, route);
+
+        await interact(page, route, isMobile);
+        await expectNoHorizontalOverflow(page);
+      });
+    }
+  });
+}
+
+test.describe('@layout mobile layout basics', { tag: '@android' }, () => {
+  test('bottom navigation stays in the viewport after an orientation change', async ({ page }) => {
+    await setup(page, true);
+    await page.goto('/home');
+    await expect(page.getByTestId('bottom-nav')).toBeInViewport();
+    await page.setViewportSize({ width: 740, height: 360 });
+    await expect(page.getByTestId('bottom-nav')).toBeInViewport();
+    await expectNoHorizontalOverflow(page);
+  });
+
+  test('login renders in dark mode', async ({ page }) => {
+    await registerMocks(page, { authenticated: false });
+    await page.goto('/login');
+    await expect(page.getByTestId('loading-screen')).toHaveCount(0, { timeout: 3000 });
+    // The initial mode depends on WebAuthn feature detection, so use the mode-independent toggle.
+    await expect(page.getByTestId('btn-login-toggle-mode')).toBeVisible();
+  });
+});
diff --git a/app/src/__tests__/e2e/layout/tap-targets-auth.spec.ts b/app/src/__tests__/e2e/layout/tap-targets-auth.spec.ts
deleted file mode 100644
index 300df48c..00000000
--- a/app/src/__tests__/e2e/layout/tap-targets-auth.spec.ts
+++ /dev/null
@@ -1,36 +0,0 @@
-import { test, expect } from '@playwright/test';
-import type { Page } from '@playwright/test';
-import { collectTapTargetViolations } from '../utils/layoutAssertions'; // path corrected one level up
-
-// Auth-specific tap target enforcement for /login and /signup.
-// Runs on the Android project only to keep the suite fast.
-
-const MIN_SIZE = 40; // same threshold used elsewhere (visual comfort; actual min-h is 44px via classes)
-
-async function assertNoExcessiveViolations(page: Page, route: string) {
-  await page.goto(route);
-  const violations = await collectTapTargetViolations(page, MIN_SIZE);
-  const strict = process.env.STRICT_MOBILE === '1';
-  const softLimit = parseInt(process.env.TAP_TARGET_SOFT_LIMIT || '4', 10);
-  const strictLimit = parseInt(process.env.TAP_TARGET_STRICT_LIMIT || '0', 10);
-  const limit = strict ? strictLimit : softLimit;
-  if (violations.length > limit) {
-    const details = violations.map(v => `${v.index}:${v.size.w.toFixed(0)}x${v.size.h.toFixed(0)}:'${v.text}'`).join(', ');
-    if (strict) {
-      expect(violations.length, `${route} tap target violations (index:WxH:'text'): ${details}`).toBeLessThanOrEqual(limit);
-    } else {
-      console.warn(`[SOFT] ${route} tap target warning (${violations.length} > ${limit}) -> ${details}`);
-    }
-  }
-  expect(violations.length).toBeGreaterThanOrEqual(0); // keep assertion
-}
-
-test.describe('@layout Auth tap targets', { tag: '@android' }, () => {
-  test('login page tap targets', async ({ page }) => {
-    await assertNoExcessiveViolations(page, '/login');
-  });
-
-  test('signup page tap targets', async ({ page }) => {
-    await assertNoExcessiveViolations(page, '/signup');
-  });
-});
diff --git a/app/src/__tests__/e2e/layout/tap-targets-protected.spec.ts b/app/src/__tests__/e2e/layout/tap-targets-protected.spec.ts
deleted file mode 100644
index 37f9de51..00000000
--- a/app/src/__tests__/e2e/layout/tap-targets-protected.spec.ts
+++ /dev/null
@@ -1,37 +0,0 @@
-import { test, expect } from "@playwright/test";
-import { collectTapTargetViolations } from "../utils/layoutAssertions";
-
-const STRICT = process.env.STRICT_MOBILE === "1";
-const MIN_SIZE = 40;
-
-const protectedRoutes = [
-  { path: "/settings", name: "Settings" },
-  { path: "/blocklists", name: "Blocklists" },
-  { path: "/custom-rules", name: "Custom Rules" },
-  { path: "/account-preferences", name: "Account Preferences" },
-  { path: "/mobileconfig", name: "Mobileconfig" },
-  { path: "/query-logs", name: "Query Logs" },
-  { path: "/faq", name: "FAQ" },
-];
-
-test.describe("Tap targets – protected pages", { tag: "@mobile" }, () => {
-  for (const route of protectedRoutes) {
-    test(`${route.name} has adequate tap targets`, async ({ page }) => {
-      await page.goto(route.path);
-      await page.waitForLoadState("networkidle");
-
-      const violations = await collectTapTargetViolations(page, MIN_SIZE);
-
-      if (STRICT) {
-        expect(violations).toHaveLength(0);
-      } else {
-        // Soft mode: log but don't fail
-        if (violations.length > 0) {
-          console.warn(
-            `${route.name}: ${violations.length} tap target violations found`
-          );
-        }
-      }
-    });
-  }
-});
diff --git a/app/src/__tests__/e2e/utils/layoutAssertions.ts b/app/src/__tests__/e2e/utils/layoutAssertions.ts
index 7aab65da..0884c5a2 100644
--- a/app/src/__tests__/e2e/utils/layoutAssertions.ts
+++ b/app/src/__tests__/e2e/utils/layoutAssertions.ts
@@ -32,24 +32,6 @@ export async function expectNoHorizontalOverflow(page: Page) {
   }
 }
 
-export async function expectVisibleAndInViewport(page: Page, role: string, name: RegExp | string) {
-  const strict = process.env.STRICT_MOBILE === '1';
-  let locator = page.getByRole(role as Parameters<Page['getByRole']>[0], { name });
-  const count = await locator.count();
-  if (count === 0 && role === 'navigation') {
-    // fallback to header or first nav element manually
-    const header = page.locator('header, nav');
-    if (await header.count() > 0) locator = header.first();
-  }
-  try {
-    await expect(locator).toBeVisible({ timeout: 3000 });
-    await expect(locator).toBeInViewport();
-  } catch (err) {
-    if (strict) throw err;
-    console.warn('[SOFT] navigation landmark not visible: ' + (err as Error).message.split('\n')[0]);
-  }
-}
-
 export async function collectTapTargetViolations(page: Page, minSize = 40) {
   const locators = page.getByRole('button');
   const count = await locators.count();

From dd2bb9e69d6ea553984c9b21f798a42640e1183d Mon Sep 17 00:00:00 2001
From: Maciek <tomczukmaciej@gmail.com>
Date: Tue, 22 Sep 2026 19:36:27 +0200
Subject: [PATCH 07/10] test(app): Revive the account email and password specs
 that always skipped

Signed-off-by: Maciek <tomczukmaciej@gmail.com>
---
 .../__tests__/e2e/account/changeEmail.spec.ts | 33 +++------
 .../e2e/account/updatePassword.spec.ts        | 70 +++++++------------
 2 files changed, 37 insertions(+), 66 deletions(-)

diff --git a/app/src/__tests__/e2e/account/changeEmail.spec.ts b/app/src/__tests__/e2e/account/changeEmail.spec.ts
index 8a2f1267..ac570346 100644
--- a/app/src/__tests__/e2e/account/changeEmail.spec.ts
+++ b/app/src/__tests__/e2e/account/changeEmail.spec.ts
@@ -1,4 +1,5 @@
 import { test, expect } from '@playwright/test';
+import { registerMocks } from '../../mocks/registerMocks';
 
 const mockAccount = {
   account_id: 'abc',
@@ -12,7 +13,8 @@ const setupRoutes = async (
   page: import('@playwright/test').Page,
   onPatch: (body: string | null) => void,
 ) => {
-  await page.addInitScript(() => { window.localStorage.setItem('AUTH_KEY', 'true'); });
+  await registerMocks(page, { authenticated: true, accountOverride: mockAccount });
+  // Registered after registerMocks so these win over its catch-all.
   await page.route('**/api/v1/accounts', async route => {
     if (route.request().method() === 'PATCH') {
       onPatch(route.request().postData());
@@ -20,15 +22,10 @@ const setupRoutes = async (
     }
     return route.continue();
   });
-  await page.route('**/api/v1/accounts/current', async route => {
-    return route.fulfill({ status: 200, contentType: 'application/json', body: JSON.stringify(mockAccount) });
-  });
-  await page.route('**/api/v1/webauthn/passkeys', async route => {
-    return route.fulfill({ status: 200, contentType: 'application/json', body: JSON.stringify([]) });
-  });
-  await page.route('**/api/v1/profiles', async route => {
-    return route.fulfill({ status: 200, contentType: 'application/json', body: JSON.stringify([]) });
-  });
+  await page.route('**/api/v1/sub', route =>
+    route.fulfill({ status: 200, contentType: 'application/json', body: JSON.stringify({ status: 'active', plan: 'plus', active_until: '2027-01-01T00:00:00Z' }) }));
+  await page.route('**/api/v1/webauthn/passkeys', route =>
+    route.fulfill({ status: 200, contentType: 'application/json', body: '[]' }));
 };
 
 // Happy path: two-step flow shows the lockout warning, tolerates a
@@ -36,14 +33,10 @@ const setupRoutes = async (
 test('email change requires confirm step and sends patch on match', async ({ page }) => {
   let patchBody: string | null = null;
   await setupRoutes(page, body => { patchBody = body; });
-  await page.goto('http://localhost:5173/account-preferences');
+  await page.goto('/account-preferences');
 
   const changeBtn = page.getByRole('button', { name: /Change email/i });
-  const isVisible = await changeBtn.isVisible().catch(() => false);
-  if (!isVisible) {
-    test.skip(true, 'Change email button not reachable - app server likely not started');
-    return;
-  }
+  await expect(changeBtn).toBeVisible({ timeout: 10_000 });
   await changeBtn.click();
 
   await page.getByPlaceholder('new@example.com').fill('new@example.com');
@@ -69,14 +62,10 @@ test('email change requires confirm step and sends patch on match', async ({ pag
 test('email change blocked while confirm entry mismatches', async ({ page }) => {
   let patchCalled = false;
   await setupRoutes(page, () => { patchCalled = true; });
-  await page.goto('http://localhost:5173/account-preferences');
+  await page.goto('/account-preferences');
 
   const changeBtn = page.getByRole('button', { name: /Change email/i });
-  const isVisible = await changeBtn.isVisible().catch(() => false);
-  if (!isVisible) {
-    test.skip(true, 'Change email button not reachable - app server likely not started');
-    return;
-  }
+  await expect(changeBtn).toBeVisible({ timeout: 10_000 });
   await changeBtn.click();
 
   await page.getByPlaceholder('new@example.com').fill('new@example.com');
diff --git a/app/src/__tests__/e2e/account/updatePassword.spec.ts b/app/src/__tests__/e2e/account/updatePassword.spec.ts
index 12921ce0..9f04e357 100644
--- a/app/src/__tests__/e2e/account/updatePassword.spec.ts
+++ b/app/src/__tests__/e2e/account/updatePassword.spec.ts
@@ -1,35 +1,37 @@
 import { test, expect } from '@playwright/test';
+import { registerMocks } from '../../mocks/registerMocks';
 
-// Intercepts account patch + current get to assert JSON Patch sequence
-test('password update sends test+replace operations', async ({ page }) => {
-  let patchPayload: { updates: { operation: string; path: string; value?: string }[] } | null = null;
-  // Pre-auth via localStorage before app scripts run
-  await page.addInitScript(() => { window.localStorage.setItem('AUTH_KEY', 'true'); });
+const mockAccount = { account_id: 'abc', email: 'user@example.com', email_verified: true, auth_methods: ['password'], mfa: { totp: { enabled: false } } };
+
+/** Base mocks for the account page plus a PATCH /accounts interceptor. */
+async function setupRoutes(page: import('@playwright/test').Page, onPatch: (body: string | null) => void) {
+  await registerMocks(page, { authenticated: true, accountOverride: mockAccount });
+  // Registered after registerMocks so these win over its catch-all.
   await page.route('**/api/v1/accounts', async route => {
     if (route.request().method() === 'PATCH') {
-      const body = route.request().postData();
-      patchPayload = body ? JSON.parse(body) : null;
+      onPatch(route.request().postData());
       return route.fulfill({ status: 200, body: '' });
     }
     return route.continue();
   });
-  await page.route('**/api/v1/accounts/current', async route => {
-    return route.fulfill({ status: 200, contentType: 'application/json', body: JSON.stringify({ account_id: 'abc', mfa: { totp: { enabled: false } } }) });
-  });
-  await page.route('**/api/v1/profiles', async route => {
-    return route.fulfill({ status: 200, contentType: 'application/json', body: JSON.stringify([]) });
-  });
-  await page.goto('http://localhost:5173/account-preferences');
+  await page.route('**/api/v1/sub', route =>
+    route.fulfill({ status: 200, contentType: 'application/json', body: JSON.stringify({ status: 'active', plan: 'plus', active_until: '2027-01-01T00:00:00Z' }) }));
+  await page.route('**/api/v1/webauthn/passkeys', route =>
+    route.fulfill({ status: 200, contentType: 'application/json', body: '[]' }));
+}
 
-  // Detect availability; skip gracefully if app not reachable
-  const updateBtn = await page.getByRole('button', { name: /Update password/i });
-  const isVisible = await updateBtn.isVisible().catch(() => false);
-  if (!isVisible) {
-    // Skip conditionally; Playwright expects boolean first param
-    test.skip(true, 'Update password button not reachable - app server likely not started');
-    return;
-  }
+async function openUpdatePassword(page: import('@playwright/test').Page) {
+  await page.goto('/account-preferences');
+  const updateBtn = page.getByRole('button', { name: /Update password/i });
+  await expect(updateBtn).toBeVisible({ timeout: 10_000 });
   await updateBtn.click();
+}
+
+// Intercepts account patch + current get to assert JSON Patch sequence
+test('password update sends test+replace operations', async ({ page }) => {
+  let patchPayload: { updates: { operation: string; path: string; value?: string }[] } | null = null;
+  await setupRoutes(page, body => { patchPayload = body ? JSON.parse(body) : null; });
+  await openUpdatePassword(page);
 
   // Fill fields
   await page.getByLabel('Old password').fill('OldPassword123!');
@@ -52,28 +54,8 @@ test('password update sends test+replace operations', async ({ page }) => {
 // Negative flow: missing old password should not send patch
 test('password update blocked without old password', async ({ page }) => {
   let patchCalled = false;
-  await page.addInitScript(() => { window.localStorage.setItem('AUTH_KEY', 'true'); });
-  await page.route('**/api/v1/accounts', async route => {
-    if (route.request().method() === 'PATCH') {
-      patchCalled = true;
-      return route.fulfill({ status: 200, body: '' });
-    }
-    return route.continue();
-  });
-  await page.route('**/api/v1/accounts/current', async route => {
-    return route.fulfill({ status: 200, contentType: 'application/json', body: JSON.stringify({ account_id: 'abc', mfa: { totp: { enabled: false } } }) });
-  });
-  await page.route('**/api/v1/profiles', async route => {
-    return route.fulfill({ status: 200, contentType: 'application/json', body: JSON.stringify([]) });
-  });
-  await page.goto('http://localhost:5173/account-preferences');
-  const updateBtn = await page.getByRole('button', { name: /Update password/i });
-  const isVisible = await updateBtn.isVisible().catch(() => false);
-  if (!isVisible) {
-    test.skip(true, 'Update password button not reachable - app server likely not started');
-    return;
-  }
-  await updateBtn.click();
+  await setupRoutes(page, () => { patchCalled = true; });
+  await openUpdatePassword(page);
   await page.getByLabel('New password').fill('NewPassword123!');
   await page.getByLabel('Confirm password').fill('NewPassword123!');
   await page.getByRole('button', { name: /Save change/i }).click();

From 23c1c9926109b8e0fa2d16cd348f81b99c9d71b1 Mon Sep 17 00:00:00 2001
From: Maciek <tomczukmaciej@gmail.com>
Date: Tue, 22 Sep 2026 19:36:54 +0200
Subject: [PATCH 08/10] test(app): Remove duplicated auth, logout and centering
 specs and the auth-setup project

Signed-off-by: Maciek <tomczukmaciej@gmail.com>
---
 app/src/__tests__/e2e/.auth-storage.json      | 14 ----
 app/src/__tests__/e2e/auth.setup.ts           | 17 -----
 app/src/__tests__/e2e/auth.spec.ts            | 40 ----------
 .../__tests__/e2e/functional/logout.spec.ts   | 21 -----
 .../e2e/functional/session-expiry.spec.ts     | 47 +++++-------
 .../e2e/layout/content-centering.spec.ts      | 76 ++++++-------------
 .../e2e/layout/setup-guide-scroll.spec.ts     |  5 +-
 app/src/__tests__/playwright.config.ts        | 14 +---
 8 files changed, 50 insertions(+), 184 deletions(-)
 delete mode 100644 app/src/__tests__/e2e/.auth-storage.json
 delete mode 100644 app/src/__tests__/e2e/auth.setup.ts
 delete mode 100644 app/src/__tests__/e2e/auth.spec.ts
 delete mode 100644 app/src/__tests__/e2e/functional/logout.spec.ts

diff --git a/app/src/__tests__/e2e/.auth-storage.json b/app/src/__tests__/e2e/.auth-storage.json
deleted file mode 100644
index 5a656d77..00000000
--- a/app/src/__tests__/e2e/.auth-storage.json
+++ /dev/null
@@ -1,14 +0,0 @@
-{
-  "cookies": [],
-  "origins": [
-    {
-      "origin": "http://localhost:5173",
-      "localStorage": [
-        {
-          "name": "isAuthenticated",
-          "value": "true"
-        }
-      ]
-    }
-  ]
-}
\ No newline at end of file
diff --git a/app/src/__tests__/e2e/auth.setup.ts b/app/src/__tests__/e2e/auth.setup.ts
deleted file mode 100644
index fb2edb02..00000000
--- a/app/src/__tests__/e2e/auth.setup.ts
+++ /dev/null
@@ -1,17 +0,0 @@
-// Bootstrap auth storage state for dependent projects.
-// This runs in the dedicated 'auth-setup' project (see playwright.config.ts) and
-// produces the storage state file consumed by mobile projects via `storageState`.
-// Keeping this minimal avoids coupling to network mocks (other tests mock APIs).
-import { test } from '@playwright/test';
-import { AUTH_KEY } from '@/lib/consts';
-
-test.describe('@setup auth storage', () => {
-  test('create auth storage file', async ({ page, context }) => {
-    // Navigate to a public page first so no protected loaders interfere.
-    await page.goto('/login');
-    // Seed localStorage auth flag the app expects.
-    await page.evaluate((key) => localStorage.setItem(key, 'true'), AUTH_KEY);
-    // Persist resulting storage state for reuse.
-    await context.storageState({ path: 'src/__tests__/e2e/.auth-storage.json' });
-  });
-});
diff --git a/app/src/__tests__/e2e/auth.spec.ts b/app/src/__tests__/e2e/auth.spec.ts
deleted file mode 100644
index 673d2258..00000000
--- a/app/src/__tests__/e2e/auth.spec.ts
+++ /dev/null
@@ -1,40 +0,0 @@
-// moved from src/tests/e2e/auth.spec.ts
-import { test, expect } from '@playwright/test';
-
-test.describe('Authentication', () => {
-  test.beforeEach(async ({ page }) => {
-    // Ensure clean auth state each test
-    await page.addInitScript(() => {
-      window.localStorage.clear();
-      window.sessionStorage.clear();
-      document.cookie.split(';').forEach(c => {
-        const eqPos = c.indexOf('=');
-        const name = eqPos > -1 ? c.substr(0, eqPos) : c;
-        document.cookie = name + '=;expires=Thu, 01 Jan 1970 00:00:00 GMT;path=/';
-      });
-    });
-  });
-
-  test('redirects unauthenticated user to /login when visiting protected route', async ({ page }) => {
-    await page.goto('/home');
-    // Wait for potential client redirect logic
-    await page.waitForLoadState('networkidle');
-    // Accept either immediate redirect or soft navigation via router push
-    await expect.poll(async () => page.url()).toMatch(/\/login$/);
-  });
-
-  test('login page renders without console errors (mobile)', async ({ page }) => {
-    const errors: string[] = [];
-    page.on('console', msg => {
-      if (msg.type() === 'error') errors.push(msg.text());
-    });
-    await page.goto('/login');
-    // Prefer testid vs dynamic button text
-    const toggle = page.getByTestId('btn-login-toggle-mode');
-    await expect(toggle).toBeVisible();
-    // Ensure both forms can be toggled without errors
-    await toggle.click(); // switch mode
-    await expect(page.getByTestId(/login-(passkey|password)-form/)).toBeVisible();
-    expect(errors).toEqual([]);
-  });
-});
diff --git a/app/src/__tests__/e2e/functional/logout.spec.ts b/app/src/__tests__/e2e/functional/logout.spec.ts
deleted file mode 100644
index 009ba9cf..00000000
--- a/app/src/__tests__/e2e/functional/logout.spec.ts
+++ /dev/null
@@ -1,21 +0,0 @@
-import { test, expect } from '@playwright/test';
-import { AUTH_TOAST_IDS } from '../../../lib/authToasts';
-import { registerMocks } from '../../mocks/registerMocks';
-
-// Covers manual logout via UI and ensures single success toast + redirect.
-
-test.describe('Logout flows', { tag: '@desktop' }, () => {
-  test('Manual logout (force helper) from authenticated home redirects to login and shows toast', async ({ page }) => {
-    await registerMocks(page, { authenticated: true, customProfiles: [{ id: 'prof_1', name: 'Main' }] });
-
-    await page.goto('/home');
-    await expect(page).toHaveURL(/\/home$/);
-
-  // Use global helper for deterministic logout since UI trigger test id not guaranteed
-  await page.evaluate(() => (window as unknown as { __APP_DISPATCH_EVENT__: (e: { type: string }) => void }).__APP_DISPATCH_EVENT__({ type: 'auth/forceLogout' }));
-
-    await expect(page).toHaveURL(/\/login$/);
-    await expect(page.getByTestId(AUTH_TOAST_IDS.logoutSuccess)).toBeVisible();
-    await expect(page.getByTestId(AUTH_TOAST_IDS.sessionExpired)).toHaveCount(0);
-  });
-});
diff --git a/app/src/__tests__/e2e/functional/session-expiry.spec.ts b/app/src/__tests__/e2e/functional/session-expiry.spec.ts
index 4a719869..2f2d6d05 100644
--- a/app/src/__tests__/e2e/functional/session-expiry.spec.ts
+++ b/app/src/__tests__/e2e/functional/session-expiry.spec.ts
@@ -2,41 +2,34 @@ import { test, expect } from '@playwright/test';
 import { registerMocks } from '../../mocks/registerMocks';
 import { AUTH_TOAST_IDS } from '../../../lib/authToasts';
 
-// Failing test (initially) to reproduce session expiry UI bug.
-// Expected correct behavior: upon session expiration, user is redirected to /login,
-// login page content is visible, and a session expired toast appears.
-// Current bug: a persistent loading screen (or non-login state) appears instead.
+// The app exposes window.__APP_DISPATCH_EVENT__ so tests can trigger a forced logout
+// without a real 401 round-trip. Both variants must land on /login with the login
+// page rendered (not a lingering loading screen) and raise exactly one toast.
 
-test.describe('@functional Session Expiry', () => {
-  test('redirects to login with session expired toast when force logout helper invoked', async ({ page }) => {
-    await registerMocks(page, { authenticated: true, customProfiles: [{ id: 'prof_1', name: 'Default' }] });
-
-  // No console log dependency; production logs removed.
+type ForceLogout = { type: 'auth/forceLogout'; reason?: string; toastType?: string };
+const dispatch = (page: import('@playwright/test').Page, event: ForceLogout) =>
+  page.evaluate((e) => (window as unknown as { __APP_DISPATCH_EVENT__: (ev: unknown) => void }).__APP_DISPATCH_EVENT__(e), event);
 
+test.describe('@functional Forced logout', () => {
+  test.beforeEach(async ({ page }) => {
+    await registerMocks(page, { authenticated: true, customProfiles: [{ id: 'prof_1', name: 'Default' }] });
     await page.goto('/home');
-    await expect.poll(() => page.url()).toMatch(/\/home$/);
-
-  // Wait until helper is attached (effect mounts after initial render)
-  await page.evaluate(() => (window as unknown as { __APP_DISPATCH_EVENT__: (e: { type: string; reason: string; toastType: string }) => void }).__APP_DISPATCH_EVENT__({ type: 'auth/forceLogout', reason: 'Session expired - please log in again.', toastType: 'error' }));
+    await expect(page).toHaveURL(/\/home$/);
+  });
 
-    await expect.poll(() => page.url(), { timeout: 8000 }).toMatch(/\/login$/);
+  test('session expiry redirects to login with the session-expired toast', async ({ page }) => {
+    await dispatch(page, { type: 'auth/forceLogout', reason: 'Session expired - please log in again.', toastType: 'error' });
+    await expect(page).toHaveURL(/\/login$/);
     await expect(page.getByTestId('login-page')).toBeVisible();
-
-  // Toast assertion by test id
-  await expect(page.getByTestId(AUTH_TOAST_IDS.sessionExpired)).toBeVisible();
-
-  // Behavior verified by URL + toast only.
+    await expect(page.getByTestId(AUTH_TOAST_IDS.sessionExpired)).toBeVisible();
+    await expect(page.getByTestId(AUTH_TOAST_IDS.logoutSuccess)).toHaveCount(0);
   });
 
-  test('session expired toast appears if loader forces logout before navigation to protected page', async ({ page }) => {
-    // Start unauthenticated but attempt to visit a protected route, emulate loader forcing logout (side effect already done in app code when account fetch 401 + flag)
-    await registerMocks(page, { authenticated: true, customProfiles: [{ id: 'prof_1', name: 'Main' }] });
-    await page.goto('/home');
-    await expect(page).toHaveURL(/\/home$/);
-    // Trigger forced logout
-  await page.evaluate(() => (window as unknown as { __APP_DISPATCH_EVENT__: (e: { type: string; reason: string; toastType: string }) => void }).__APP_DISPATCH_EVENT__({ type: 'auth/forceLogout', reason: 'Session expired - please log in again.', toastType: 'error' }));
+  test('manual logout redirects to login with the logged-out toast', async ({ page }) => {
+    await dispatch(page, { type: 'auth/forceLogout' });
     await expect(page).toHaveURL(/\/login$/);
     await expect(page.getByTestId('login-page')).toBeVisible();
-    await expect(page.getByTestId(AUTH_TOAST_IDS.sessionExpired)).toBeVisible();
+    await expect(page.getByTestId(AUTH_TOAST_IDS.logoutSuccess)).toBeVisible();
+    await expect(page.getByTestId(AUTH_TOAST_IDS.sessionExpired)).toHaveCount(0);
   });
 });
diff --git a/app/src/__tests__/e2e/layout/content-centering.spec.ts b/app/src/__tests__/e2e/layout/content-centering.spec.ts
index a8288545..db1478a8 100644
--- a/app/src/__tests__/e2e/layout/content-centering.spec.ts
+++ b/app/src/__tests__/e2e/layout/content-centering.spec.ts
@@ -74,67 +74,39 @@ test.describe('@layout Content centering - body styles', { tag: ['@desktop', '@i
   });
 });
 
-test.describe('@layout Content centering - app content area', { tag: ['@desktop', '@ios'] }, () => {
+test.describe('@layout Content centering - viewport matrix', { tag: ['@desktop', '@ios'] }, () => {
   test.beforeEach(async ({ page }) => {
     await registerMocks(page, { authenticated: true });
   });
 
-  test('app-content fills full viewport width on mobile', async ({ page }) => {
-    await page.setViewportSize({ width: 390, height: 844 });
-    await page.goto('/setup');
-
-    const appContent = page.getByTestId('app-content');
-    await expect(appContent).toBeVisible();
-
-    const box = await appContent.boundingBox();
-    const viewport = page.viewportSize()!;
-
-    // app-content should start at x=0 (no left offset)
-    expect(box!.x).toBe(0);
-    // app-content should span full viewport width
-    expect(box!.width).toBeGreaterThanOrEqual(viewport.width - 1);
-  });
-
+  // One test per viewport keeps a fresh page for each; WebKit is unreliable across
+  // repeated navigations in a single page.
   for (const vp of VIEWPORTS) {
-    test(`content area starts at left edge on ${vp.name}`, async ({ page }) => {
+    test(`app-content starts at the left edge and setup-container is centered on ${vp.name}`, async ({ page }) => {
       await page.setViewportSize({ width: vp.width, height: vp.height });
       await page.goto('/setup');
 
       const appContent = page.getByTestId('app-content');
-      const box = await appContent.boundingBox();
-
-      // Content should start at x=0, not offset to the right
-      expect(box!.x, `app-content x offset on ${vp.name}`).toBe(0);
-    });
-  }
-});
-
-test.describe('@layout Content centering - symmetric margins', { tag: ['@desktop', '@ios'] }, () => {
-  test.beforeEach(async ({ page }) => {
-    await registerMocks(page, { authenticated: true });
-  });
-
-  for (const vp of VIEWPORTS.filter(v => v.width < 1280)) {
-    test(`setup-container has symmetric margins on ${vp.name}`, async ({ page }) => {
-      await page.setViewportSize({ width: vp.width, height: vp.height });
-      await page.goto('/setup');
-
-      const container = page.getByTestId('setup-container');
-      await expect(container).toBeVisible();
-
-      const box = await container.boundingBox();
-      const viewport = page.viewportSize()!;
-
-      const leftMargin = box!.x;
-      const rightMargin = viewport.width - (box!.x + box!.width);
-
-      // Left and right margins should be roughly equal (within 30px tolerance)
-      // This accounts for px-4 (16px) padding which may round differently
-      const marginDiff = Math.abs(leftMargin - rightMargin);
-      expect(
-        marginDiff,
-        `Asymmetric margins on ${vp.name}: left=${leftMargin.toFixed(0)}px, right=${rightMargin.toFixed(0)}px, diff=${marginDiff.toFixed(0)}px`
-      ).toBeLessThan(30);
+      await expect(appContent).toBeVisible();
+      const contentBox = (await appContent.boundingBox())!;
+      // Content should start at x=0, not offset to the right, and span the viewport.
+      expect(contentBox.x, `app-content x offset on ${vp.name}`).toBe(0);
+      expect(contentBox.width, `app-content width on ${vp.name}`).toBeGreaterThanOrEqual(vp.width - 1);
+
+      // Below the desktop breakpoint the setup container is centered with symmetric margins.
+      if (vp.width < 1280) {
+        const container = page.getByTestId('setup-container');
+        await expect(container, `setup-container on ${vp.name}`).toBeVisible();
+        const box = (await container.boundingBox())!;
+        const leftMargin = box.x;
+        const rightMargin = vp.width - (box.x + box.width);
+        // 30px tolerance accounts for px-4 (16px) padding rounding differently per side.
+        const marginDiff = Math.abs(leftMargin - rightMargin);
+        expect(
+          marginDiff,
+          `Asymmetric margins on ${vp.name}: left=${leftMargin.toFixed(0)}px, right=${rightMargin.toFixed(0)}px, diff=${marginDiff.toFixed(0)}px`
+        ).toBeLessThan(30);
+      }
     });
   }
 
diff --git a/app/src/__tests__/e2e/layout/setup-guide-scroll.spec.ts b/app/src/__tests__/e2e/layout/setup-guide-scroll.spec.ts
index bae6de55..b4fe7c47 100644
--- a/app/src/__tests__/e2e/layout/setup-guide-scroll.spec.ts
+++ b/app/src/__tests__/e2e/layout/setup-guide-scroll.spec.ts
@@ -40,9 +40,8 @@ test.describe('@layout setup guide scrollability', { tag: '@android' }, () => {
   // bottom, the last step must not be hidden behind the fixed BottomNav.
   // The panel sits at z-40 and BottomNav at z-50; without a height offset for
   // the navbar the last step gets clipped under it on mobile.
-  // Auth is seeded manually (mirrors setup-overlay-header-visibility.spec.ts)
-  // because storageState alone doesn't reliably hydrate profile state on
-  // protected routes for these mobile projects.
+  // Auth and profile state are seeded on a public route first (mirrors
+  // setup-overlay-header-visibility.spec.ts) so the protected loader sees them.
   test('last step is visible above bottom nav when scrolled to bottom', async ({ page }) => {
     await page.goto('/login');
     await page.evaluate((key) => {
diff --git a/app/src/__tests__/playwright.config.ts b/app/src/__tests__/playwright.config.ts
index 300222bc..1d3f0668 100644
--- a/app/src/__tests__/playwright.config.ts
+++ b/app/src/__tests__/playwright.config.ts
@@ -40,27 +40,21 @@ export default defineConfig({
   // still pays for its browser context). Tags: @desktop (Chromium desktop), @android
   // (Pixel 5, Chromium), @ios (iPhone 15 Pro, WebKit), @mobile (both mobile projects).
   // Untagged tests run on every project; a tagged test runs only on the projects named.
+  // Every spec seeds its own auth state (registerMocks / addInitScript), so no project
+  // needs a shared storageState.
   projects: [
-    // Auth storage bootstrap project (runs first to produce storageState for dependent projects)
-    {
-      name: 'auth-setup',
-      testMatch: /auth\.setup\.ts/,
-    },
     // Mobile baseline: Pixel 5 (Chromium engine)
     {
       name: 'chromium-mobile-dark',
-      use: { ...devices['Pixel 5'], colorScheme: 'dark', storageState: 'src/__tests__/e2e/.auth-storage.json' },
-      dependencies: ['auth-setup'],
+      use: { ...devices['Pixel 5'], colorScheme: 'dark' },
       grepInvert: /^(?!.*@(?:android|mobile)\b)(?=.*@(?:desktop|ios)\b)/,
     },
     // Safari/WebKit coverage: latest supported iPhone (15 Pro) using default WebKit engine
     {
       name: 'iphone15pro-dark',
-      use: { ...devices['iPhone 15 Pro'], colorScheme: 'dark', storageState: 'src/__tests__/e2e/.auth-storage.json' },
-      dependencies: ['auth-setup'],
+      use: { ...devices['iPhone 15 Pro'], colorScheme: 'dark' },
       grepInvert: /^(?!.*@(?:ios|mobile)\b)(?=.*@(?:desktop|android)\b)/,
     },
-    // Desktop without pre-auth storage so login flows can exercise authentication UI
     {
       name: 'chromium-desktop',
       use: { ...devices['Desktop Chrome'] },

From 3f8f75143485f828e098e0aaf0246d1019afea23 Mon Sep 17 00:00:00 2001
From: Maciek <tomczukmaciej@gmail.com>
Date: Tue, 22 Sep 2026 19:37:11 +0200
Subject: [PATCH 09/10] test(app): Tighten vacuous connection-status and
 passkey assertions

Signed-off-by: Maciek <tomczukmaciej@gmail.com>
---
 .../connection/connectionStatusHeader.spec.ts | 21 ++++++++++++-------
 .../mobileConnectionStatusBar.spec.ts         |  1 +
 .../e2e/functional/login-advanced.spec.ts     | 17 +++++++--------
 app/src/__tests__/e2e/utils/webauthn.ts       |  6 +++++-
 4 files changed, 26 insertions(+), 19 deletions(-)

diff --git a/app/src/__tests__/e2e/connection/connectionStatusHeader.spec.ts b/app/src/__tests__/e2e/connection/connectionStatusHeader.spec.ts
index 3404c04f..42eaa393 100644
--- a/app/src/__tests__/e2e/connection/connectionStatusHeader.spec.ts
+++ b/app/src/__tests__/e2e/connection/connectionStatusHeader.spec.ts
@@ -88,21 +88,26 @@ test.describe('Desktop ConnectionStatusHeader', { tag: '@desktop' }, () => {
     await expect(page.getByTestId('conn-header-root')).toBeVisible();
   });
 
-  test('different profile state', async ({ page }) => {
+  test('a check answered by another profile shows Different Profile', async ({ page }) => {
+    // The active profile is prof1; the resolver reports p2.
     await mockDnsSequence(page, [
       { status: 'ok', profile_id: 'p2', asn: '', asn_organization: 'Org', ip: '1.1.1.1' }
     ]);
     await page.reload();
-    const badge = page.getByTestId('conn-header-badge-text');
-    await expect(badge).toBeVisible();
-    // Poll until it resolves to one of expected states (guard against state transition timing)
-    await expect.poll(async () => (await badge.textContent())?.trim() || '').toMatch(/Connected|Different Profile/i);
+    await expect(page.getByTestId('conn-header-badge-text')).toHaveText('Different Profile');
   });
 
-  test('disconnected 404', async ({ page }) => {
+  test('a check answered by the active profile shows Connected', async ({ page }) => {
+    await mockDnsSequence(page, [
+      { status: 'ok', profile_id: 'prof1', asn: '', asn_organization: 'Org', ip: '1.1.1.1' }
+    ]);
+    await page.reload();
+    await expect(page.getByTestId('conn-header-badge-text')).toHaveText('Connected');
+  });
+
+  test('disconnected 404 shows Disconnected', async ({ page }) => {
     await mockDnsSequence(page, [{ status: 404, body: { error: 'disconnected' } }]);
     await page.reload();
-    const badge = page.getByTestId('conn-header-badge-text');
-    await expect(badge).toHaveText(/Disconnected|Connected/);
+    await expect(page.getByTestId('conn-header-badge-text')).toHaveText('Disconnected');
   });
 });
diff --git a/app/src/__tests__/e2e/connection/mobileConnectionStatusBar.spec.ts b/app/src/__tests__/e2e/connection/mobileConnectionStatusBar.spec.ts
index dd86b9f5..2b4d0c32 100644
--- a/app/src/__tests__/e2e/connection/mobileConnectionStatusBar.spec.ts
+++ b/app/src/__tests__/e2e/connection/mobileConnectionStatusBar.spec.ts
@@ -43,5 +43,6 @@ test.describe('Mobile ConnectionStatusBar', { tag: '@mobile' }, () => {
     await page.reload();
     const badge = page.getByTestId('conn-mobile-badge');
     await expect(badge).toBeVisible();
+    await expect(badge).toHaveText(/Disconnected/);
   });
 });
diff --git a/app/src/__tests__/e2e/functional/login-advanced.spec.ts b/app/src/__tests__/e2e/functional/login-advanced.spec.ts
index af03574b..e1a74ff4 100644
--- a/app/src/__tests__/e2e/functional/login-advanced.spec.ts
+++ b/app/src/__tests__/e2e/functional/login-advanced.spec.ts
@@ -92,7 +92,7 @@ test.describe('Login advanced flows', { tag: '@desktop' }, () => {
     await expect(page).toHaveURL(/\/home$/);
   });
 
-  test('Passkey login WebAuthn flow succeeds (network + no error toast)', async ({ page }) => {
+  test('Passkey login WebAuthn flow succeeds and redirects home', async ({ page }) => {
     let authed = false;
     let beginCalled = 0;
     let finishCalled = 0;
@@ -123,16 +123,13 @@ test.describe('Login advanced flows', { tag: '@desktop' }, () => {
       await page.getByTestId('btn-login-toggle-mode').click();
     }
     await page.getByTestId('input-email-passkey').fill('user@example.com');
-  await page.getByTestId('btn-login-passkey-submit').click();
-
-  // Allow async handlers to run
-  await page.waitForTimeout(300);
+    await page.getByTestId('btn-login-passkey-submit').click();
 
-  // Assertions: begin called exactly once and no error toast shown.
-  // finish endpoint may not be triggered if upstream logic short-circuits before sending payload in test env.
-  expect(beginCalled).toBe(1);
-  expect([0,1]).toContain(finishCalled); // tolerate missing finish under test constraints
-  await expect(page.getByTestId(AUTH_TOAST_IDS.passkeyError)).toHaveCount(0);
+    // begin → credentials.get (stubbed) → finish, then the authed loaders redirect home.
+    await page.waitForURL(/\/home$/);
+    expect(beginCalled).toBe(1);
+    expect(finishCalled).toBe(1);
+    await expect(page.getByTestId(AUTH_TOAST_IDS.passkeyError)).toHaveCount(0);
   });
 
   test('Passkey login failure shows passkey error toast', async ({ page }) => {
diff --git a/app/src/__tests__/e2e/utils/webauthn.ts b/app/src/__tests__/e2e/utils/webauthn.ts
index f4950e1c..83dd3479 100644
--- a/app/src/__tests__/e2e/utils/webauthn.ts
+++ b/app/src/__tests__/e2e/utils/webauthn.ts
@@ -8,6 +8,8 @@ export async function installWebAuthnSuccessStub(page: import('@playwright/test'
     function buf(str: string) { return enc.encode(str).buffer; }
     // @ts-expect-error - mocking WebAuthn API
     navigator.credentials = navigator.credentials || {};
+    // Shape follows what @simplewebauthn/browser's startAuthentication() reads
+    // from a PublicKeyCredential before serialising it for the finish call.
     // @ts-expect-error - mocking WebAuthn API
     navigator.credentials.get = async () => ({
       id: 'cred1',
@@ -18,7 +20,9 @@ export async function installWebAuthnSuccessStub(page: import('@playwright/test'
         signature: buf('sig'),
         userHandle: buf('user'),
       },
-      type: 'public-key'
+      type: 'public-key',
+      authenticatorAttachment: 'platform',
+      getClientExtensionResults: () => ({}),
     });
   });
 }

From 77778574690c931b5c720f04a3dd2102f7665fd2 Mon Sep 17 00:00:00 2001
From: Maciek <tomczukmaciej@gmail.com>
Date: Wed, 23 Sep 2026 08:50:25 +0200
Subject: [PATCH 10/10] test(app): Match route smoke URLs exactly instead of
 via a hand-escaped regex

Signed-off-by: Maciek <tomczukmaciej@gmail.com>
---
 app/src/__tests__/e2e/layout/route-smoke.spec.ts | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/app/src/__tests__/e2e/layout/route-smoke.spec.ts b/app/src/__tests__/e2e/layout/route-smoke.spec.ts
index bdebc4e4..2099db39 100644
--- a/app/src/__tests__/e2e/layout/route-smoke.spec.ts
+++ b/app/src/__tests__/e2e/layout/route-smoke.spec.ts
@@ -99,7 +99,8 @@ for (const [routes, isProtected] of [[PUBLIC_ROUTES, false], [PROTECTED_ROUTES,
       test(`${route} renders full-width without overflow`, async ({ page, isMobile }) => {
         await setup(page, isProtected);
         await page.goto(route);
-        await expect(page).toHaveURL(new RegExp(`${route.replace(/\//g, '\\/')}$`));
+        // A string is matched exactly against baseURL + route.
+        await expect(page).toHaveURL(route);
 
         const selector = rootSelector(route, isProtected);
         await page.waitForSelector(selector, { state: 'attached', timeout: 10_000 });