fix(task): make sure the modal close button is not overlapped with the title field

src/components/misc/modal.vue

@@ -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}));
 	}

src/components/tasks/partials/heading.vue

@@ -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 {

src/styles/common-imports.scss

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