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/css/ouatminimal.css.map

@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["../scss/ouatminimal.scss"],"names":[],"mappings":"AAAA;AACA;EACE;EACA;;;AAEF;AAAA;EAEE;;;AAEF;EACE;;;AAGF;EACE;EACA;;;AAGF;AAKI;EACE;;;AAKN;EACE;EACA;;AACA;EACE;EACA;;;AAIJ;EACE;EACA;;;AAGF;EACE;EACA;;;AAGF;AACE;EACA;EACA;;;AAEF;AAAA;EAEE;EACA;;;AAEF;AAAA;EAEE;EACA;;;AAGF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;EACA;;;AAGF;AAAA;AAAA;AAIA;AACA;EACE;;;AAGF;AACA;EAIE;IACE;IACA;IACA;;EAGF;IACE;IACA;;EAGF;AACE;IACA;IACA;IAEA;AACA;IACA;;EAGF;IACE;IACA;IACA;;EAGF;AACE;IACA;IACA;AACA;IACA;;EAGF;IACE;;AAGF;EACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;IASE;IACA;IACA;;;AAIJ;AAAA;AAAA;AAAA;AAAA;AAAA;AAMA;EAEE;IACE;;EAEF;AAAA;AAAA;IAGE;IACA;IACA;;;AAKJ;AAEE;EACE;EACA;EACA;EAAU;EACV;AAeA;AAAA;AAAA;;AAbA;EACE;;AAEF;EACE;EACA;EACA;;AAEF;AAAA;EAEE;EACA;;AAQJ;AACE;EACA;;AAEF;EACE;;AAKA;AAAA;AAAA;AAAA;AAAA;AAAA;EAGE;;AAEF;AAAA;AAAA;AAAA;AAAA;AAAA;EAGE;;AAKJ;EACE;;AAIA;EACE;;AAKF;EACE;;AACA;EACE;EACA;EACA;;AAMJ;EACE;;;AAQN;EACE;EACA;EACA;;AAEA;EACE;;AAKF;EACE;EACA;EACA;;AAGE;EACE;EACA;EACA;;AAIF;EACE;;AAEA;EACE;EACA;EACA;EACA;;AAEA;EACE;EACA;;AAGF;EACE;;AAKR;EACE;EACA;EACA;;AAEA;EACE;;AAIA;EACE;;AAEF;EACE;;AAWN;EACE;EACA;;AAKA;AAAA;EACE;;AAGF;AAAA;EACE;;AACA;AAAA;EACE;;AAMN;EACE;;AAeJ;EACE;EACA;AAEA;;AACA;EACE;EACA;EACA;EACA;EACA;EACA;AACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EAAY;EACZ;EACA;EACA;EACA;;AAEA;EACE;;AAEF;EACE;EACA;;AAEF;EACE;;AAGF;EACE;;;AAYV;AAAA;AAAA;EAGE;;;AAGF;AAAA;EAEE;;;AAMF;EACE;EACA;EACA;;AACA;EACE;;AAEF;EACE","file":"ouatminimal.css"}
+{"version":3,"sourceRoot":"","sources":["../scss/ouatminimal.scss"],"names":[],"mappings":"AAAA;AACA;EACE;EACA;;;AAEF;AAAA;EAEE;;;AAEF;EACE;;;AAGF;EACE;EACA;;;AAGF;AAKI;EACE;;;AAKN;EACE;EACA;;AACA;EACE;EACA;;;AAIJ;EACE;EACA;;;AAGF;EACE;EACA;;;AAGF;AACE;EACA;EACA;;;AAEF;AAAA;EAEE;EACA;;;AAEF;AAAA;EAEE;EACA;;;AAGF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;EACA;;;AAGF;AAAA;AAAA;AAIA;AACA;EACE;;;AAGF;AACA;EAIE;IACE;IACA;IACA;;EAGF;IACE;IACA;;EAGF;AACE;IACA;IACA;IAEA;AACA;IACA;;EAGF;IACE;IACA;IACA;;EAGF;AACE;IACA;IACA;AACA;IACA;;EAGF;IACE;;AAGF;EACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;IASE;IACA;IACA;;;AAIJ;AAAA;AAAA;AAAA;AAAA;AAAA;AAMA;EAEE;IACE;;EAEF;AAAA;AAAA;IAGE;IACA;IACA;;;AAKJ;AAEE;EACE;EACA;EACA;EAAU;EACV;AAeA;AAAA;AAAA;;AAbA;EACE;;AAEF;EACE;EACA;EACA;;AAEF;AAAA;EAEE;EACA;;AAQJ;AACE;EACA;;AAEF;EACE;;AAKA;AAAA;AAAA;AAAA;AAAA;AAAA;EAGE;;AAEF;AAAA;AAAA;AAAA;AAAA;AAAA;EAGE;;AAKJ;EACE;;AAIA;EACE;;AAKF;EACE;;AACA;EACE;EACA;EACA;;AAMJ;EACE;;;AAQN;EACE;EACA;EACA;;AAEA;EACE;;AAKF;EACE;EACA;EACA;;AAGE;EACE;EACA;EACA;;AAIF;EACE;;AAEA;EACE;EACA;EACA;EACA;;AAEA;EACE;EACA;;AAGF;EACE;;AAKR;EACE;EACA;EACA;;AAEA;EACE;;AAIA;EACE;;AAEF;EACE;;AAWN;EACE;EACA;;AAKA;AAAA;EACE;;AAGF;AAAA;EACE;;AACA;AAAA;EACE;;AAMN;EACE;;AAeJ;EACE;EACA;AAEA;;AACA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AAEA;;AAGA;EACE;EACA;EAAY;EACZ;EACA;EACA;EACA;;AAEA;EACE;;AAEF;EACE;EACA;;AAEF;EACE;;AAGF;EACE;;;AAYV;AAAA;AAAA;EAGE;;;AAGF;AAAA;EAEE;;;AAMF;EACE;EACA;EACA;;AACA;EACE;;AAEF;EACE","file":"ouatminimal.css"}

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) {
+    constructor($boussole_layout) {
-      this.$boussole_wrapper = $boussole_wrapper;
+      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;