[FIX] web: daterangepicker style in mobile

The DateRangePicker on mobile has a few caveats (sic) like its
positionning which prevents the user from accessing the buttons (cf. out
of the viewport).

Steps to reproduce (on small device like iPhone 5/Moto G4):
- Open Time Off
- Click on New Time Off
- Click on From/To field
=> buttons are inaccessible

This commit fixes it restyling the daterangepicker on smaller screens to
display it as Bottom Sheet-like element (cf. popping from the bottom of
the screen and growing upto 90% of the viewport).

opw-2803227

closes odoo/odoo#97024

X-original-commit: dd2bd3c22c22c49a60ca0541f84a64c3a613971c
Signed-off-by: Adrien Dieudonné (adr) <adr@odoo.com>
Signed-off-by: Pierre Paridans (app) <app@odoo.com>

addons/web/static/src/legacy/scss/daterangepicker.scss

@@ -83,4 +83,29 @@
     .drp-buttons .drp-selected {
         display: none;
     }
+
+    @include media-breakpoint-down(sm) {
+        position: fixed;
+        top: auto !important;
+        left: 0 !important;
+        bottom: 0;
+        right: 0 !important;
+        width: auto;
+        max-height: 90vh;
+        overflow-y: auto;
+        @include border-top-radius(1rem);
+        box-shadow: $box-shadow-lg;
+
+        .drp-calendar {
+            max-width: inherit;
+            padding-right: 0 !important;
+            padding-left: 0 !important;
+        }
+
+        .drp-buttons {
+            position: sticky;
+            bottom: 0;
+            background-color: #fff;
+        }
+    }
 }