fix: Issues with Modal and Image Cropper position (#5367)

Co-authored-by: Areeb Jamal <jamal.areeb@gmail.com>

app/components/modals/modal-base.js

@@ -7,12 +7,13 @@ import { isTesting } from 'open-event-frontend/utils/testing';
 
 export default UiModal.extend({
   tagName           : 'div',
+  classNames        : ['centered-modal'],
   classNameBindings : ['isFullScreen:fullscreen', 'isSmall:small', 'isLarge:large'],
 
   openObserver: observer('isOpen', function() {
     const $element = $(this.element);
     if (this.isOpen) {
-      $element.modal('show');
+      $element.modal(this.defaultOptions).modal('show');
     } else {
       $element.modal('hide');
     }
@@ -46,8 +47,8 @@ export default UiModal.extend({
   willInitSemantic(settings) {
     this._super(...arguments);
 
-    const defaultOptions = {
-      detachable     : false,
+    this.defaultOptions = {
+      centered       : false,
       duration       : isTesting ? 0 : 200,
       dimmerSettings : {
         dimmerName : `${this.elementId}-modal-dimmer`,
@@ -85,13 +86,13 @@ export default UiModal.extend({
       }
     };
 
-    const options = this.options ? merge(defaultOptions, this.options) : defaultOptions;
+    const options = this.options ? merge(this.defaultOptions, this.options) : this.defaultOptions;
     assign(settings, options);
   },
 
   didInitSemantic() {
     if (this.isOpen) {
-      $(this.element).modal('show');
+      $(this.element).modal(this.defaultOptions).modal('show');
     }
   }
 });

app/components/modals/tax-info-modal.js

@@ -7,9 +7,6 @@ import { orderBy } from 'lodash-es';
 
 export default ModalBase.extend(FormMixin, {
   isSmall : false,
-  options : {
-    closable: false
-  },
 
   autoScrollToErrors   : true,
   isTaxIncludedInPrice : 'include',

app/styles/partials/overrides.scss

@@ -76,3 +76,9 @@ body.dimmable.undetached.dimmed {
     }
   }
 }
+
+.centered-modal {
+  margin-left: auto !important;
+  margin-top: auto !important;
+  left: auto !important;
+}

app/templates/components/modals/tax-info-modal.hbs

@@ -1,3 +1,4 @@
+<i class="black close icon"></i>
 <div class="header">
   {{t 'Add tax information'}}
 </div>