[renderjs_ui] Telephone displays in horizontal alignment

/reviewed-on nexedi/erp5!559

bt5/erp5_web_renderjs_ui/PathTemplateItem/web_page_module/rjs_gadget_erp5_nojqm_css.css

@@ -942,9 +942,6 @@ div[data-gadget-scope='header'] .ui-header ul {
 .gadget-content {
   padding: 24pt;
   padding-top: 66pt;
-  /* Disclaimer: Class .horizontal_align_form_box is here only for backward-compatibility!
-                 Don't rely on this class because it will be removed.
-                 It was used to force horizontal rendering of fields inside FormBox. */
   /*
   @media @smartphone {
     .ui-field-contain {
@@ -1000,8 +997,14 @@ div[data-gadget-scope='header'] .ui-header ul {
 .gadget-content .field_container > div > div > div.ui-field-contain div {
   width: 100%;
 }
-.gadget-content .horizontal_align_form_box .ui-field-contain > div {
-  display: block-inline;
+.gadget-content .horizontal_align_form_box .field_container > div {
+  /* Class .horizontal_align_form_box is here only for backward-compatibility!
+       It is used to force horizontal rendering of fields inside FormBox.
+       The first > div represents form-group ("left", "right" ...) */
+  display: flex;
+}
+.gadget-content .horizontal_align_form_box .field_container > div > div {
+  flex: 1;
 }
 .gadget-content .ui-content-header-plain {
   font-size: 150%;
@@ -1305,7 +1308,6 @@ div[data-gadget-scope='erp5_searchfield'] div.search_parsed_value button {
 .document_table table {
   width: 100%;
   text-align: left;
-  /* end-of tbody, tfoot*/
 }
 .document_table table th,
 .document_table table td {

bt5/erp5_web_renderjs_ui/PathTemplateItem/web_page_module/rjs_gadget_erp5_nojqm_css.xml

@@ -242,7 +242,7 @@
             </item>
             <item>
                 <key> <string>serial</string> </key>
-                <value> <string>964.49926.23272.20514</string> </value>
+                <value> <string>965.9188.33414.53213</string> </value>
             </item>
             <item>
                 <key> <string>state</string> </key>
@@ -260,7 +260,7 @@
                     </tuple>
                     <state>
                       <tuple>
-                        <float>1515762544.29</float>
+                        <float>1517236148.36</float>
                         <string>UTC</string>
                       </tuple>
                     </state>

bt5/erp5_web_renderjs_ui/SkinTemplateItem/portal_skins/erp5_web_renderjs_ui/erp5css.less.txt

@@ -1160,11 +1160,17 @@ div[data-gadget-scope='header'] .ui-header {
       width: 100%;
     }
   }
-  /* Disclaimer: Class .horizontal_align_form_box is here only for backward-compatibility!
-                 Don't rely on this class because it will be removed.
-                 It was used to force horizontal rendering of fields inside FormBox. */
-  .horizontal_align_form_box .ui-field-contain > div {
-    display: block-inline;
+
+  .horizontal_align_form_box .field_container > div {
+
+    /* Class .horizontal_align_form_box is here only for backward-compatibility!
+       It is used to force horizontal rendering of fields inside FormBox.
+       The first > div represents form-group ("left", "right" ...) */
+
+    display: flex;
+    & > div {
+      flex: 1;
+    }
   }
 
   .ui-content-header-plain {