From a98fab8f669c60c69085b7401941a6c6b128e541 Mon Sep 17 00:00:00 2001
From: Anne-Catherine <57360138+accognet@users.noreply.github.com>
Date: Mon, 15 May 2023 16:12:26 +0200
Subject: [PATCH] =?UTF-8?q?N=C2=B06240=20-=20Improve=20display=20of=20pict?=
 =?UTF-8?q?ure=20in=20read=20or=20edit=20mode=20(#484)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 core/attributedef.class.inc.php       |  4 ++--
 css/backoffice/components/_field.scss | 11 +++++++++++
 js/edit_image.js                      |  2 +-
 3 files changed, 14 insertions(+), 3 deletions(-)

diff --git a/core/attributedef.class.inc.php b/core/attributedef.class.inc.php
index 7681996d5..999fe3aa8 100644
--- a/core/attributedef.class.inc.php
+++ b/core/attributedef.class.inc.php
@@ -8611,7 +8611,7 @@ class AttributeImage extends AttributeBlob
 		$sCssClasses .= ' '.(($bIsCustomImage) ? 'attribute-image-custom' : 'attribute-image-default');
 
 		// Important: If you change this, mind updating edit_image.js as well
-		return '<div class="'.$sCssClasses.'" style="max-width: '.$sMaxWidthPx.'; max-height: '.$sMaxHeightPx.'; aspect-ratio: '.$iMaxWidth.' / '.$iMaxHeight.'">'.$sRet.'</div>';
+		return '<div class="'.$sCssClasses.'" style="max-width: min('.$sMaxWidthPx.',100%); max-height: min('.$sMaxHeightPx.',100%); aspect-ratio: '.$iMaxWidth.' / '.$iMaxHeight.'">'.$sRet.'</div>';
 	}
 
 	/**
@@ -8625,7 +8625,7 @@ class AttributeImage extends AttributeBlob
 	 * @since 2.7.0 change visibility to protected
 	 */
 	protected function GetHtmlForImageUrl($sUrl, $iMaxWidthPx, $iMaxHeightPx) {
-		return  '<img src="'.$sUrl.'" style="max-width: '.$iMaxWidthPx.'; max-height: '.$iMaxHeightPx.'">';
+		return '<img src="'.$sUrl.'" style="max-width: min('.$iMaxWidthPx.',100%); max-height: min('.$iMaxHeightPx.',100%)">';
 	}
 
 	/**
diff --git a/css/backoffice/components/_field.scss b/css/backoffice/components/_field.scss
index 58094cc41..642715bd2 100644
--- a/css/backoffice/components/_field.scss
+++ b/css/backoffice/components/_field.scss
@@ -64,11 +64,22 @@ $ibo-field--enable-bulk--checkbox--margin-left: $ibo-spacing-300 !default;
         word-break: break-word;
         white-space: inherit;
       }
+
       & pre {
         white-space: break-spaces;
       }
     }
   }
+  /* We need the rule to keep picture inside the column */
+  &[data-attribute-type="AttributeImage"] {
+    > .ibo-field--value {
+      display: grid;
+
+      > span {
+        display: inherit;
+      }
+    }
+  }
 }
 
 /* Large field = Label on top, value below */
diff --git a/js/edit_image.js b/js/edit_image.js
index 4ebde2c6f..ccabe6536 100644
--- a/js/edit_image.js
+++ b/js/edit_image.js
@@ -71,7 +71,7 @@ $(function()
 				let sMarkup = `
 				<input type="hidden" id="do_remove_${this.options.input_name}" name="${this.options.input_name}[remove]" value="0"/>
 				<div id="preview_${this.options.input_name}" class="${sCssClasses}" data-role="ibo-input-image--image-view" style="max-width: ${this.options.max_width_px}px; max-height: ${this.options.max_height_px}px; aspect-ratio: ${this.options.max_width_px} / ${this.options.max_height_px};">
-					<img src="${sImageUrl}" data-original-src="${sImageUrl}" data-default-src="${this.options.default_image_url}" style="max-width: ${this.options.max_width_px}px; max-height: ${this.options.max_height_px}px">
+					<img src="${sImageUrl}" data-original-src="${sImageUrl}" data-default-src="${this.options.default_image_url}" style="max-width: min(${this.options.max_width_px}px,100%); max-height: min(${this.options.max_height_px}px,100%)">
 					<input id="file_${this.options.input_name}" name="${this.options.input_name}[fcontents]" type="file" />
 				</div>
 				<div id="buttons_${this.options.input_name}" class="ibo-input-image--edit-buttons" data-role="ibo-input-image--edit-buttons">