fix(ui): keep onboarding clear of wizard actions
This commit is contained in:
@@ -72,6 +72,17 @@
|
|||||||
body:has(.drawer.open) .onboarding-trigger,
|
body:has(.drawer.open) .onboarding-trigger,
|
||||||
body:has(.drawer.open) .onboarding-panel { z-index: 149; }
|
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) {
|
@media (max-width: 640px) {
|
||||||
.onboarding-trigger { right: 14px; bottom: 14px; }
|
.onboarding-trigger { right: 14px; bottom: 14px; }
|
||||||
.onboarding-panel { right: 14px; bottom: 68px; }
|
.onboarding-panel { right: 14px; bottom: 68px; }
|
||||||
|
|||||||
@@ -1,6 +1,25 @@
|
|||||||
const { test, expect } = require('@playwright/test');
|
const { test, expect } = require('@playwright/test');
|
||||||
const { getCurrentWorkspace, login, localized } = require('./helpers');
|
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 }) => {
|
test('mobile wizard progress connector crosses the indicator centers', async ({ page }) => {
|
||||||
await page.setViewportSize({ width: 720, height: 900 });
|
await page.setViewportSize({ width: 720, height: 900 });
|
||||||
await login(page);
|
await login(page);
|
||||||
@@ -24,6 +43,19 @@ test('mobile wizard progress connector crosses the indicator centers', async ({
|
|||||||
expect(geometry.topDelta).toBeLessThan(1);
|
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 }) => {
|
test('wizard loads and protocol selection updates flow', async ({ page }) => {
|
||||||
await login(page);
|
await login(page);
|
||||||
await page.goto('/wizard/');
|
await page.goto('/wizard/');
|
||||||
|
|||||||
Reference in New Issue
Block a user