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.

cypress.config.ts

@@ -1,19 +1,18 @@
 import { defineConfig } from 'cypress';
 import ViteConfig from './vite.config';
-
-const CYPRESS_BASE_DIR = 'tests/e2e/';
+import cypressDirs from './cypress-dirs.json' assert { type: 'json' };
 
 export default defineConfig({
-  fixturesFolder: `${CYPRESS_BASE_DIR}/fixtures`,
-  screenshotsFolder: `${CYPRESS_BASE_DIR}/screenshots`,
+  fixturesFolder: `${cypressDirs.base}/fixtures`,
+  screenshotsFolder: cypressDirs.screenshots,
 
   video: true,
-  videosFolder: `${CYPRESS_BASE_DIR}/videos`,
+  videosFolder: cypressDirs.videos,
 
   e2e: {
     baseUrl: `http://localhost:${getApplicationPort()}/`,
-    specPattern: `${CYPRESS_BASE_DIR}/**/*.cy.{js,jsx,ts,tsx}`, // Default: cypress/e2e/**/*.cy.{js,jsx,ts,tsx}
-    supportFile: `${CYPRESS_BASE_DIR}/support/e2e.ts`,
+    specPattern: `${cypressDirs.base}/**/*.cy.{js,jsx,ts,tsx}`, // Default: cypress/e2e/**/*.cy.{js,jsx,ts,tsx}
+    supportFile: `${cypressDirs.base}/support/e2e.ts`,
   },
 });