web_renderjs_ui: increase space between listbox column header and sort icon

The space between listbox column header and icon used to display the sort order
was a bit too small, making it hard to see if the sort was ascending or descending
sometimes.

To have more space, set a margin-right on the before pseudo-element, like we are
already doing for buttons with text and icon.

bt5/erp5_web_renderjs_ui/PathTemplateItem/web_page_module/rjs_gadget_erp5_nojqm_css.css

@@ -1438,6 +1438,10 @@ div.invisible_header .document_table .ui-table-header {
 .document_table table tfoot tr th {
   padding: 6pt 3pt;
 }
+.document_table table thead tr th.ui-icon::before,
+.document_table table tfoot tr th.ui-icon::before {
+  margin-right: 6pt;
+}
 @media not screen and (min-width: 45em) {
   .document_table table thead,
   .document_table table tfoot {

bt5/erp5_web_renderjs_ui/PathTemplateItem/web_page_module/rjs_gadget_erp5_nojqm_css.xml

@@ -262,7 +262,7 @@
                           </tuple>
                           <state>
                             <tuple>
-                              <float>1593579172.65</float>
+                              <float>1602657030.85</float>
                               <string>GMT+2</string>
                             </tuple>
                           </state>

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

@@ -1681,10 +1681,16 @@ div[data-gadget-scope='erp5_searchfield'] {
         text-decoration: underline;
       }
 
+      tr {
+        th {
           // XXX Same than cells
-      tr { th {
           padding: @margin-size @half-margin-size;
-      }}
+
+          &.ui-icon::before {
+            margin-right: @margin-size;
+          }
+        }
+      }
 
       // text-align: center;