Skip mode/skip-button tests on mobile viewports where they are hidden

The .modes-wrapper (containing mode buttons and skip button) is
intentionally hidden via CSS at <=480px to save screen space. Skip
these tests on mobile-chrome and mobile-safari projects since the
UI elements are not accessible on those viewports by design.

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

Author: jeremymanning

tests/visual/modes.spec.js

@@ -25,7 +25,11 @@ test.describe('Question Modes (US3)', () => {
     await page.waitForSelector('#quiz-panel:not([hidden])', { timeout: LOAD_TIMEOUT });
   });
 
-  test('mode menu renders with all expected buttons', async ({ page }) => {
+  test('mode menu renders with all expected buttons', async ({ page }, testInfo) => {
+    // Mode buttons are hidden on mobile viewports (<=480px) to save space
+    const isMobile = testInfo.project.name.startsWith('mobile');
+    test.skip(isMobile, 'Mode buttons hidden on mobile viewports');
+
     const wrapper = page.locator('.modes-wrapper');
     await expect(wrapper).toBeVisible();
 

tests/visual/skip-and-share.spec.js

@@ -15,7 +15,10 @@ async function selectDomain(page) {
 }
 
 test.describe('Skip button and share image', () => {
-  test('Skip button appears and works', async ({ page }) => {
+  test('Skip button appears and works', async ({ page }, testInfo) => {
+    // Skip button is inside .modes-wrapper, hidden on mobile (<=480px)
+    test.skip(testInfo.project.name.startsWith('mobile'), 'Skip button hidden on mobile viewports');
+
     await page.goto(BASE);
     await page.waitForSelector('#landing', { state: 'visible', timeout: 10000 });
 
@@ -47,7 +50,10 @@ test.describe('Skip button and share image', () => {
     console.log('Question after skip:', questionAfter.slice(0, 60));
   });
 
-  test('Skip records response with is_skipped and yellow dot', async ({ page }) => {
+  test('Skip records response with is_skipped and yellow dot', async ({ page }, testInfo) => {
+    // Skip button is inside .modes-wrapper, hidden on mobile (<=480px)
+    test.skip(testInfo.project.name.startsWith('mobile'), 'Skip button hidden on mobile viewports');
+
     await page.goto(BASE);
     await page.waitForSelector('#landing', { state: 'visible', timeout: 10000 });