[REF] web: control_panel: breadcrumb and cp_searchview flexible width

1) The size of the left part of the control panel will take free
space left. Normally, the width is always fixed to 50/50 but
now the breadcrumb can take more or less space if needed.
It will be useful on mobile where the search bar is dynamically
sized.

2) Control panel elements are split into two divs;
- breadcrumb and search bar are grouped to be in the top.
- buttons (o_cp_left) and pager (o_cp_right) in the bottom.
Now we can easily add antoher elements in the top or bottom
part of the control panel.

3) Control panel template is likely the same on mobile so
they are now merged.

4) Before this commit, we always had an empty parent even if
the search bar wasn't rendered. Removing it makes the DOM cleaner.
Because of this, we are not able to expose this area used to add
custom elements. Some code need to be adapted.

Task ID : 1924760

1 files changed, 18 insertions, 10 deletions

diff --git a/addons/web/static/src/scss/control_panel.scss b/addons/web/static/src/scss/control_panel.scss
index dd74c8ac010..c08695fc28d 100644
--- a/addons/web/static/src/scss/control_panel.scss
+++ b/addons/web/static/src/scss/control_panel.scss
@@ -1,13 +1,24 @@
 
 .o_control_panel {
-    display: flex;
-    flex-flow: row wrap;
     border-bottom: 1px solid darken($o-control-panel-background-color, 20%);
     @include o-webclient-padding($top: 10px, $bottom: 10px);
     background-color: $o-control-panel-background-color;
 
-    > .breadcrumb {
-        width: 50%;
+    > div {
+        display: flex;
+        justify-content: space-between;
+        min-height: 30px;
+    }
+
+    .breadcrumb, .o_cp_left {
+        flex: 1 1 auto;
+    }
+
+    .o_cp_searchview, .o_cp_right {
+        flex: 0 0 50%;
+    }
+
+    .breadcrumb {
         font-size: 18px;
 
         > li {
@@ -19,8 +30,7 @@
         }
     }
 
-    > .o_cp_searchview {
-        width: 50%;
+    .o_cp_searchview {
         min-height: $o-cp-breadcrumb-height;
     }
 
@@ -30,10 +40,9 @@
         background: white;
     }
 
-    > .o_cp_left {
+    .o_cp_left {
         display: flex;
         justify-content: space-between;
-        width: 50%;
         margin-top: 5px;
 
         > .o_cp_sidebar {
@@ -65,9 +74,8 @@
         }
     }
 
-    > .o_cp_right {
+    .o_cp_right {
         display: flex;
-        width: 50%;
         margin-top: 5px;
 
         > .o_cp_pager {