Images not taking full width, overlapping

[murolem]

Here's a sample of the gallery open, from left to right side of a page. Vertical space is cut out.

You can see 2 images (rectangles). I want to see only one image at a time, taking the full viewport width. How to do that?

I'm getting this behavior on mobile only (including desktop devtools in mobile mode). Making the browser window on desktop narrow has no effect - each image takes full width.

Some things:

• The currently open image is "stuck" to the left part of the page. The gap is to the right.
• When zoomed in, the image to the right overlaps with the current image.
• I tried setting initialZoomLevel to fit with no effect.
• I'm setting both data-pswp-width and data-pswp-height correctly.
• Setting padding is not an option - the gap changes between resolutions.
• I'm using svelte-kit with dynamic imports and some format preprocessing, but disabling the latter has no effect (as shown by the code samples). The code is based on the svelte example in the docs.

Also, when inspecting an opened image, I see width and height set to width: 500px; height: 374px (I have a 2398x1795 image), even on big resolutions. Is this okay? Changing these values manually changes the image size but does not affect the position of the next image.

Here's some code samples:

• importing images

const imageModulesPromises = imageFiles.map(
        ({ category, fullFilenameWithoutExt }) => {
            return import(
                `$catalog/${category}/${fullFilenameWithoutExt}.jpg`
            );
        }
    );

• creating gallery

    onMount(() => {
        let lightbox = new PhotoSwipeLightbox({
            gallery: "#" + galleryID,
            children: "a",
            pswpModule: () => import("photoswipe")
        });
    });

• svelte html

<div class="pswp-gallery" id={galleryID}>
    {#await Promise.all(imageModulesPromises) then imageModules}
        {#each imageModules as imageModule, i}
            <a
                href={imageModule.default}
                data-pswp-width={imageFiles[i].fullImageWidth}
                data-pswp-height={imageFiles[i].fullImageHeight}
                target="_blank"
                rel="noreferrer"
            ></a>
        {/each}
    {/await}
</div>