From eca768dde9a9d11ed74288a2a0d49121d6cfd6fe Mon Sep 17 00:00:00 2001
From: Dominik Pschenitschni <mail@celement.de>
Date: Fri, 11 Nov 2022 21:57:45 +0100
Subject: [PATCH] fix: move heading styles to component

---
 src/components/tasks/partials/heading.vue | 30 +++++++++++++++++++++++
 src/views/tasks/TaskDetailView.vue        | 29 ----------------------
 2 files changed, 30 insertions(+), 29 deletions(-)

diff --git a/src/components/tasks/partials/heading.vue b/src/components/tasks/partials/heading.vue
index e2215ddab..73758a9fd 100644
--- a/src/components/tasks/partials/heading.vue
+++ b/src/components/tasks/partials/heading.vue
@@ -110,6 +110,36 @@ async function save(title: string) {
 </script>
 
 <style lang="scss" scoped>
+.heading {
+	display: flex;
+	justify-content: space-between;
+	text-transform: none;
+	align-items: center;
+
+	@media screen and (max-width: $tablet) {
+		flex-direction: column;
+		align-items: start;
+	}
+}
+
+.title {
+	margin-bottom: 0;
+}
+
+.title.input {
+	// 1.8rem is the font-size, 1.125 is the line-height, .3rem padding everywhere, 1px border around the whole thing.
+	min-height: calc(1.8rem * 1.125 + .6rem + 2px);
+
+	@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
+	}
+}
+
+.title.task-id {
+	color: var(--grey-400);
+	white-space: nowrap;
+}
+
 .heading__done {
 	margin-left: .5rem;
 }
diff --git a/src/views/tasks/TaskDetailView.vue b/src/views/tasks/TaskDetailView.vue
index ae999f9b0..f43993218 100644
--- a/src/views/tasks/TaskDetailView.vue
+++ b/src/views/tasks/TaskDetailView.vue
@@ -818,36 +818,7 @@ $flash-background-duration: 750ms;
     color: var(--grey-400);
   }
 
-  :deep(.heading) {
-    display: flex;
-    justify-content: space-between;
-    text-transform: none;
-    align-items: center;
 
-    @media screen and (max-width: $tablet) {
-      flex-direction: column;
-      align-items: start;
-    }
-
-    .title {
-      margin-bottom: 0;
-    }
-
-    .title.input {
-      // 1.8rem is the font-size, 1.125 is the line-height, .3rem padding everywhere, 1px border around the whole thing.
-      min-height: calc(1.8rem * 1.125 + .6rem + 2px);
-
-      @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
-      }
-    }
-
-    .title.task-id {
-      color: var(--grey-400);
-      white-space: nowrap;
-    }
-
-  }
 
   .date-input {
     display: flex;