fix(task): make sure the modal close button is not overlapped with the title field
continuous-integration/drone/pr Build is passing Details

This commit is contained in:
kolaente 2023-03-16 19:50:52 +01:00
parent fc8711d6d8
commit e8307d254b
Signed by: konrad
GPG Key ID: F40E70337AB24C9B
3 changed files with 9 additions and 4 deletions

View File

@ -193,17 +193,16 @@ $modal-width: 1024px;
}
.close {
$close-button-min-space: 84px;
$close-button-padding: 26px;
position: fixed;
top: 5px;
right: $close-button-padding;
color: var(--grey-900);
font-size: 2rem;
@media screen and (min-width: $desktop) and (max-width: calc(#{$desktop } + #{$close-button-min-space})) {
top: calc(5px + $modal-margin);
right: 50%;
right: 50%;
// we align the close button to the modal until there is enough space outside for it
transform: translateX(calc((#{$modal-width} / 2) - #{$close-button-padding}));
}

View File

@ -113,7 +113,7 @@ async function save(title: string) {
<style lang="scss" scoped>
.heading {
display: flex;
justify-content: space-between;
justify-content: flex-start;
text-transform: none;
align-items: center;
@ -134,6 +134,10 @@ async function save(title: string) {
@media screen and (max-width: $tablet) {
margin: 0 -.3rem .5rem -.3rem; // the title has 0.3rem padding - this make the text inside of it align with the rest
}
@media screen and (min-width: $tablet) and (max-width: #{$desktop + $close-button-min-space}) {
width: calc(100% - 5rem);
}
}
.title.task-id {

View File

@ -33,3 +33,5 @@ $switch-view-height: 2.69rem;
$navbar-height: 4rem;
$navbar-width: 300px;
$close-button-min-space: 84px;