From 692b4e93eceeece1abf68dbc9c31be9fce7814ae Mon Sep 17 00:00:00 2001
From: Pierre Paridans <app@odoo.com>
Date: Fri, 7 Oct 2022 15:12:17 +0000
Subject: [PATCH] [FIX] web: properties field matching group's alignment

This commit fixes the properties field alignment to make it more similar
to the form's group layout (using grid and its gap).

Steps to reproduce:
- Open CRM
- On a lead's form view
- Add properties
=> labels from second column aren't aligned with fields above

closes odoo/odoo#102730

X-original-commit: 5a1c14fe5761e964a2370883bf209b474e498918
Signed-off-by: Pierre Paridans (app) <app@odoo.com>
---
 .../src/views/fields/properties/properties_field.scss       | 4 ++++
 .../static/src/views/fields/properties/properties_field.xml | 6 +++---
 2 files changed, 7 insertions(+), 3 deletions(-)

diff --git a/addons/web/static/src/views/fields/properties/properties_field.scss b/addons/web/static/src/views/fields/properties/properties_field.scss
index c00c248670d..49cbfefe058 100644
--- a/addons/web/static/src/views/fields/properties/properties_field.scss
+++ b/addons/web/static/src/views/fields/properties/properties_field.scss
@@ -1,5 +1,9 @@
 .o_field_properties {
     width: 100%;
+
+    .o_group {
+        gap: map-get($spacers, 2) $o-horizontal-padding * 2;
+    }
 }
 
 // The web client will add a "o_field_invalid" class when the field is considered
diff --git a/addons/web/static/src/views/fields/properties/properties_field.xml b/addons/web/static/src/views/fields/properties/properties_field.xml
index 469ca38dcb0..c2ec1ef3a66 100644
--- a/addons/web/static/src/views/fields/properties/properties_field.xml
+++ b/addons/web/static/src/views/fields/properties/properties_field.xml
@@ -2,14 +2,14 @@
 <templates xml:space="preserve">
     <t t-name="web.PropertiesField" owl="1">
         <div t-ref="properties" class="w-100">
-            <div class="o_group w-100 d-flex flex-row flex-wrap my-0">
+            <div class="o_group w-100 grid my-0">
                 <div
                     t-foreach="propertiesList"
                     t-as="propertyConfiguration"
                     t-key="propertyConfiguration.name"
                     class="o_property_field d-flex flex-row align-items-center justify-content-start"
                     t-att-property-name="propertyConfiguration.name"
-                    t-attf-class="col-md-{{12 / props.columns}} col-sm-12">
+                    t-attf-class="g-col-lg-{{12 / props.columns}} g-col-12">
                     <div class="o_td_label">
                         <label t-attf-class="o_field_property_label o_form_label {{state.movedPropertyName === propertyConfiguration.name ? 'o_property_field_highlight' : ''}} d-flex flex-row align-items-center">
                             <b
@@ -42,7 +42,7 @@
                         />
                     </div>
                 </div>
-                <div class="o_field_property_add">
+                <div class="o_field_property_add" t-attf-class="g-col-lg-{{12 / props.columns}} g-col-12">
                     <button
                         t-if="!props.readonly &amp;&amp; state.canChangeDefinition"
                         class="btn btn-light text-muted m-0"