Use JS to dynamically set height of img modal

sass/_modal.scss

@@ -29,7 +29,6 @@
                 }
             }
             .modal-body--image {
-                height: 72vh;
                 .chat-image {
                     max-height: 99%;
                     max-width: 100%;

src/modals/image.js

@@ -4,6 +4,9 @@ import tpl_image_modal from "../templates/image_modal.js";
 
 export default BootstrapModal.extend({
     toHTML () {
-        return tpl_image_modal({'src': this.src});
+        return tpl_image_modal({
+            'src': this.src,
+            'onload': ev => (ev.target.parentElement.style.height = `${ev.target.height}px`)
+        });
     }
 });

src/templates/image_modal.js

@@ -3,7 +3,8 @@ import { __ } from '../i18n';
 import { modal_close_button, modal_header_close_button } from "./buttons"
 
 
-export default (o) => html`
+export default (o) => {
+    return html`
         <div class="modal-dialog fit-content" role="document">
             <div class="modal-content fit-content">
                 <div class="modal-header">
@@ -11,9 +12,9 @@ export default (o) => html`
                     ${modal_header_close_button}
                 </div>
                 <div class="modal-body modal-body--image fit-content">
-                <img class="chat-image" src="${o.src}"/>
+                    <img class="chat-image" src="${o.src}" @load=${o.onload}>
                 </div>
                 <div class="modal-footer">${modal_close_button}</div>
             </div>
-    </div>
-`;
+        </div>`;
+}