From 15215b30a0a0dd693d5ceb4a213f6d68e93b97e7 Mon Sep 17 00:00:00 2001
From: kolaente <k@knt.li>
Date: Wed, 13 Mar 2024 17:19:15 +0100
Subject: [PATCH] fix(filters): rework filter popup button

---
 .../project/partials/filter-popup.vue         |   7 -
 .../components/project/partials/filters.vue   |  12 +
 frontend/src/styles/components/project.scss   |  41 +--
 frontend/src/views/project/ProjectKanban.vue  |  48 +--
 frontend/src/views/project/ProjectList.vue    |  78 +---
 frontend/src/views/project/ProjectTable.vue   | 336 +++++++++---------
 6 files changed, 232 insertions(+), 290 deletions(-)

diff --git a/frontend/src/components/project/partials/filter-popup.vue b/frontend/src/components/project/partials/filter-popup.vue
index 4c4d3eb5c..eaef47288 100644
--- a/frontend/src/components/project/partials/filter-popup.vue
+++ b/frontend/src/components/project/partials/filter-popup.vue
@@ -1,11 +1,4 @@
 <template>
-	<x-button
-		v-if="hasFilters"
-		variant="secondary"
-		@click="clearFilters"
-	>
-		{{ $t('filters.clear') }}
-	</x-button>
 	<x-button
 		variant="secondary"
 		icon="filter"
diff --git a/frontend/src/components/project/partials/filters.vue b/frontend/src/components/project/partials/filters.vue
index 85da6412c..8b484d506 100644
--- a/frontend/src/components/project/partials/filters.vue
+++ b/frontend/src/components/project/partials/filters.vue
@@ -25,6 +25,13 @@
 			v-if="hasFooter"
 			#footer
 		>
+			<x-button
+				variant="secondary"
+				@click.prevent.stop="clearFiltersAndEmit"
+				class="mr-2"
+			>
+				{{ $t('filters.clear') }}
+			</x-button>
 			<x-button
 				variant="primary"
 				@click.prevent.stop="changeAndEmitButton"
@@ -130,4 +137,9 @@ function changeAndEmitButton() {
 	change()
 	emit('showResultsButtonClicked')
 }
+
+function clearFiltersAndEmit() {
+	params.value.filter = ''
+	changeAndEmitButton()
+}
 </script>
diff --git a/frontend/src/styles/components/project.scss b/frontend/src/styles/components/project.scss
index b94b1da9c..8c9efb929 100644
--- a/frontend/src/styles/components/project.scss
+++ b/frontend/src/styles/components/project.scss
@@ -18,13 +18,11 @@ $filter-container-top-link-share-list: -47px;
   margin-top: $filter-container-top-default;
   z-index: 4;
 
-  .items {
-    display: flex;
-    justify-content: flex-end;
+  display: flex;
+  justify-content: flex-end;
 
-    .button:not(:last-of-type) {
-      margin-right: .5rem;
-    }
+  .button:not(:last-of-type) {
+    margin-right: .5rem;
   }
 
   .button {
@@ -35,37 +33,6 @@ $filter-container-top-link-share-list: -47px;
     text-align: left;
   }
 
-  .fancycheckbox {
-    display: block;
-  }
-
-  .search {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    margin-right: .5rem;
-
-    .field {
-      transition: width $transition;
-      width: 100%;
-
-      &.hidden {
-        width: 0;
-        height: 0;
-        margin: 0;
-        overflow: hidden;
-      }
-
-      .button {
-        height: 100%;
-      }
-    }
-  }
-
-  .filters input {
-    font-size: .9rem;
-  }
-
   @media screen and (max-width: $tablet) {
     position: static;
     margin: 0 0 1rem 0 !important;
diff --git a/frontend/src/views/project/ProjectKanban.vue b/frontend/src/views/project/ProjectKanban.vue
index 9793235bb..8345e4eda 100644
--- a/frontend/src/views/project/ProjectKanban.vue
+++ b/frontend/src/views/project/ProjectKanban.vue
@@ -5,13 +5,11 @@
 		view-name="kanban"
 	>
 		<template #header>
-			<div
-				v-if="!isSavedFilter(project)"
-				class="filter-container"
-			>
-				<div class="items">
-					<FilterPopup v-model="params" />
-				</div>
+			<div class="filter-container">
+				<FilterPopup
+					v-if="!isSavedFilter(project)"
+					v-model="params"
+				/>
 			</div>
 		</template>
 
@@ -47,7 +45,7 @@
 										v-tooltip="$t('project.kanban.doneBucketHint')"
 										class="icon is-small has-text-success mr-2"
 									>
-										<icon icon="check-double" />
+										<icon icon="check-double"/>
 									</span>
 									<h2
 										class="title input"
@@ -197,7 +195,9 @@
 												variant="secondary"
 												@click="toggleShowNewTaskInput(bucket.id)"
 											>
-												{{ bucket.tasks.length === 0 ? $t('project.kanban.addTask') : $t('project.kanban.addAnotherTask') }}
+												{{
+													bucket.tasks.length === 0 ? $t('project.kanban.addTask') : $t('project.kanban.addAnotherTask')
+												}}
 											</x-button>
 										</div>
 									</template>
@@ -290,7 +290,11 @@ import KanbanCard from '@/components/tasks/partials/kanban-card.vue'
 import Dropdown from '@/components/misc/dropdown.vue'
 import DropdownItem from '@/components/misc/dropdown-item.vue'
 
-import {getCollapsedBucketState, saveCollapsedBucketState, type CollapsedBuckets} from '@/helpers/saveCollapsedBucketState'
+import {
+	type CollapsedBuckets,
+	getCollapsedBucketState,
+	saveCollapsedBucketState,
+} from '@/helpers/saveCollapsedBucketState'
 import {calculateItemPosition} from '@/helpers/calculateItemPosition'
 
 import {isSavedFilter} from '@/services/savedFilter'
@@ -322,7 +326,7 @@ const kanbanStore = useKanbanStore()
 const taskStore = useTaskStore()
 const projectStore = useProjectStore()
 
-const taskContainerRefs = ref<{[id: IBucket['id']]: HTMLElement}>({})
+const taskContainerRefs = ref<{ [id: IBucket['id']]: HTMLElement }>({})
 const bucketLimitInputRef = ref<HTMLInputElement | null>(null)
 
 const drag = ref(false)
@@ -334,18 +338,18 @@ const bucketToDelete = ref(0)
 const bucketTitleEditable = ref(false)
 
 const newTaskText = ref('')
-const showNewTaskInput = ref<{[id: IBucket['id']]: boolean}>({})
+const showNewTaskInput = ref<{ [id: IBucket['id']]: boolean }>({})
 
 const newBucketTitle = ref('')
 const showNewBucketInput = ref(false)
-const newTaskError = ref<{[id: IBucket['id']]: boolean}>({})
+const newTaskError = ref<{ [id: IBucket['id']]: boolean }>({})
 const newTaskInputFocused = ref(false)
 
 const showSetLimitInput = ref(false)
 const collapsedBuckets = ref<CollapsedBuckets>({})
 
 // We're using this to show the loading animation only at the task when updating it
-const taskUpdating = ref<{[id: ITask['id']]: boolean}>({})
+const taskUpdating = ref<{ [id: ITask['id']]: boolean }>({})
 const oneTaskUpdating = ref(false)
 
 const params = ref<TaskFilterParams>({
@@ -378,7 +382,7 @@ const bucketDraggableComponentData = computed(() => ({
 	],
 }))
 const canWrite = computed(() => baseStore.currentProject?.maxRight > Rights.READ)
-const project = computed(() => projectId ? projectStore.projects[projectId]: null)
+const project = computed(() => projectId ? projectStore.projects[projectId] : null)
 
 const buckets = computed(() => kanbanStore.buckets)
 const loading = computed(() => kanbanStore.isLoading)
@@ -497,7 +501,7 @@ async function updateTaskPosition(e) {
 		await taskStore.update(newTask)
 
 		// Make sure the first and second task don't both get position 0 assigned
-		if(newTaskIndex === 0 && taskAfter !== null && taskAfter.kanbanPosition === 0) {
+		if (newTaskIndex === 0 && taskAfter !== null && taskAfter.kanbanPosition === 0) {
 			const taskAfterAfter = newBucket.tasks[newTaskIndex + 2] ?? null
 			const newTaskAfter = klona(taskAfter) // cloning the task to avoid pinia store manipulation
 			newTaskAfter.bucketId = newBucket.id
@@ -602,7 +606,7 @@ function updateBuckets(value: IBucket[]) {
 }
 
 // TODO: fix type
-function updateBucketPosition(e: {newIndex: number}) {
+function updateBucketPosition(e: { newIndex: number }) {
 	// (2) bucket positon is changed
 	dragBucket.value = false
 
@@ -631,19 +635,19 @@ async function saveBucketLimit(bucketId: IBucket['id'], limit: number) {
 	success({message: t('project.kanban.bucketLimitSavedSuccess')})
 }
 
-const setBucketLimitCancel = ref<number|null>(null)
+const setBucketLimitCancel = ref<number | null>(null)
 
 async function setBucketLimit(bucketId: IBucket['id'], now: boolean = false) {
 	const limit = parseInt(bucketLimitInputRef.value?.value || '')
-	
+
 	if (setBucketLimitCancel.value !== null) {
 		clearTimeout(setBucketLimitCancel.value)
 	}
-	
+
 	if (now) {
 		return saveBucketLimit(bucketId, limit)
 	}
-	
+
 	setBucketLimitCancel.value = setTimeout(saveBucketLimit, 2500, bucketId, limit)
 }
 
@@ -739,6 +743,7 @@ $filter-container-height: '1rem - #{$switch-view-height}';
 		* {
 			opacity: 0;
 		}
+
 		&::after {
 			content: '';
 			position: absolute;
@@ -780,6 +785,7 @@ $filter-container-height: '1rem - #{$switch-view-height}';
 			&:first-of-type {
 				padding-top: .5rem;
 			}
+
 			&:last-of-type {
 				padding-bottom: .5rem;
 			}
diff --git a/frontend/src/views/project/ProjectList.vue b/frontend/src/views/project/ProjectList.vue
index 060b734ca..399f217bf 100644
--- a/frontend/src/views/project/ProjectList.vue
+++ b/frontend/src/views/project/ProjectList.vue
@@ -5,52 +5,12 @@
 		view-name="project"
 	>
 		<template #header>
-			<div
-				v-if="!isSavedFilter(project)"
-				class="filter-container"
-			>
-				<div class="items">
-					<div class="search">
-						<div
-							:class="{ hidden: !showTaskSearch }"
-							class="field has-addons"
-						>
-							<div class="control has-icons-left has-icons-right">
-								<input
-									v-model="searchTerm"
-									v-focus
-									class="input"
-									:placeholder="$t('misc.search')"
-									type="text"
-									@blur="hideSearchBar()"
-									@keyup.enter="searchTasks"
-								>
-								<span class="icon is-left">
-									<icon icon="search" />
-								</span>
-							</div>
-							<div class="control">
-								<x-button
-									:loading="loading"
-									:shadow="false"
-									@click="searchTasks"
-								>
-									{{ $t('misc.search') }}
-								</x-button>
-							</div>
-						</div>
-						<x-button
-							v-if="!showTaskSearch"
-							icon="search"
-							variant="secondary"
-							@click="showTaskSearch = !showTaskSearch"
-						/>
-					</div>
-					<FilterPopup
-						v-model="params"
-						@update:modelValue="prepareFiltersAndLoadTasks()"
-					/>
-				</div>
+			<div class="filter-container">
+				<FilterPopup
+					v-if="!isSavedFilter(project)"
+					v-model="params"
+					@update:modelValue="prepareFiltersAndLoadTasks()"
+				/>
 			</div>
 		</template>
 
@@ -113,14 +73,14 @@
 							>
 								<template v-if="canWrite">
 									<span class="icon handle">
-										<icon icon="grip-lines" />
+										<icon icon="grip-lines"/>
 									</span>
 								</template>
 							</SingleTaskInProject>
 						</template>
 					</draggable>
 
-					<Pagination 
+					<Pagination
 						:total-pages="totalPages"
 						:current-page="currentPage"
 					/>
@@ -131,7 +91,7 @@
 </template>
 
 <script lang="ts">
-export default { name: 'List' }
+export default {name: 'List'}
 </script>
 
 <script setup lang="ts">
@@ -183,7 +143,7 @@ const {
 	searchTerm,
 	params,
 	sortByParam,
-} = useTaskList(() => projectId, {position: 'asc' })
+} = useTaskList(() => projectId, {position: 'asc'})
 
 const tasks = ref<ITask[]>([])
 watch(
@@ -203,7 +163,7 @@ watch(
 
 			// If the task is a subtask, make sure the parent task is available in the current view as well
 			for (const pt of t.relatedTasks.parenttask) {
-				if(typeof tasksById[pt.id] === 'undefined') {
+				if (typeof tasksById[pt.id] === 'undefined') {
 					return true
 				}
 			}
@@ -265,16 +225,16 @@ function hideSearchBar() {
 }
 
 const addTaskRef = ref<typeof AddTask | null>(null)
+
 function focusNewTaskInput() {
 	addTaskRef.value?.focusTaskInput()
 }
 
 function updateTaskList(task: ITask) {
-	if (isAlphabeticalSorting.value ) {
+	if (isAlphabeticalSorting.value) {
 		// reload tasks with current filter and sorting
 		loadTasks()
-	}
-	else {
+	} else {
 		allTasks.value = [
 			task,
 			...allTasks.value,
@@ -310,8 +270,8 @@ async function saveTaskPosition(e) {
 }
 
 function prepareFiltersAndLoadTasks() {
-	if(isAlphabeticalSorting.value) {
-		sortByParam.value = {} 
+	if (isAlphabeticalSorting.value) {
+		sortByParam.value = {}
 		sortByParam.value[ALPHABETICAL_SORT] = 'asc'
 	}
 
@@ -328,7 +288,7 @@ function prepareFiltersAndLoadTasks() {
 	border-radius: $radius;
 	background: var(--grey-100);
 	border: 2px dashed var(--grey-300);
-	
+
 	* {
 		opacity: 0;
 	}
@@ -339,8 +299,8 @@ function prepareFiltersAndLoadTasks() {
 }
 
 .link-share-view .card {
-  border: none;
-  box-shadow: none;
+	border: none;
+	box-shadow: none;
 }
 
 .control.has-icons-left .icon,
diff --git a/frontend/src/views/project/ProjectTable.vue b/frontend/src/views/project/ProjectTable.vue
index 48255f9c1..2fe8b809f 100644
--- a/frontend/src/views/project/ProjectTable.vue
+++ b/frontend/src/views/project/ProjectTable.vue
@@ -67,7 +67,7 @@
 							</card>
 						</template>
 					</Popup>
-					<FilterPopup v-model="params" />
+					<FilterPopup v-model="params"/>
 				</div>
 			</div>
 		</template>
@@ -84,175 +84,175 @@
 					<div class="has-horizontal-overflow">
 						<table class="table has-actions is-hoverable is-fullwidth mb-0">
 							<thead>
-								<tr>
-									<th v-if="activeColumns.index">
-										#
-										<Sort
-											:order="sortBy.index"
-											@click="sort('index')"
-										/>
-									</th>
-									<th v-if="activeColumns.done">
-										{{ $t('task.attributes.done') }}
-										<Sort
-											:order="sortBy.done"
-											@click="sort('done')"
-										/>
-									</th>
-									<th v-if="activeColumns.title">
-										{{ $t('task.attributes.title') }}
-										<Sort
-											:order="sortBy.title"
-											@click="sort('title')"
-										/>
-									</th>
-									<th v-if="activeColumns.priority">
-										{{ $t('task.attributes.priority') }}
-										<Sort
-											:order="sortBy.priority"
-											@click="sort('priority')"
-										/>
-									</th>
-									<th v-if="activeColumns.labels">
-										{{ $t('task.attributes.labels') }}
-									</th>
-									<th v-if="activeColumns.assignees">
-										{{ $t('task.attributes.assignees') }}
-									</th>
-									<th v-if="activeColumns.dueDate">
-										{{ $t('task.attributes.dueDate') }}
-										<Sort
-											:order="sortBy.due_date"
-											@click="sort('due_date')"
-										/>
-									</th>
-									<th v-if="activeColumns.startDate">
-										{{ $t('task.attributes.startDate') }}
-										<Sort
-											:order="sortBy.start_date"
-											@click="sort('start_date')"
-										/>
-									</th>
-									<th v-if="activeColumns.endDate">
-										{{ $t('task.attributes.endDate') }}
-										<Sort
-											:order="sortBy.end_date"
-											@click="sort('end_date')"
-										/>
-									</th>
-									<th v-if="activeColumns.percentDone">
-										{{ $t('task.attributes.percentDone') }}
-										<Sort
-											:order="sortBy.percent_done"
-											@click="sort('percent_done')"
-										/>
-									</th>
-									<th v-if="activeColumns.doneAt">
-										{{ $t('task.attributes.doneAt') }}
-										<Sort
-											:order="sortBy.done_at"
-											@click="sort('done_at')"
-										/>
-									</th>
-									<th v-if="activeColumns.created">
-										{{ $t('task.attributes.created') }}
-										<Sort
-											:order="sortBy.created"
-											@click="sort('created')"
-										/>
-									</th>
-									<th v-if="activeColumns.updated">
-										{{ $t('task.attributes.updated') }}
-										<Sort
-											:order="sortBy.updated"
-											@click="sort('updated')"
-										/>
-									</th>
-									<th v-if="activeColumns.createdBy">
-										{{ $t('task.attributes.createdBy') }}
-									</th>
-								</tr>
+							<tr>
+								<th v-if="activeColumns.index">
+									#
+									<Sort
+										:order="sortBy.index"
+										@click="sort('index')"
+									/>
+								</th>
+								<th v-if="activeColumns.done">
+									{{ $t('task.attributes.done') }}
+									<Sort
+										:order="sortBy.done"
+										@click="sort('done')"
+									/>
+								</th>
+								<th v-if="activeColumns.title">
+									{{ $t('task.attributes.title') }}
+									<Sort
+										:order="sortBy.title"
+										@click="sort('title')"
+									/>
+								</th>
+								<th v-if="activeColumns.priority">
+									{{ $t('task.attributes.priority') }}
+									<Sort
+										:order="sortBy.priority"
+										@click="sort('priority')"
+									/>
+								</th>
+								<th v-if="activeColumns.labels">
+									{{ $t('task.attributes.labels') }}
+								</th>
+								<th v-if="activeColumns.assignees">
+									{{ $t('task.attributes.assignees') }}
+								</th>
+								<th v-if="activeColumns.dueDate">
+									{{ $t('task.attributes.dueDate') }}
+									<Sort
+										:order="sortBy.due_date"
+										@click="sort('due_date')"
+									/>
+								</th>
+								<th v-if="activeColumns.startDate">
+									{{ $t('task.attributes.startDate') }}
+									<Sort
+										:order="sortBy.start_date"
+										@click="sort('start_date')"
+									/>
+								</th>
+								<th v-if="activeColumns.endDate">
+									{{ $t('task.attributes.endDate') }}
+									<Sort
+										:order="sortBy.end_date"
+										@click="sort('end_date')"
+									/>
+								</th>
+								<th v-if="activeColumns.percentDone">
+									{{ $t('task.attributes.percentDone') }}
+									<Sort
+										:order="sortBy.percent_done"
+										@click="sort('percent_done')"
+									/>
+								</th>
+								<th v-if="activeColumns.doneAt">
+									{{ $t('task.attributes.doneAt') }}
+									<Sort
+										:order="sortBy.done_at"
+										@click="sort('done_at')"
+									/>
+								</th>
+								<th v-if="activeColumns.created">
+									{{ $t('task.attributes.created') }}
+									<Sort
+										:order="sortBy.created"
+										@click="sort('created')"
+									/>
+								</th>
+								<th v-if="activeColumns.updated">
+									{{ $t('task.attributes.updated') }}
+									<Sort
+										:order="sortBy.updated"
+										@click="sort('updated')"
+									/>
+								</th>
+								<th v-if="activeColumns.createdBy">
+									{{ $t('task.attributes.createdBy') }}
+								</th>
+							</tr>
 							</thead>
 							<tbody>
-								<tr
-									v-for="t in tasks"
-									:key="t.id"
-								>
-									<td v-if="activeColumns.index">
-										<router-link :to="taskDetailRoutes[t.id]">
-											<template v-if="t.identifier === ''">
-												#{{ t.index }}
-											</template>
-											<template v-else>
-												{{ t.identifier }}
-											</template>
-										</router-link>
-									</td>
-									<td v-if="activeColumns.done">
-										<Done
-											:is-done="t.done"
-											variant="small"
-										/>
-									</td>
-									<td v-if="activeColumns.title">
-										<router-link :to="taskDetailRoutes[t.id]">
-											{{ t.title }}
-										</router-link>
-									</td>
-									<td v-if="activeColumns.priority">
-										<PriorityLabel
-											:priority="t.priority"
-											:done="t.done"
-											:show-all="true"
-										/>
-									</td>
-									<td v-if="activeColumns.labels">
-										<Labels :labels="t.labels" />
-									</td>
-									<td v-if="activeColumns.assignees">
-										<AssigneeList
-											v-if="t.assignees.length > 0"
-											:assignees="t.assignees"
-											:avatar-size="28"
-											class="ml-1"
-											:inline="true"
-										/>
-									</td>
-									<DateTableCell
-										v-if="activeColumns.dueDate"
-										:date="t.dueDate"
+							<tr
+								v-for="t in tasks"
+								:key="t.id"
+							>
+								<td v-if="activeColumns.index">
+									<router-link :to="taskDetailRoutes[t.id]">
+										<template v-if="t.identifier === ''">
+											#{{ t.index }}
+										</template>
+										<template v-else>
+											{{ t.identifier }}
+										</template>
+									</router-link>
+								</td>
+								<td v-if="activeColumns.done">
+									<Done
+										:is-done="t.done"
+										variant="small"
 									/>
-									<DateTableCell
-										v-if="activeColumns.startDate"
-										:date="t.startDate"
+								</td>
+								<td v-if="activeColumns.title">
+									<router-link :to="taskDetailRoutes[t.id]">
+										{{ t.title }}
+									</router-link>
+								</td>
+								<td v-if="activeColumns.priority">
+									<PriorityLabel
+										:priority="t.priority"
+										:done="t.done"
+										:show-all="true"
 									/>
-									<DateTableCell
-										v-if="activeColumns.endDate"
-										:date="t.endDate"
+								</td>
+								<td v-if="activeColumns.labels">
+									<Labels :labels="t.labels"/>
+								</td>
+								<td v-if="activeColumns.assignees">
+									<AssigneeList
+										v-if="t.assignees.length > 0"
+										:assignees="t.assignees"
+										:avatar-size="28"
+										class="ml-1"
+										:inline="true"
 									/>
-									<td v-if="activeColumns.percentDone">
-										{{ t.percentDone * 100 }}%
-									</td>
-									<DateTableCell
-										v-if="activeColumns.doneAt"
-										:date="t.doneAt"
+								</td>
+								<DateTableCell
+									v-if="activeColumns.dueDate"
+									:date="t.dueDate"
+								/>
+								<DateTableCell
+									v-if="activeColumns.startDate"
+									:date="t.startDate"
+								/>
+								<DateTableCell
+									v-if="activeColumns.endDate"
+									:date="t.endDate"
+								/>
+								<td v-if="activeColumns.percentDone">
+									{{ t.percentDone * 100 }}%
+								</td>
+								<DateTableCell
+									v-if="activeColumns.doneAt"
+									:date="t.doneAt"
+								/>
+								<DateTableCell
+									v-if="activeColumns.created"
+									:date="t.created"
+								/>
+								<DateTableCell
+									v-if="activeColumns.updated"
+									:date="t.updated"
+								/>
+								<td v-if="activeColumns.createdBy">
+									<User
+										:avatar-size="27"
+										:show-username="false"
+										:user="t.createdBy"
 									/>
-									<DateTableCell
-										v-if="activeColumns.created"
-										:date="t.created"
-									/>
-									<DateTableCell
-										v-if="activeColumns.updated"
-										:date="t.updated"
-									/>
-									<td v-if="activeColumns.createdBy">
-										<User
-											:avatar-size="27"
-											:show-username="false"
-											:user="t.createdBy"
-										/>
-									</td>
-								</tr>
+								</td>
+							</tr>
 							</tbody>
 						</table>
 					</div>
@@ -284,9 +284,8 @@ import FilterPopup from '@/components/project/partials/filter-popup.vue'
 import Pagination from '@/components/misc/pagination.vue'
 import Popup from '@/components/misc/popup.vue'
 
-import {useTaskList} from '@/composables/useTaskList'
-
 import type {SortBy} from '@/composables/useTaskList'
+import {useTaskList} from '@/composables/useTaskList'
 import type {ITask} from '@/modelTypes/ITask'
 import type {IProject} from '@/modelTypes/IProject'
 import AssigneeList from '@/components/tasks/partials/assigneeList.vue'
@@ -381,6 +380,11 @@ const taskDetailRoutes = computed(() => Object.fromEntries(
 .columns-filter {
 	margin: 0;
 
+	:deep(.card-content .content) {
+		display: flex;
+		flex-direction: column;
+	}
+
 	&.is-open {
 		margin: 2rem 0 1rem;
 	}