<nuxeo-data-table> and editable attribute - rightmost display issue

When using the <nuxeo-data-table> element with the editable attribute, when shifting the display to the rightmost side, the last column shifts the display of the value "randomly" from the column titles

How to reproduce:

1. in Studio Modeler, create a "MyDoc" element, and in this document, create in the schema "mydoc" a multivalued string property strs and a single-valued user property user of type user/group
2. in Studio Designer, create the "create", "edit" and "view" views, and in the "view", make the display using the following:

       <nuxeo-page-provider id="nxProvider" provider="advanced_document_content" page-size="40" aggregations="" enrichers="thumbnail, permissions" params="[[params]]" schemas="dublincore,common,uid,file" headers="{ &quot;X-NXfetch.document&quot;: &quot;properties&quot;, &quot;X-NXtranslate.directoryEntry&quot;: &quot;label&quot; }" fetch-aggregates="">
       </nuxeo-page-provider>
   
       <nuxeo-data-table role="widget" editable items="{{document.properties.mydoc:strs}}">
   
         <nuxeo-data-table-column name="Test1"> <template>Tata</template> </nuxeo-data-table-column>      
         <nuxeo-data-table-column name="Test2"> <template>Tete</template> </nuxeo-data-table-column>      
         <nuxeo-data-table-column name="Test3"> <template><nuxeo-user-suggestion value="[[document.properties.mydoc:user]]" readonly="true" search-type="USER_GROUP_TYPE" role="widget"></nuxeo-user-suggestion></template> </nuxeo-data-table-column>      
         <nuxeo-data-table-column name="Test4"> <template>Toto</template> </nuxeo-data-table-column>      
         <nuxeo-data-table-column name="Test5"> <template>Tutu</template> </nuxeo-data-table-column>      
         <nuxeo-data-table-column name="Test6"> <template>Tyty</template> </nuxeo-data-table-column>      
         <nuxeo-data-table-column name="Test7"> <template>Tata</template> </nuxeo-data-table-column>      
         <nuxeo-data-table-column name="Test8"> <template>Tete</template> </nuxeo-data-table-column>      
         <nuxeo-data-table-column name="Test9"> <template>Titi</template> </nuxeo-data-table-column>      
         <nuxeo-data-table-column name="Test10"> <template>Toto</template> </nuxeo-data-table-column>      
         <nuxeo-data-table-column name="Test11"> <template>Tutu</template> </nuxeo-data-table-column>      
         <nuxeo-data-table-column name="Test12"> <template>Tyty</template> </nuxeo-data-table-column>    
   
       </nuxeo-data-table>
   

3. deploy the project
4. In Nuxeo, create a user with a very long ID (my_user_id_with_a_very_long_id)
5. In Nuxeo, create a MyDoc document and add 5+ properties "strs" and reference the previous user
6. display the document
   => the 12 columns rightmost end is hidden on the display => shift to the rightmost side and observe the values are misaligned with the title of the column
7. in Studio Designer, change to add the orderable attribute to <nuxeo-data-table>

       <nuxeo-data-table role="widget" editable orderable items="{{document.properties.mydoc:strs}}">
   

8. In Nuxeo, deploy the project and observe the last valued column is now correctly aligned with column titles and the trash is now hidden by the elevator bar

You can also observe in column 3 that the value of the very long user id is truncated on the display