[MERGE] forward port branch saas-12.5 up to 58a83d12228

8 files changed, 68 insertions, 16 deletions

diff --git a/addons/web/static/src/scss/banner.scss b/addons/web/static/src/scss/banner.scss
index d7237203897..be011d70698 100644
--- a/addons/web/static/src/scss/banner.scss
+++ b/addons/web/static/src/scss/banner.scss
@@ -1,8 +1,9 @@
 .o_has_banner {
     .o_view_nocontent {
         top: 30%;
-        @media screen and (max-height:  map-get($grid-breakpoints, 'md')) {
+        @include media-breakpoint-down(sm) {
             position: relative;
+            margin: auto;
         }
     }
 }
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 {
diff --git a/addons/web/static/src/scss/fields.scss b/addons/web/static/src/scss/fields.scss
index b9f85f2d5c0..e3cba4e3770 100644
--- a/addons/web/static/src/scss/fields.scss
+++ b/addons/web/static/src/scss/fields.scss
@@ -196,6 +196,7 @@
                 img {
                     height: 18px;
                     width: 18px;
+                    object-fit: cover;
                 }
                 &.o_tag_color_0 {
                     background-color: #F1F1F1;
diff --git a/addons/web/static/src/scss/kanban_view.scss b/addons/web/static/src/scss/kanban_view.scss
index 18c96fb6171..a46d4632c24 100644
--- a/addons/web/static/src/scss/kanban_view.scss
+++ b/addons/web/static/src/scss/kanban_view.scss
@@ -122,6 +122,7 @@
                 .oe_kanban_avatar {
                     width: 20px;
                     height: 20px;
+                    object-fit: cover;
                     margin-left: 6px;
                 }
             }
diff --git a/addons/web/static/src/scss/list_view.scss b/addons/web/static/src/scss/list_view.scss
index 0d29c3cec21..0e62f071d42 100644
--- a/addons/web/static/src/scss/list_view.scss
+++ b/addons/web/static/src/scss/list_view.scss
@@ -201,7 +201,7 @@
                 right: 0;
                 top: 0;
                 width: 10px;
-                z-index: 10;
+                z-index: 1; // must be over the sort caret (::after pseudo-element)
             }
 
             .o_list_record_remove_header {
@@ -294,9 +294,11 @@
     }
 
     .o_optional_columns_dropdown_toggle {
+        cursor: pointer;
         width: 10px;
         text-align: center;
         line-height: 30px;
+        z-index: 1; // must be over the resize handle
     }
 
     .o_optional_columns {
diff --git a/addons/web/static/src/scss/modal.scss b/addons/web/static/src/scss/modal.scss
index f33aec59431..e7243042d35 100644
--- a/addons/web/static/src/scss/modal.scss
+++ b/addons/web/static/src/scss/modal.scss
@@ -96,6 +96,11 @@
     }
 }
 
+body.modal-open {
+    // Allow vertical scrolling in modals on iOS
+    -webkit-overflow-scrolling: touch;
+}
+
 // Temporary fix for modals which are not instantiated thanks to the Dialog
 // JS classes (deprecated case) (see bootstrap_overridden.scss) + Frontend.
 //
diff --git a/addons/web/static/src/scss/search_view_mobile.scss b/addons/web/static/src/scss/search_view_mobile.scss
index dd72aaae83b..bf68732b2e5 100644
--- a/addons/web/static/src/scss/search_view_mobile.scss
+++ b/addons/web/static/src/scss/search_view_mobile.scss
@@ -83,10 +83,6 @@
             }
         }
         .o_mobile_search_show_result {
-            position: fixed;
-            bottom: 0;
-            left: 0;
-            right: 0;
             padding: 15px;
             font-size: 17px;
         }
diff --git a/addons/web/static/src/scss/ui.scss b/addons/web/static/src/scss/ui.scss
index 9ab1729a4ac..5a46c9c01a8 100644
--- a/addons/web/static/src/scss/ui.scss
+++ b/addons/web/static/src/scss/ui.scss
@@ -91,3 +91,41 @@ span.o_force_ltr {
     /*rtl:ignore*/
     direction: ltr;
 }
+
+// To fill the available space while keeping aspect ratio (crop).
+// Assuming the important part of the image is its center.
+.o_object_fit_cover {
+    object-fit: cover;
+}
+
+.o_image_24_cover {
+    width: 24px;
+    height: 24px;
+    object-fit: cover;
+}
+
+.o_image_40_cover {
+    width: 40px;
+    height: 40px;
+    object-fit: cover;
+}
+
+.o_image_64_cover {
+    width: 64px;
+    height: 64px;
+    object-fit: cover;
+}
+
+// Keep ratio but avoid cropping (so part of the background becomes visible).
+.o_image_64_contain {
+    width: 64px;
+    height: 64px;
+    object-fit: contain;
+}
+
+// When having a square is not necessary, the image will take less space if any
+// of its width or height is smaller than 64px.
+.o_image_64_max {
+    max-width: 64px;
+    max-height: 64px;
+}