Remove gap for empty row or column

The container gap is still applied on invisible element if they are defined in
the template.
The solution is to fake gap using margin between consecutive elements and to
not display empty elements.
For column gap the horizontal margin must be compensated with negative margin
on the grid and padding on the elements to avoid to overflow the grid.

Closes #13852

sao/src/sao.less

@@ -1102,12 +1102,36 @@ img.icon {
         display: grid;
         width: 100%;
         height: 100%;
-        column-gap: 5px;
-        row-gap: 5px;
+
+        // fake gap with margins to remove gap on empty
+        column-gap: 0;
+        row-gap: 0;
+        margin-left: -5px;
+        > * {
+            padding-left: 5px;
+        }
+        > * + * {
+            margin-top: 5px;
+            margin-left: 5px;
+        }
+    }
+    .form-hcontainer{
+        > * + * {
+            margin-top: 0;
+        }
+    }
+    .form-vcontainer{
+        > * + * {
+            margin-left: 0;
+        }
     }
     .form-item {
         display: flex;
 
+        &.empty {
+            display: none;
+        }
+
         > .btn {
             margin: 5px 0;
         }

sao/src/view/form.js

@@ -720,6 +720,16 @@ function eval_pyson(value){
             for (i = 0; i < grid_rows.length; i++) {
                 rows.push([]);
             }
+            function set_empty(e) {
+                let empty = true;
+                for (const child of e.children(':not(.tooltip)')) {
+                    if (jQuery(child).css('display') != 'none') {
+                        empty = false;
+                        break;
+                    }
+                }
+                e.toggleClass('empty', empty);
+            };
             var col_start, col_end, row_start, row_end;
             for (var child of this.el.children()) {
                 child = jQuery(child);
@@ -735,27 +745,18 @@ function eval_pyson(value){
                 for (i = row_start; i < row_end; i++) {
                     rows[i - 1].push(child);
                 }
+                set_empty(child);
             }
             var row, col;
-            var is_empty = function(e) {
-                var empty = true;
-                for (const child of e.children(':not(.tooltip)')) {
-                    if (jQuery(child).css('display') != 'none') {
-                        empty = false;
-                        break;
-                    }
-                }
-                return empty;
-            };
             for (i = 0; i < grid_cols.length; i++) {
                 col = cols[i];
-                if (col.every(is_empty)) {
+                if (col.every(e => e.hasClass('empty'))) {
                     grid_cols[i] = "0px";
                 }
             }
             for (i = 0; i < grid_rows.length; i++) {
                 row = rows[i];
-                if (row.every(is_empty)) {
+                if (row.every(e => e.hasClass('empty'))) {
                     grid_rows[i] = "0px";
                 }
             }