improve modal display on mobile

This commit is contained in:
memeriau 2022-03-01 00:30:05 +01:00
parent c5d238c134
commit a2e8b73d8e
2 changed files with 24 additions and 9 deletions

View File

@ -9,18 +9,28 @@
} }
.modalContent { .modalContent {
@include horizontal-vertical-center();
position: absolute; position: absolute;
bottom: auto;
right: auto;
padding: 15px; padding: 15px;
max-height: 80vh;
outline: 0; outline: 0;
background-color: $color-white; background-color: $color-white;
@include mobile {
top: 0;
bottom: 0;
left: 0;
right: 0;
overflow-y: auto;
}
@include desktop {
@include horizontal-vertical-center();
bottom: auto;
right: auto;
max-height: 80vh;
border-radius: 15px; border-radius: 15px;
border: $border-large; border: $border-large;
} }
}
.closeButton { .closeButton {
position: absolute; position: absolute;

View File

@ -2,8 +2,10 @@
@import "../../../theme/mixins"; @import "../../../theme/mixins";
.root { .root {
@include desktop {
width: 680px; width: 680px;
} }
}
.title { .title {
padding: 4px; padding: 4px;
@ -21,8 +23,11 @@
} }
.formArea { .formArea {
display: flex;
margin-bottom: 10px; margin-bottom: 10px;
@include desktop {
display: flex;
}
} }
.leftCol { .leftCol {