Use column and row gap instead of padding to separate cells of grid

Using gap of grid allows to not loose the space when widgets are nested.
And keep top/bottom padding on small screen.

sao/src/sao.less

@@ -252,7 +252,7 @@ html[theme="default"] {
             display: flex;
             flex: 1;
             flex-direction: row;
-            padding: 0;
+            padding: 5px 0 0 0;
             min-height: 0;
 
             > div {
@@ -784,13 +784,14 @@ img.icon {
         display: grid;
         width: 100%;
         height: 100%;
+        column-gap: 5px;
+        row-gap: 5px;
     }
     .form-item {
         display: flex;
-        padding: 2px;
 
-        &.form-empty {
-            padding: 0px;
+        > .btn {
+            margin: 5px 0;
         }
     }
     .form-label {
@@ -882,6 +883,8 @@ img.icon {
         }
     }
     .form-one2many-content, .form-many2many-content {
+        padding: 5px;
+
         .treeview, .list-form {
             height: auto;
             min-height: 150px;
@@ -916,6 +919,8 @@ img.icon {
         }
     }
     .form-image {
+        margin: 2px;
+
         .caption {
             min-width: 120px;
         }
@@ -1149,6 +1154,10 @@ input.column-boolean {
     .form {
         .form-container, .form-hcontainer, .form-vcontainer {
             display: block;
+
+            .form-item {
+                padding: 2px 0;
+            }
         }
 
         .xalign-end {

sao/src/view/form.js

@@ -739,7 +739,6 @@ function eval_pyson(value){
                         break;
                     }
                 }
-                e.toggleClass('form-empty', empty);
                 return empty;
             };
             for (i = 0; i < grid_cols.length; i++) {