style: improve photo carousel modal layout and responsiveness

loko/controls/static/controls/controls_detail.css

@@ -63,14 +63,53 @@ body {
 
 #remarkPhotoCarouselModal .modal-body {
     background-color: #000;
+    height: 75vh;
+    min-height: 350px;
+    max-height: calc(100dvh - 140px);
+    padding: 0;
+    overflow: hidden;
 }
 
 #remarkPhotoCarousel {
+    width: 100%;
+    height: 100%;
     touch-action: pan-y;
     user-select: none;
     -webkit-user-select: none;
 }
 
+#remarkPhotoCarousel .carousel-inner {
+    width: 100%;
+    height: 100%;
+}
+
+#remarkPhotoCarousel .carousel-item {
+    width: 100%;
+    height: 100%;
+}
+
+#remarkPhotoCarousel .remark-carousel-slide {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 0.5rem;
+    box-sizing: border-box;
+    overflow: hidden;
+}
+
+#remarkPhotoCarousel .remark-carousel-img,
+#remarkPhotoCarousel .carousel-inner img {
+    max-width: 100% !important;
+    max-height: 100% !important;
+    width: auto !important;
+    height: auto !important;
+    object-fit: contain !important;
+    display: block;
+    margin: auto;
+}
+
 #remarkPhotoCarousel .carousel-control-prev,
 #remarkPhotoCarousel .carousel-control-next {
     width: 15%;
@@ -100,17 +139,25 @@ body {
 }
 
 @media (max-width: 576px) {
+    #remarkPhotoCarouselModal .modal-dialog {
+        margin: 0;
+        max-width: 100%;
+        height: 100dvh;
+    }
     #remarkPhotoCarouselModal .modal-content {
         height: 100dvh;
         border-radius: 0;
+        display: flex;
+        flex-direction: column;
     }
     #remarkPhotoCarouselModal .modal-body {
         flex: 1 1 auto;
         min-height: 0;
+        height: auto !important;
         max-height: none !important;
     }
-    #remarkPhotoCarousel .carousel-inner img {
+    #remarkPhotoCarousel .remark-carousel-slide {
-        max-height: 70dvh !important;
+        padding: 0.25rem;
     }
 }
 

loko/controls/static/controls/controls_detail.js

@@ -1993,8 +1993,8 @@ function showRemarkCarouselModal(startIndex) {
         const item = document.createElement('div');
         item.className = `carousel-item ${idx === startIndex ? 'active' : ''} h-100`;
         item.innerHTML = `
-            <div class="d-flex align-items-center justify-content-center h-100 p-2">
+            <div class="remark-carousel-slide d-flex align-items-center justify-content-center w-100 h-100 p-2">
-                <img src="${photo.fullUrl}" class="d-block img-fluid mh-100 mw-100 rounded" style="object-fit: contain; max-height: 75vh;" alt="${photo.caption}">
+                <img src="${photo.fullUrl}" class="remark-carousel-img rounded shadow-sm" alt="${photo.caption}">
             </div>
         `;
         carouselInner.appendChild(item);

loko/controls/templates/controls/controls_detail_content.html

@@ -841,7 +841,7 @@
                     </div>
                     <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="{% translate 'Fermer' %}"></button>
                 </div>
-                <div class="modal-body p-0 position-relative bg-black d-flex align-items-center justify-content-center overflow-hidden" style="min-height: 350px; max-height: 80vh;">
+                <div class="modal-body p-0 position-relative bg-black d-flex align-items-center justify-content-center overflow-hidden" style="height: 75vh; min-height: 350px; max-height: calc(100dvh - 140px);">
                     <div id="remarkPhotoCarousel" class="carousel slide w-100 h-100 d-flex flex-column justify-content-center" data-bs-ride="false" data-bs-touch="true">
                         <div class="carousel-indicators mb-2" id="remark-carousel-indicators"></div>
                         <div class="carousel-inner h-100" id="remark-carousel-inner"></div>

loko/controls/templates/controls/controls_detail_mobile.html

@@ -1251,7 +1251,7 @@ window.addEventListener('pendingRemarksSynced', async () => {
                     </div>
                     <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="{% translate 'Fermer' %}"></button>
                 </div>
-                <div class="modal-body p-0 position-relative bg-black d-flex align-items-center justify-content-center overflow-hidden" style="min-height: 300px; max-height: 80vh;">
+                <div class="modal-body p-0 position-relative bg-black d-flex align-items-center justify-content-center overflow-hidden" style="height: 75vh; min-height: 300px; max-height: calc(100dvh - 140px);">
                     <div id="remarkPhotoCarousel" class="carousel slide w-100 h-100 d-flex flex-column justify-content-center" data-bs-ride="false" data-bs-touch="true">
                         <div class="carousel-indicators mb-2" id="remark-carousel-indicators"></div>
                         <div class="carousel-inner h-100" id="remark-carousel-inner"></div>