Fix flaky photo gallery carousel tests and refactor overlays

* Fixed a race condition in `photo-carousel` where programmatic scrolling
  (e.g., keyboard navigation) would conflict with `IntersectionObserver`
  callbacks, causing the current photo to revert mid-scroll. Added an
  `isProgrammaticScroll` flag to temporarily suppress observer updates
  during these scrolls.
* Added explicit timeouts in `photo-gallery-test.gjs` to allow the carousel
  animations to settle between keyboard events.
* Refactored `Modal` and `PhotoGallery` components to use `{{in-element}}`
  to render their contents into a top-level `#modal-portal` div. This prevents
  z-index and overflow clipping issues.
* Updated `index.html` to include the `#modal-portal` div.
This commit is contained in:
2026-05-13 10:31:45 +02:00
parent 14827fce3e
commit 51c9555273
5 changed files with 191 additions and 90 deletions

View File

@@ -42,6 +42,7 @@
<link rel="stylesheet" href="/app/styles/app.css">
</head>
<body>
<div id="modal-portal"></div>
<script type="module">
import Application from './app/app';
import environment from './app/config/environment';