From 41665f5b8fc39494c01f3e19f9bd3c2ef4c8afaf Mon Sep 17 00:00:00 2001
From: Jakob Reiter <jakob.work@reiter.io>
Date: Thu, 21 Dec 2023 11:15:09 +0100
Subject: [PATCH] Reduce height by wrapping into 2 columns

---
 src/views/tasks/ShowTasks.vue | 33 +++++++++++++++++++--------------
 1 file changed, 19 insertions(+), 14 deletions(-)

diff --git a/src/views/tasks/ShowTasks.vue b/src/views/tasks/ShowTasks.vue
index ac755b7a1..68e350acf 100644
--- a/src/views/tasks/ShowTasks.vue
+++ b/src/views/tasks/ShowTasks.vue
@@ -3,20 +3,24 @@
 		<h3 class="mb-2 title">
 			{{ pageTitle }}
 		</h3>
-		<p v-if="!showAll" class="show-tasks-options section-card">
-			<datepicker-with-range @update:model-value="setDate">
-				<template #trigger="{toggle}">
-					<x-button @click.prevent.stop="toggle()" variant="primary" :shadow="false" class="mb-2">
-						{{ $t('task.show.select') }}
-					</x-button>
-				</template>
-			</datepicker-with-range>
-			<fancycheckbox @update:model-value="setShowNulls" :model-value="showNulls" class="mr-2">
-				{{ $t('task.show.noDates') }}
-			</fancycheckbox>
-			<fancycheckbox @update:model-value="setShowOverdue" :model-value="showOverdue">
-				{{ $t('task.show.overdue') }}
-			</fancycheckbox>
+		<p v-if="!showAll" class="show-tasks-options section-card columns">
+			<div class="column">
+				<datepicker-with-range @update:model-value="setDate">
+					<template #trigger="{toggle}">
+						<x-button @click.prevent.stop="toggle()" variant="primary" :shadow="false" class="mb-2">
+							{{ $t('task.show.select') }}
+						</x-button>
+					</template>
+				</datepicker-with-range>
+			</div>
+			<div class="column">
+				<fancycheckbox @update:model-value="setShowNulls" :model-value="showNulls" class="mr-2">
+					{{ $t('task.show.noDates') }}
+				</fancycheckbox>
+				<fancycheckbox @update:model-value="setShowOverdue" :model-value="showOverdue">
+					{{ $t('task.show.overdue') }}
+				</fancycheckbox>
+			</div>
 		</p>
 		<template v-if="!loading && (!tasks || tasks.length === 0) && showNothingToDo">
 			<h3 class="has-text-centered mt-6">{{ $t('task.show.noTasks') }}</h3>
@@ -213,6 +217,7 @@ watchEffect(() => setTitle(pageTitle.value))
 .show-tasks-options {
 	display: flex;
 	flex-direction: column;
+	flex-flow: row wrap;
 }
 
 .llama-cool {