From cbc01759793abaada5eba75a5978c7f1dee3016e Mon Sep 17 00:00:00 2001
From: Arvid Norlin <arvid.norlin@scandichotels.com>
Date: Mon, 12 May 2025 07:13:21 +0000
Subject: [PATCH] Merged in fix/SW-2675 (pull request #2039)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

fix(SW-2675): fix safari date picker button positioning bug

* fix(SW-2675): fix safari date picker button positioning bug


Approved-by: Christian Andolf
Approved-by: Matilda Landström
---
 .../components/DatePicker/Range/mobile.module.css     | 11 ++++++-----
 .../components/DatePicker/Single/mobile.module.css    | 11 ++++++-----
 2 files changed, 12 insertions(+), 10 deletions(-)

diff --git a/apps/scandic-web/components/DatePicker/Range/mobile.module.css b/apps/scandic-web/components/DatePicker/Range/mobile.module.css
index 8e16cf3fd..c18216f82 100644
--- a/apps/scandic-web/components/DatePicker/Range/mobile.module.css
+++ b/apps/scandic-web/components/DatePicker/Range/mobile.module.css
@@ -1,6 +1,6 @@
 .container {
   --header-height: 72px;
-  --sticky-button-height: 120px;
+  --sticky-button-height: 124px;
 
   display: grid;
   grid-template-areas:
@@ -60,7 +60,7 @@ div.months {
 }
 
 .month:last-of-type {
-  padding-bottom: var(--sticky-button-height);
+  padding-bottom: calc(var(--sticky-button-height) + var(--Spacing-x2));
 }
 
 .monthCaption {
@@ -81,9 +81,10 @@ div.months {
   display: flex;
   grid-area: content;
   padding: var(--Spacing-x1) var(--Spacing-x2) var(--Spacing-x7);
-  position: sticky;
-  top: calc(100vh - var(--sticky-button-height));
-  width: 100%;
+  position: fixed;
+  bottom: 0;
+  right: 0;
+  left: 0;
   z-index: 10;
 }
 
diff --git a/apps/scandic-web/components/DatePicker/Single/mobile.module.css b/apps/scandic-web/components/DatePicker/Single/mobile.module.css
index fa4b6cf55..d4f76f7a0 100644
--- a/apps/scandic-web/components/DatePicker/Single/mobile.module.css
+++ b/apps/scandic-web/components/DatePicker/Single/mobile.module.css
@@ -1,6 +1,6 @@
 .container {
   --header-height: 72px;
-  --sticky-button-height: 120px;
+  --sticky-button-height: 124px;
 
   display: grid;
   grid-template-areas:
@@ -58,7 +58,7 @@ div.months {
 }
 
 .month:last-of-type {
-  padding-bottom: var(--sticky-button-height);
+  padding-bottom: calc(var(--sticky-button-height) + var(--Spacing-x2));
 }
 
 .monthCaption {
@@ -79,9 +79,10 @@ div.months {
   display: flex;
   grid-area: content;
   padding: var(--Spacing-x1) var(--Spacing-x2) var(--Spacing-x7);
-  position: sticky;
-  top: calc(100vh - var(--sticky-button-height));
-  width: 100%;
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  right: 0;
   z-index: 10;
 }