Add tests for image modals

isic/core/templates/core/partials/image_modal.html

@@ -7,19 +7,19 @@
 
   {% comment %}TODO: escape key should exist{% endcomment %}
 
-  <div @click.away="open = false" class="h-screen overflow-hidden max-w-max mx-auto p-8 transform transition-all" role="dialog" aria-modal="true" aria-labelledby="modal-headline">
-    <div class="bg-white h-full relative p-8 rounded-lg text-left shadow-xl">
+  <div class="flex items-center justify-center min-h-screen p-4 sm:p-8">
+    <div @click.away="open = false" class="bg-white relative p-4 sm:p-8 rounded-lg text-left shadow-xl max-w-5xl w-full" role="dialog" aria-modal="true" aria-labelledby="modal-headline">
       <template x-if="hovered">
         {% if image.accession.is_cog %}
           <div>
-            <div id="image-{{ image.id }}" class="w-[512px] h-[512px] border border-gray-300"></div>
+            <div id="image-{{ image.id }}" class="w-[512px] h-[512px] border border-gray-300 mx-auto"></div>
             <script type="text/javascript">
               initializeCogViewer(document.getElementById('image-{{ image.id }}'), '{{ image.blob.url|safe }}');
             </script>
           </div>
         {% else %}
         {% comment %}Note the single quotes: https://github.com/alpinejs/alpine/issues/466{% endcomment %}
-          <img :src="'{{ image.blob.url }}'" />
+          <img :src="'{{ image.blob.url }}'" class="max-w-full max-h-[70vh] object-contain mx-auto" />
         {% endif %}
 
       </template>

isic/core/tests/test_image_modal_browser.py

@@ -0,0 +1,100 @@
+import io
+
+from django.urls import reverse
+from PIL import Image as PILImage
+from playwright.sync_api import expect
+import pytest
+
+from isic.core.services.collection.image import collection_add_images
+
+
+def _make_jpeg_bytes(width, height, color="red"):
+    img = PILImage.new("RGB", (width, height), color=color)
+    buf = io.BytesIO()
+    img.save(buf, format="JPEG")
+    return buf.getvalue()
+
+
+IMAGE_SIZES = [
+    pytest.param((100, 100), id="small-square"),
+    pytest.param((300, 1200), id="tall-portrait"),
+    pytest.param((2000, 400), id="wide-landscape"),
+    pytest.param((1500, 1500), id="large-square"),
+]
+
+VIEWPORT_SIZES = [
+    pytest.param({"width": 375, "height": 667}, id="mobile"),
+    pytest.param({"width": 768, "height": 1024}, id="tablet"),
+    pytest.param({"width": 1280, "height": 720}, id="desktop"),
+    pytest.param({"width": 1920, "height": 1080}, id="wide"),
+]
+
+
+@pytest.mark.playwright
+@pytest.mark.parametrize("image_size", IMAGE_SIZES)
+@pytest.mark.parametrize("viewport", VIEWPORT_SIZES)
+def test_image_modal_fits_viewport(
+    new_context,
+    live_server,
+    collection_factory,
+    image_factory,
+    image_size,
+    viewport,
+):
+    w, h = image_size
+
+    collection = collection_factory(public=True, pinned=True)
+    image = image_factory(
+        public=True,
+        accession__width=w,
+        accession__height=h,
+    )
+    collection_add_images(collection=collection, image=image)
+
+    # MinIO URLs aren't browser-accessible in the test environment,
+    # so intercept image requests and serve valid JPEGs directly.
+    blob_bytes = _make_jpeg_bytes(w, h)
+    thumb_bytes = _make_jpeg_bytes(256, 256)
+
+    ctx = new_context(base_url=live_server.url, viewport=viewport)
+    ctx.set_default_timeout(15_000)
+    page = ctx.new_page()
+
+    page.route(
+        image.blob.url,
+        lambda route: route.fulfill(content_type="image/jpeg", body=blob_bytes),
+    )
+    page.route(
+        image.thumbnail_256.url,
+        lambda route: route.fulfill(content_type="image/jpeg", body=thumb_bytes),
+    )
+
+    page.goto(reverse("core/collection-detail", args=[collection.pk]))
+
+    # Hover the thumbnail first (triggers hovered=true which loads the full image URL),
+    # then click to open the modal.
+    thumb_el = page.locator("img").first
+    thumb_el.hover()
+    thumb_el.click()
+    modal = page.get_by_role("dialog")
+    expect(modal).to_be_visible()
+
+    # Wait for the full-size image to actually render
+    modal_img = modal.locator("img")
+    modal_img.wait_for(state="visible")
+    page.wait_for_function(
+        "el => el.naturalWidth > 0 && el.complete",
+        arg=modal_img.element_handle(),
+    )
+
+    box = modal.bounding_box()
+    assert box is not None, "Modal dialog has no bounding box"
+    assert box["x"] >= 0, f"Modal left edge ({box['x']}) is off-screen"
+    assert box["y"] >= 0, f"Modal top edge ({box['y']}) is off-screen"
+    assert box["x"] + box["width"] <= viewport["width"], (
+        f"Modal right edge ({box['x'] + box['width']}) exceeds viewport width ({viewport['width']})"
+    )
+    assert box["y"] + box["height"] <= viewport["height"], (
+        f"Modal bottom edge ({box['y'] + box['height']}) "
+        f"exceeds viewport height ({viewport['height']})"
+    )