scandic/web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merged in fix/SW-2675 (pull request #2039)

Browse Source 
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
This commit is contained in:
Arvid Norlin
2025-05-12 07:13:21 +00:00
parent f4c31449c3
commit cbc0175979
2 changed files with 12 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
apps/scandic-web/components/DatePicker/Range/mobile.module.css
View File

@@ -1,6 +1,6 @@
.container { .container {
--header-height: 72px; --header-height: 72px;
--sticky-button-height: 120px; --sticky-button-height: 124px;
display: grid; display: grid;
grid-template-areas: grid-template-areas:
@@ -60,7 +60,7 @@ div.months {
} }
.month:last-of-type { .month:last-of-type {
padding-bottom: var(--sticky-button-height); padding-bottom: calc(var(--sticky-button-height) + var(--Spacing-x2));
} }
.monthCaption { .monthCaption {
@@ -81,9 +81,10 @@ div.months {
display: flex; display: flex;
grid-area: content; grid-area: content;
padding: var(--Spacing-x1) var(--Spacing-x2) var(--Spacing-x7); padding: var(--Spacing-x1) var(--Spacing-x2) var(--Spacing-x7);
position: sticky; position: fixed;
top: calc(100vh - var(--sticky-button-height)); bottom: 0;
width: 100%; right: 0;
left: 0;
z-index: 10; z-index: 10;
} }

11
apps/scandic-web/components/DatePicker/Single/mobile.module.css
View File

@@ -1,6 +1,6 @@
.container { .container {
--header-height: 72px; --header-height: 72px;
--sticky-button-height: 120px; --sticky-button-height: 124px;
display: grid; display: grid;
grid-template-areas: grid-template-areas:
@@ -58,7 +58,7 @@ div.months {
} }
.month:last-of-type { .month:last-of-type {
padding-bottom: var(--sticky-button-height); padding-bottom: calc(var(--sticky-button-height) + var(--Spacing-x2));
} }
.monthCaption { .monthCaption {
@@ -79,9 +79,10 @@ div.months {
display: flex; display: flex;
grid-area: content; grid-area: content;
padding: var(--Spacing-x1) var(--Spacing-x2) var(--Spacing-x7); padding: var(--Spacing-x1) var(--Spacing-x2) var(--Spacing-x7);
position: sticky; position: fixed;
top: calc(100vh - var(--sticky-button-height)); bottom: 0;
width: 100%; left: 0;
right: 0;
z-index: 10; z-index: 10;
} }