From d5f7b533f22999cbfaf326bf62f84d8ae3d48902 Mon Sep 17 00:00:00 2001
From: kdeterme <karl.determe@gmail.com>
Date: Mon, 17 Aug 2026 10:52:44 +0200
Subject: [PATCH] refactor: standardize button sizes and carousel modal footer
 layout for responsiveness

---
 .../static/controls/controls_detail.css       | 19 +++++++++++++++++--
 .../controls/controls_detail_content.html     |  4 ++--
 .../controls/controls_detail_mobile.html      |  4 ++--
 3 files changed, 21 insertions(+), 6 deletions(-)

diff --git a/loko/controls/static/controls/controls_detail.css b/loko/controls/static/controls/controls_detail.css
index 1d4f057..17b0ff4 100644
--- a/loko/controls/static/controls/controls_detail.css
+++ b/loko/controls/static/controls/controls_detail.css
@@ -179,8 +179,23 @@ body {
     text-align: center;
 }
 
-.d-flex.gap-2 button {
-    width: 40px; /* Assure que les boutons ont la même taille */
+[id^="buttons-"] button {
+    width: 36px;
+    height: 36px;
+    padding: 0;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+}
+
+#remarkPhotoCarouselModal .modal-footer {
+    gap: 0.5rem;
+}
+
+#remarkPhotoCarouselModal .modal-footer .btn {
+    width: auto !important;
+    min-width: fit-content;
+    white-space: nowrap;
 }
 
 
diff --git a/loko/controls/templates/controls/controls_detail_content.html b/loko/controls/templates/controls/controls_detail_content.html
index a71e0e9..3f8edaf 100644
--- a/loko/controls/templates/controls/controls_detail_content.html
+++ b/loko/controls/templates/controls/controls_detail_content.html
@@ -812,9 +812,9 @@
                         </button>
                     </div>
                 </div>
-                <div class="modal-footer border-top border-secondary py-2 px-3 d-flex justify-content-between align-items-center bg-dark">
+                <div class="modal-footer border-top border-secondary py-2 px-3 d-flex justify-content-between align-items-center bg-dark flex-nowrap">
                     <div class="small text-muted text-truncate me-2" id="remark-carousel-caption"></div>
-                    <div class="d-flex align-items-center gap-2">
+                    <div class="d-flex align-items-center gap-2 flex-shrink-0">
                         <a id="remark-carousel-hd-btn" href="#" target="_blank" class="btn btn-sm btn-outline-light d-inline-flex align-items-center gap-1" title="{% translate 'Ouvrir en plein écran HD' %}">
                             <i class="bi bi-box-arrow-up-right"></i> <span class="d-none d-sm-inline">{% translate "Plein écran" %}</span>
                         </a>
diff --git a/loko/controls/templates/controls/controls_detail_mobile.html b/loko/controls/templates/controls/controls_detail_mobile.html
index 0270643..3ded54a 100644
--- a/loko/controls/templates/controls/controls_detail_mobile.html
+++ b/loko/controls/templates/controls/controls_detail_mobile.html
@@ -1189,9 +1189,9 @@ document.getElementById('force-sync-btn')?.addEventListener('click', async () =>
                         </button>
                     </div>
                 </div>
-                <div class="modal-footer border-top border-secondary py-2 px-3 d-flex justify-content-between align-items-center bg-dark">
+                <div class="modal-footer border-top border-secondary py-2 px-3 d-flex justify-content-between align-items-center bg-dark flex-nowrap">
                     <div class="small text-muted text-truncate me-2" id="remark-carousel-caption"></div>
-                    <div class="d-flex align-items-center gap-2">
+                    <div class="d-flex align-items-center gap-2 flex-shrink-0">
                         <a id="remark-carousel-hd-btn" href="#" target="_blank" class="btn btn-sm btn-outline-light d-inline-flex align-items-center gap-1" title="{% translate 'Ouvrir en plein écran HD' %}">
                             <i class="bi bi-box-arrow-up-right"></i> <span class="d-none d-sm-inline">{% translate "Plein écran" %}</span>
                         </a>