From 92606c8f3278b35bbb5ff4a40dd3abcd36e5c10f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?C=C3=A9dric=20Krier?= <ced@b2ck.com>
Date: Fri, 30 Jan 2026 10:44:25 +0100
Subject: [PATCH] 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     | 28 ++++++++++++++++++++++++++--
 sao/src/view/form.js | 25 +++++++++++++------------
 2 files changed, 39 insertions(+), 14 deletions(-)

diff --git a/sao/src/sao.less b/sao/src/sao.less
index d10894cc6f..8731660cde 100644
--- a/sao/src/sao.less
+++ b/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;
         }
diff --git a/sao/src/view/form.js b/sao/src/view/form.js
index ec0b4973a3..5098643822 100644
--- a/sao/src/view/form.js
+++ b/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";
                 }
             }