From 08f55292f3dd28a9dc7b5c4f34a3d9cdac584dfa Mon Sep 17 00:00:00 2001
From: kolaente <k@knt.li>
Date: Thu, 16 Mar 2023 19:50:52 +0100
Subject: [PATCH 1/2] fix(task): make sure the modal close button is not
 overlapped with the title field

---
 src/components/misc/modal.vue             | 1 -
 src/components/tasks/partials/heading.vue | 6 +++++-
 src/styles/common-imports.scss            | 2 ++
 3 files changed, 7 insertions(+), 2 deletions(-)

diff --git a/src/components/misc/modal.vue b/src/components/misc/modal.vue
index b7f968942..bad3b9565 100644
--- a/src/components/misc/modal.vue
+++ b/src/components/misc/modal.vue
@@ -195,7 +195,6 @@ $modal-width: 1024px;
 }
 
 .close {
-	$close-button-min-space: 84px;
 	$close-button-padding: 26px;
 	position: fixed;
 	top: 5px;
diff --git a/src/components/tasks/partials/heading.vue b/src/components/tasks/partials/heading.vue
index 53829db0e..1f02f83b1 100644
--- a/src/components/tasks/partials/heading.vue
+++ b/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 {
diff --git a/src/styles/common-imports.scss b/src/styles/common-imports.scss
index 82e596f69..f48fd87a1 100644
--- a/src/styles/common-imports.scss
+++ b/src/styles/common-imports.scss
@@ -37,3 +37,5 @@ $navbar-padding: 2rem;
 
 $vikunja-nav-color: var(--grey-700);
 $vikunja-nav-selected-width: 0.4rem;
+
+$close-button-min-space: 84px;
-- 
2.40.1


From 9ef592c5d092ba04caf82a91f9a0181df386f82f Mon Sep 17 00:00:00 2001
From: kolaente <k@knt.li>
Date: Sun, 22 Oct 2023 19:20:49 +0200
Subject: [PATCH 2/2] fix: make sure there's enough space for the close button

---
 src/components/misc/modal.vue             | 6 +++++-
 src/components/tasks/partials/heading.vue | 2 +-
 2 files changed, 6 insertions(+), 2 deletions(-)

diff --git a/src/components/misc/modal.vue b/src/components/misc/modal.vue
index bad3b9565..2bbd063b6 100644
--- a/src/components/misc/modal.vue
+++ b/src/components/misc/modal.vue
@@ -197,7 +197,7 @@ $modal-width: 1024px;
 .close {
 	$close-button-padding: 26px;
 	position: fixed;
-	top: 5px;
+	top: .5rem;
 	right: $close-button-padding;
 	color: var(--grey-900);
 	font-size: 2rem;
@@ -212,6 +212,10 @@ $modal-width: 1024px;
 	@media screen and (min-width: calc(#{$desktop	} + #{$close-button-min-space})) {
 		color: var(--white);
 	}
+
+	@media screen and (min-width: $tablet) and (max-width: #{$desktop + $close-button-min-space}) {
+		top: .75rem;
+	}
 }
 </style>
 
diff --git a/src/components/tasks/partials/heading.vue b/src/components/tasks/partials/heading.vue
index 1f02f83b1..78abca40c 100644
--- a/src/components/tasks/partials/heading.vue
+++ b/src/components/tasks/partials/heading.vue
@@ -136,7 +136,7 @@ async function save(title: string) {
 	}
 
 	@media screen and (min-width: $tablet) and (max-width: #{$desktop + $close-button-min-space}) {
-		width: calc(100% - 5rem);
+		width: calc(100% - 6.5rem);
 	}
 }
 
-- 
2.40.1