From f4fe2b1b02f9ccc1f445e46be90a7c97b88ae9e2 Mon Sep 17 00:00:00 2001
From: Vesa Luusua <vesa.luusua@gmail.com>
Date: Wed, 7 Feb 2018 18:37:55 +0200
Subject: [PATCH] Fix Mobile Safari: BookingDates inputs is overflowing

---
 .../FieldDateRangeInput/FieldDateRangeInput.css          | 9 ++++++---
 1 file changed, 6 insertions(+), 3 deletions(-)

diff --git a/src/components/FieldDateRangeInput/FieldDateRangeInput.css b/src/components/FieldDateRangeInput/FieldDateRangeInput.css
index ca2c6a4a..1aaf063c 100644
--- a/src/components/FieldDateRangeInput/FieldDateRangeInput.css
+++ b/src/components/FieldDateRangeInput/FieldDateRangeInput.css
@@ -73,17 +73,20 @@
  * but calendar popup doesn't.
  */
 .mobileMargins {
-  width: calc(100% - 48px);
+  /* Mobile Safari couldn't handle width: calc(100vw - 48px); */
+  width: calc(100vw - 48px);
   margin: 0 24px;
 
   /* Gutter between inputs (when calendar is not visible) */
   & .startDateLabel,
   & .endDateLabel {
-    flex-basis: calc(50% - 6px);
+    /* Mobile Safari couldn't handle width: calc(50% - 6px); */
+    flex-basis: calc(50vw - 30px);
   }
 
   & .input {
-    flex-basis: calc(50% - 6px);
+    /* Mobile Safari couldn't handle width: calc(50% - 6px); */
+    flex-basis: calc(50vw - 30px);
     transition: all 0.15s ease-out;
   }