[FIX] web: status bar layout with many items and long names

Several status bar buttons having long names combined with several status
bar field items results to terrible layout.

To make it a little better:

- We wrap the status bar buttons so that each button will have single-line
  label.
- We also prevent the container of the statusbar field items from shrinking
  until a max-width of 50%.
  - In case there is multiple lines of status bar buttons and single line
    of statusbar field items, we keep the vertical alignment of the
    statusbar field items at the top.

This solution is not really very good but it's okayish.
A better solution can be like providing a way to allow dropdown menu for
the "extra" buttons that won't fit in a single line. For the future?

closes odoo/odoo#115987

Task-id: 3215622
X-original-commit: b1d51667b43c6404367b5cdfc8b17e722f39417c
Signed-off-by: Aaron Bohy (aab) <aab@odoo.com>
Signed-off-by: Joseph Caburnay (jcb) <jcb@odoo.com>

addons/web/static/src/views/form/form_controller.scss

@@ -309,8 +309,10 @@
         }
 
         > .o_field_widget {
-            align-self: center;
+            align-self: flex-start;
             margin-bottom: 0px;
+            flex-shrink: 0;
+            max-width: 50%;
         }
 
         > .o_statusbar_buttons {

addons/web/static/src/views/form/status_bar_buttons/status_bar_buttons.xml

@@ -2,7 +2,7 @@
 <templates xml:space="preserve">
 
     <t t-name="web.StatusBarButtons" owl="1">
-        <div class="o_statusbar_buttons d-flex align-items-center align-content-around">
+        <div class="o_statusbar_buttons d-flex align-items-center align-content-around flex-wrap">
             <t t-set="slots" t-value="visibleSlotNames" />
             <t t-if="env.isSmall and slots.length > 1">
                 <Dropdown togglerClass="'btn btn-primary'" showCaret="true">