replaced css aspect-ratio by custom js to size the boussole

src/web/themes/custom/ouatminimal_theme/css/ouatminimal.css

@@ -299,11 +299,10 @@ div[data-drupal-selector=edit-actions] > * {
   background-size: contain;
   background-repeat: no-repeat;
   background-position: center;
-  aspect-ratio: 1/1;
-  /* width:100%; */
-  max-height: calc(100vh - 150px);
   position: relative;
   padding: 8%;
+  box-sizing: border-box;
+  /* width:100%; */
 }
 #boussole-layout .boussole-wrapper .boussole .entity {
   position: absolute;

src/web/themes/custom/ouatminimal_theme/js/boussole.js

@@ -4,15 +4,15 @@
   Drupal.behaviors.boussole = {
     attach: function (context, settings) {
       console.log("Drupal Boussole behavior", context);
-      let $boussole_wrapper = document.querySelector('#boussole-layout');
+      let $boussole_layout = document.querySelector('#boussole-layout');
       once('boussole-class-behaviour', '#boussole-layout', context).forEach(element => {
         // let tabs = 
         // div.field-group-tabs-wrapper
         // input.horizontal-tabs-active-tab
-        _boussole = new Boussole($boussole_wrapper);
+        _boussole = new Boussole($boussole_layout);
       });
       
-      let $form = $boussole_wrapper.querySelector(':scope>.form-item');
+      let $form = $boussole_layout.querySelector(':scope>.form-item');
       console.log($form);
       let $tabledrag = $form.querySelector('table.field-multiple-table');
       console.log($tabledrag);
@@ -74,18 +74,33 @@
   };
 
   class Boussole {
-    constructor($boussole_wrapper) {
-      this.$boussole_wrapper = $boussole_wrapper;
+    constructor($boussole_layout) {
+      this.$boussole_layout = $boussole_layout;
+      this.$boussole_wrapper = document.querySelector('#boussole-layout>.boussole-wrapper');
       this.$boussole = document.querySelector('#boussole-layout>.boussole-wrapper>.boussole');
       this.entities = {}
 
+      this.initBoussoleSize();
       this.initTabChecking();
-      this.enableDragArea()
+      this.enableDragArea();
+    }
+
+    initBoussoleSize(){
+      this.setBoussoleSize();
+      // todo window resize event
+    }
+
+    setBoussoleSize(){
+      let w = this.$boussole_wrapper.clientWidth;
+      let h = this.$boussole_wrapper.clientHeight;
+      console.log(`w=${w}, h=${h}`);
+      this.$boussole.style.width = `${w}px`;
+      this.$boussole.style.height = `${w}px`;
     }
 
     initTabChecking(){
       // debugger
-      this.$field_group_tab = this.$boussole_wrapper.closest('details.field-group-tab');
+      this.$field_group_tab = this.$boussole_layout.closest('details.field-group-tab');
       // watch for tabs opening and closing
       // hidden input do not triggers events
       // so we have to use mutationObserver tomake it trigger the change event

src/web/themes/custom/ouatminimal_theme/scss/ouatminimal.scss

@@ -366,11 +366,12 @@ div[data-drupal-selector="edit-actions"]{
       background-size: contain;
       background-repeat: no-repeat;
       background-position: center;
-      aspect-ratio: 1 / 1;
-      /* width:100%; */
-      max-height: calc(100vh - 150px);
       position: relative;
       padding: 8%;
+      box-sizing: border-box;
+      // aspect-ratio: 1 / 1;
+      /* width:100%; */
+      // max-height: calc(100vh - 150px);
       
       .entity{
         position: absolute;