Fix layout jumps/shifts and overflow on modals

This commit improves the user interface in modal display.

- Prevent layout shifts caused by background scrollbars when modals are
  active.
- Fix unintended overflow of modals on small screens, preventing parts
  of the modal from being cut off on the right side.
- Refactor DOM manipulation, enhancing modularity, reusability,
  extensibility, and separation of concerns.
- Centralize viewport test scenarios for different sizes in a single
  definition for E2E tests.

tests/e2e/support/scenarios/viewport-test-scenarios.ts

@@ -0,0 +1,11 @@
+export const ViewportTestScenarios: readonly ViewportScenario[] = [
+  { name: 'iPhone SE', width: 375, height: 667 },
+  { name: '13-inch Laptop', width: 1280, height: 800 },
+  { name: '4K Ultra HD Desktop', width: 3840, height: 2160 },
+] as const;
+
+interface ViewportScenario {
+  readonly name: string;
+  readonly width: number;
+  readonly height: number;
+}