fix(task): align task title on mobile popup

(cherry picked from commit cc64ca640635ad888670cb48bba390d2a8a07d8d)

frontend/src/components/home/ContentAuth.vue

@@ -48,7 +48,10 @@
 					class="task-detail-view-modal"
 					@close="closeModal()"
 				>
-					<component :is="currentModal" />
+					<component
+						:is="currentModal"
+						@close="closeModal()"
+					/>
 				</Modal>
 
 				<BaseButton

frontend/src/components/tasks/partials/Heading.vue

@@ -1,20 +1,26 @@
 <template>
 	<div class="heading">
-		<div class="flex is-align-items-center">
+		<div class="tw-flex tw-items-center md:tw-items-stretch tw-flex-col tw-gap-1 task-properties">
-			<BaseButton @click="copyUrl">
+			<div class="tw-flex tw-items-center tw-gap-2">
-				<h1 class="title task-id">
+				<ColorBubble
-					{{ textIdentifier }}
+					v-if="task.hexColor !== ''"
-				</h1>
+					:color="getHexColor(task.hexColor)"
-			</BaseButton>
+				/>
+				<BaseButton @click="copyUrl">
+					<h1 class="title task-id">
+						{{ textIdentifier }}
+					</h1>
+				</BaseButton>
+			</div>
 			<Done
-				class="heading__done"
 				:is-done="task.done"
 			/>
-			<ColorBubble
+			<BaseButton
-				v-if="task.hexColor !== ''"
+				class="close"
-				:color="getHexColor(task.hexColor)"
+				@click="$emit('close')"
-				class="ml-2"
+			>
-			/>
+				<Icon icon="times" />
+			</BaseButton>
 		</div>
 		<h1
 			class="title input"
@@ -26,6 +32,12 @@
 		>
 			{{ task.title.trim() }}
 		</h1>
+		<BaseButton
+			class="close"
+			@click="$emit('close')"
+		>
+			<Icon icon="times" />
+		</BaseButton>
 		<CustomTransition name="fade">
 			<span
 				v-if="loading && saving"
@@ -71,7 +83,8 @@ const props = withDefaults(defineProps<{
 })
 
 const emit = defineEmits<{
-	'update:task': [task: ITask]
+	'update:task': [task: ITask],
+	'close': [],
 }>()
 
 const router = useRouter()
@@ -138,14 +151,11 @@ async function save(title: string) {
 .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);
+	margin-right: 0;
 
 	@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% - 6.5rem);
-	}
 }
 
 .title.task-id {
@@ -153,12 +163,39 @@ async function save(title: string) {
 	white-space: nowrap;
 }
 
-.heading__done {
-	margin-left: .5rem;
-}
-
 .color-bubble {
 	height: .75rem;
 	width: .75rem;
 }
+
+.close {
+	font-size: 2rem;
+	margin-left: 0.5rem;
+	line-height: 1;
+
+	@media screen and (max-width: $tablet) {
+		display: none;
+	}
+	
+	@media screen and (min-width: #{$desktop + 1px}) {
+		display: none;
+	}
+}
+
+.task-properties .close {
+	display: none;
+	position: absolute;
+	right: 1.25rem;
+	top: 1.1rem;
+
+	@media screen and (max-width: $tablet) {
+		display: block;
+	}
+}
+
+.task-properties {
+	@media screen and (max-width: $tablet) {
+		flex-direction: row;
+	}
+}
 </style>

frontend/src/views/tasks/TaskDetailView.vue

@@ -16,6 +16,7 @@
 				:task="task"
 				:can-write="canWrite"
 				@update:task="Object.assign(task, $event)"
+				@close="$emit('close')"
 			/>
 			<h6
 				v-if="project?.id"
@@ -970,9 +971,8 @@ function setRelatedTasksActive() {
 	color: var(--text);
 	background-color: var(--site-background) !important;
 
-	@media screen and (max-width: 800px) {
+	@media screen and (max-width: calc(#{$desktop} + 1px)) {
 		border-radius: 0;
-		padding-top: 2rem;
 	}
 }
 

frontend/tailwind.config.js

@@ -6,8 +6,8 @@ module.exports = {
   },
   prefix: 'tw-',
   content: [
-    "./index.html",
+    './index.html',
-    "./src/**/*.{vue,js,ts}",
+    './src/**/*.{vue,js,ts}',
   ],
   theme: {
     extend: {},