From 1f3871433f9ed46db95571b0e02910134587c8e7 Mon Sep 17 00:00:00 2001
From: Simon Sendler <simon.sendler@intranda.com>
Date: Thu, 27 Feb 2025 14:01:33 +0100
Subject: [PATCH] fix: improve thumbnail display in metadata editor

---
 .../metseditor/image/inc_me_image-thumbnails.xhtml     | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/main/webapp/WEB-INF/includes/metseditor/image/inc_me_image-thumbnails.xhtml b/src/main/webapp/WEB-INF/includes/metseditor/image/inc_me_image-thumbnails.xhtml
index 752c49248..715732cd2 100644
--- a/src/main/webapp/WEB-INF/includes/metseditor/image/inc_me_image-thumbnails.xhtml
+++ b/src/main/webapp/WEB-INF/includes/metseditor/image/inc_me_image-thumbnails.xhtml
@@ -19,15 +19,15 @@
                 <ui:include src="inc_me_image-thumbNavigation.xhtml"/>
 
                 <!-- THUMBNAILS -->
-                <div id="thumbnails" class="thumbnails overflow-y-scroll overflow-x-hidden" dir="#{Metadaten.pagesRTL?'rtl':'ltr'}" style="max-height: calc(100vh - 13rem); height: 100%;">
+                <div id="thumbnails" class="thumbnails overflow-y-scroll overflow-x-hidden d-flex flex-wrap justify-content-center" dir="#{Metadaten.pagesRTL?'rtl':'ltr'}" style="max-height: calc(100vh - 13rem); height: 100%;">
                     <ui:repeat var="image" value="#{Metadaten.paginatorList}" varStatus="status" id="thumbnailGrid">
-                        <div class="thumbnails__thumb #{Metadaten.image.imageName eq image.imageName ? 'active' : ''}" dir="auto">
+                        <div class="thumbnails__thumb #{Metadaten.image.imageName eq image.imageName ? 'active' : ''} d-inline-block" dir="auto">
                             <!-- THUMBNAIL IMAGE -->
-                            <div id="thumb_#{image.order}" class="thumbnails__thumb-image d-flex justify-content-center flex-column">
+                            <div id="thumb_#{image.order}" class="thumbnails__thumb-image">
                                 <button type="button" jsf:id="thumbnailImage" aria-label="#{msgs.thumbnail}" jsf:action="#{Metadaten.checkSelectedThumbnail(image.order)}" jsf:onclick="goobiWorkflowJS.updateSelectedThumbnail(this);" class="btn">
                                     <!-- IMAGE -->
                                     <ui:fragment rendered="#{image.type == 'image' || image.type == 'pdf'}">
-                                        <canvas style="width:#{Metadaten.thumbnailSize}px" id="thumbnail-#{status.index}" class="thumbnails__thumb-canvas" title="#{NavigationForm.uiStatus.mets_thumbFilename?image.tooltip:Metadaten.pageMap[''.concat(image.order)].label}" data-image_small="#{image.thumbnailUrl}" data-image_large="#{image.largeThumbnailUrl}" data-toggle="tooltip"/>
+                                        <canvas style="width:#{Metadaten.thumbnailSize}px" id="thumbnail-#{status.index}" class="thumbnails__thumb-canvas" title="#{NavigationForm.uiStatus.mets_thumbFilename?image.tooltip:Metadaten.pageMap[''.concat(image.order)].label}" data-image_small="#{image.thumbnailUrl}" data-image_large="#{image.largeThumbnailUrl}" data-bs-toggle="tooltip"/>
                                     </ui:fragment>
                                     <!-- 3D OBJECT -->
                                     <ui:fragment rendered="#{image.type == 'object' or image.type == 'x3dom'}">
@@ -39,7 +39,7 @@
                                     </ui:fragment>
                                     <f:setPropertyActionListener value="false" property="#{NavigationForm.uiStatus.mets_scrollToThumb}" target="#{NavigationForm.uiStatus.mets_scrollToThumb}"/>
                                     <f:setPropertyActionListener value="#{image.order -1}" property="#{Metadaten.imageIndex}" target="#{Metadaten.imageIndex}"/>
-                                    <f:passThroughAttribute name="data-toggle" value="tooltip"/>
+                                    <f:passThroughAttribute name="data-bs-toggle" value="tooltip"/>
                                     <f:ajax render=":pagePaginationList :openseadragonform :altoEditAutocomplete" execute="@form"/>
                                     <f:passThroughAttribute name="data-renderimage" value="true"/>
                                     <!-- THUMBNAIL CAPTION -->