cb144ae472
This commit addresses touch target size issues on mobile devices by adjusting modal margins. The larger margin allows for easier interaction for modal dialogs by tapping outside the modal area on smaller screens. Key changes: - Introduce 30px margin on larger screens and 20px on smaller devices around modals, adhering to accessibility guidelines. - Remove `max-height: 90vh;` in favor of consistent vertical margins, centralizing the spacing control via the `margin` property. - Remove `max-height: 90v;` used to display scroll-bars as the vertical margin is now handled by `margin` property in single place.
66 lines
2.0 KiB
TypeScript
66 lines
2.0 KiB
TypeScript
import { ViewportTestScenarios } from './support/scenarios/viewport-test-scenarios';
|
|
import { openCard } from './support/interactions/card';
|
|
import { selectAllScripts, unselectAllScripts } from './support/interactions/script-selection';
|
|
import { assertLayoutStability } from './support/assert/layout-stability';
|
|
|
|
describe('Layout stability', () => {
|
|
ViewportTestScenarios.forEach(({ // some shifts are observed only on extra small or large screens
|
|
name, width, height,
|
|
}) => {
|
|
// Regression test for a bug where opening a modal caused layout shift
|
|
describe('Modal interaction', () => {
|
|
it(name, () => {
|
|
// arrange
|
|
cy.viewport(width, height);
|
|
cy.visit('/');
|
|
// act & assert
|
|
assertLayoutStability('body', () => {
|
|
cy
|
|
.contains('button', 'Privacy')
|
|
.click();
|
|
cy
|
|
.get('.modal-content-content')
|
|
.should('be.visible');
|
|
});
|
|
});
|
|
});
|
|
|
|
// Regression test for a bug where selecting a script with an open card caused layout shift
|
|
describe('Initial script selection', () => {
|
|
it(name, () => {
|
|
// arrange
|
|
cy.viewport(width, height);
|
|
cy.visit('/');
|
|
cy.contains('span', 'Windows')
|
|
.click();
|
|
// act & assert
|
|
assertLayoutStability('#app', () => {
|
|
openCard({
|
|
cardIndex: 0,
|
|
});
|
|
selectAllScripts();
|
|
});
|
|
});
|
|
});
|
|
|
|
// Regression test for a bug where unselecting selected with an open card caused layout shift
|
|
describe('Deselection script selection', () => {
|
|
it(name, () => {
|
|
// arrange
|
|
cy.viewport(width, height);
|
|
cy.visit('/');
|
|
cy.contains('span', 'Windows')
|
|
.click();
|
|
openCard({
|
|
cardIndex: 0,
|
|
});
|
|
selectAllScripts();
|
|
// act & assert
|
|
assertLayoutStability('#app', () => {
|
|
unselectAllScripts();
|
|
});
|
|
});
|
|
});
|
|
});
|
|
});
|