[FIX] form control panel: display long breadcrumbs correctly

UI improvements for form control panel to correctly display long breadcrumbs.
It touches both desktop and mobile views.
Before this commit Action menu, Pager and Create button shifted by long breadcrumbs outside the screen.

closes odoo/odoo#104208

X-original-commit: f2b71d51aa409eae435f31d433dac4290c2b80ab
Signed-off-by: Romeo Fragomeli (rfr) <rfr@odoo.com>

addons/web/static/src/search/control_panel/control_panel.scss

@@ -80,6 +80,7 @@
 
     .breadcrumb {
         font-size: 18px;
+        max-width: 100%;
 
         > li {
             @include o-text-overflow();
@@ -190,6 +191,7 @@
         display: flex;
         flex-wrap: wrap;
         justify-content: flex-end;
+        align-items: center;
         column-gap: $o-horizontal-padding;
 
         > .o_cp_pager {

addons/web/static/src/views/form/control_panel/form_control_panel.xml

@@ -4,7 +4,7 @@
     <t t-name="web.FormControlPanel" owl="1">
         <div class="o_control_panel" t-ref="root">
             <div t-if="display['top']" class="o_cp_top">
-                <div class="o_cp_top_left w-auto d-flex flex-grow-1 align-items-center">
+                <div class="o_cp_top_left d-flex flex-grow-1 align-items-center">
                     <t t-if="display['top-left']">
                         <t t-slot="control-panel-breadcrumb">
                             <t t-if="env.isSmall">

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

@@ -935,7 +935,7 @@
             padding-right: 16px;
 
             > div.o_cp_top {
-                display: grid;
+                flex-flow: column;
             }
         }