-
-
Notifications
You must be signed in to change notification settings - Fork 172
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Fix mobile layout overflow caused by tooltips
This commit fixes an issue where tooltips create unwanted horizontal overflow on mobile devices. An overlay has been added to contain the tooltip within the viewport, ensuring it doesn't disrupt the page layout. The changes include adjustments to CSS visibility and pointer event handling for the tooltip container and its children. Changes: - Introduce an overlay that spans the entire viewport for the tooltip container. - Add CSS rules to ensure the tooltip and its children maintain correct pointer events and overflow behavior. - Add a Cypress end-to-end test that verifies the absence of the unintended horizontal overflow on small screens. - Uploads videos/screenshots as artifacts during CI/CD to provide easier troubleshooting. This change is supported by creating `cypress-dirs.json` to be able to share directory information with CI/CD runners and cypress configuration file.
- Loading branch information
1 parent
bd383ed
commit e541a35
Showing
5 changed files
with
133 additions
and
25 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,5 @@ | ||
{ | ||
"base": "tests/e2e", | ||
"videos": "tests/e2e/videos", | ||
"screenshots": "tests/e2e/videos" | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,23 @@ | ||
describe('has no unintended overflow', () => { | ||
it('fits the content without horizontal scroll', () => { | ||
// arrange | ||
cy.viewport(375, 667); // iPhone SE | ||
// act | ||
cy.visit('/'); | ||
// assert | ||
cy.window().then((win) => { | ||
expect(win.document.documentElement.scrollWidth, [ | ||
`Window inner dimensions: ${win.innerWidth}x${win.innerHeight}`, | ||
`Window outer dimensions: ${win.outerWidth}x${win.outerHeight}`, | ||
`Body scrollWidth: ${win.document.body.scrollWidth}`, | ||
`Body clientWidth: ${win.document.body.clientWidth}`, | ||
`Body offsetWidth: ${win.document.body.offsetWidth}`, | ||
`DocumentElement clientWidth: ${win.document.documentElement.clientWidth}`, | ||
`DocumentElement offsetWidth: ${win.document.documentElement.offsetWidth}`, | ||
`Meta viewport content: ${win.document.querySelector('meta[name="viewport"]')?.getAttribute('content')}`, | ||
`Device Pixel Ratio: ${win.devicePixelRatio}`, | ||
`Cypress Viewport: ${Cypress.config('viewportWidth')}x${Cypress.config('viewportHeight')}`, | ||
].join('\n')).to.be.lte(win.innerWidth); | ||
}); | ||
}); | ||
}); |