From bd83294ac0cd8ae1bbb9f8a46522cf86683a6f22 Mon Sep 17 00:00:00 2001
From: kolaente <k@knt.li>
Date: Sat, 18 Nov 2023 17:03:47 +0100
Subject: [PATCH] fix(editor): alignment and focus states

---
 src/components/input/editor/TipTap.vue        | 14 +++++++++-----
 src/components/tasks/partials/description.vue |  8 ++++++++
 2 files changed, 17 insertions(+), 5 deletions(-)

diff --git a/src/components/input/editor/TipTap.vue b/src/components/input/editor/TipTap.vue
index 1f324c870..de1423f07 100644
--- a/src/components/input/editor/TipTap.vue
+++ b/src/components/input/editor/TipTap.vue
@@ -520,14 +520,18 @@ function setFocusToEditor(event) {
 .tiptap__editor {
 	&.tiptap__editor-is-edit-enabled {
 		min-height: 10rem;
+		
+		.ProseMirror {
+			padding: .5rem;
+		}
+		
+		&:focus-within, &:focus {
+			box-shadow: 0 0 0 2px hsla(var(--primary-hsl), 0.5);
+		}
 	}
 
 	transition: box-shadow $transition;
 	border-radius: $radius;
-
-	&:focus-within, &:focus {
-		box-shadow: 0 0 0 2px hsla(var(--primary-hsl), 0.5);
-	}
 }
 
 .tiptap p::before {
@@ -540,7 +544,7 @@ function setFocusToEditor(event) {
 
 // Basic editor styles
 .ProseMirror {
-	padding: .5rem;
+	padding: .5rem .5rem .5rem 0;
 
 	&:focus-within, &:focus {
 		box-shadow: none;
diff --git a/src/components/tasks/partials/description.vue b/src/components/tasks/partials/description.vue
index fdff365e5..8e2186a77 100644
--- a/src/components/tasks/partials/description.vue
+++ b/src/components/tasks/partials/description.vue
@@ -17,6 +17,7 @@
 			</CustomTransition>
 		</h3>
 		<editor
+			class="tiptap__task-description"
 			:is-edit-enabled="canWrite"
 			:upload-callback="uploadCallback"
 			:placeholder="$t('task.description.placeholder')"
@@ -123,3 +124,10 @@ async function uploadCallback(files: File[] | FileList): (Promise<string[]>) {
 }
 </script>
 
+<style lang="scss" scoped>
+.tiptap__task-description {
+	// The exact amount of pixels we need to make the description icon align with the buttons and the form inside the editor.
+	// The icon is not exactly the same length on all sides so we need to hack our way around it.
+	margin-left: 4px;
+}
+</style>