diff --git a/apps/ui/css/onboarding.css b/apps/ui/css/onboarding.css index e619074..a4f8df1 100644 --- a/apps/ui/css/onboarding.css +++ b/apps/ui/css/onboarding.css @@ -72,6 +72,17 @@ body:has(.drawer.open) .onboarding-trigger, body:has(.drawer.open) .onboarding-panel { z-index: 149; } +/* The wizard owns a fixed bottom action bar. Keep this optional helper above + it so the primary Continue action remains both visible and clickable. */ +body.wizard-page .onboarding-trigger { + bottom: calc(96px + env(safe-area-inset-bottom, 0px)); +} + +body.wizard-page .onboarding-panel { + bottom: calc(150px + env(safe-area-inset-bottom, 0px)); + max-height: min(700px, calc(100vh - 178px)); +} + @media (max-width: 640px) { .onboarding-trigger { right: 14px; bottom: 14px; } .onboarding-panel { right: 14px; bottom: 68px; } diff --git a/apps/ui/tests/e2e/wizard.spec.js b/apps/ui/tests/e2e/wizard.spec.js index 98f449d..d20ce58 100644 --- a/apps/ui/tests/e2e/wizard.spec.js +++ b/apps/ui/tests/e2e/wizard.spec.js @@ -1,6 +1,25 @@ const { test, expect } = require('@playwright/test'); const { getCurrentWorkspace, login, localized } = require('./helpers'); +async function expectOnboardingOutsideWizardNavigation(page) { + await expect(page.getByTestId('onboarding-trigger')).toBeVisible(); + + const overlapsContinue = await page.locator('#btn-continue').evaluate((continueButton) => { + const trigger = document.querySelector('[data-testid="onboarding-trigger"]'); + if (!trigger) return false; + const continueRect = continueButton.getBoundingClientRect(); + const triggerRect = trigger.getBoundingClientRect(); + return !( + triggerRect.right <= continueRect.left + || triggerRect.left >= continueRect.right + || triggerRect.bottom <= continueRect.top + || triggerRect.top >= continueRect.bottom + ); + }); + + expect(overlapsContinue).toBe(false); +} + test('mobile wizard progress connector crosses the indicator centers', async ({ page }) => { await page.setViewportSize({ width: 720, height: 900 }); await login(page); @@ -24,6 +43,19 @@ test('mobile wizard progress connector crosses the indicator centers', async ({ expect(geometry.topDelta).toBeLessThan(1); }); +test('onboarding helper does not cover wizard navigation', async ({ page }) => { + await login(page); + await page.goto('/wizard/'); + await expectOnboardingOutsideWizardNavigation(page); +}); + +test('onboarding helper does not cover wizard navigation on mobile', async ({ page }) => { + await page.setViewportSize({ width: 390, height: 844 }); + await login(page); + await page.goto('/wizard/'); + await expectOnboardingOutsideWizardNavigation(page); +}); + test('wizard loads and protocol selection updates flow', async ({ page }) => { await login(page); await page.goto('/wizard/');