[REF] *: BS4, adapt media queries

media queries that target a specific screen size handled by bootstrap
have now a more convenient way to be defined:

```
@​media (min-width: $screen-sm-min) { ... }
->
@​include media-breakpoint-up(sm) { ... }
```

```
@​media (max-width: $screen-sm-max) { ... }
->
@​include media-breakpoint-down(sm) { ... }
```

```
@​media (min-width: $screen-sm-min) and (max-width: $screen-sm-max) { ... }
->
@​include media-breakpoint-only(sm) { ... }
```

```
@​media (min-width: $screen-sm-min) and (max-width: $screen-md-max) { ... }
->
@​include media-breakpoint-between(sm, md) { ... }
```

Also, bootstrap has changed the values for its default screen sizes:

------------------
     | BS3 | BS4 |
------------------
0    | XS  | XS  | -> Portrait Mobile
576  | /   | SM  | -> Landscape Mobile
768  | SM  | MD  | -> Portrait Tablet
992  | MD  | LG  | -> Landscape Tablet / Small Desktop
1200 | LG  | XL  | -> Desktop
------------------

While it is possible to configure BS variables to behave as BS3, we took
the decision to keep the BS4 variables untouched. BS4 system seems
indeed better and having the purest bootstrap possible is better for
Odoo to be used as a framework.

1 files changed, 1 insertions, 1 deletions

diff --git a/addons/web/static/src/scss/control_panel.scss b/addons/web/static/src/scss/control_panel.scss
index 345009ac3e9..54a8eb4ef76 100644
--- a/addons/web/static/src/scss/control_panel.scss
+++ b/addons/web/static/src/scss/control_panel.scss
@@ -93,7 +93,7 @@
 
         > .o_cp_switch_buttons > .btn:first-child {
             margin-left: $o-horizontal-padding;
-            @media (max-width: $screen-xs-max) {
+            @include media-breakpoint-down(sm) {
                 margin-left: $o-horizontal-padding - 6;
             }
         }