fix(reminders): flatpickr styling improvements

src/components/input/datepickerInline.vue

@@ -61,11 +61,12 @@
 		</span>
 	</BaseButton>
 
-	<flat-pickr
+	<div class="flatpickr-container">
-		:config="flatPickerConfig"
+		<flat-pickr
-		class="input"
+			:config="flatPickerConfig"
-		v-model="flatPickrDate"
+			v-model="flatPickrDate"
-	/>
+		/>
+	</div>
 </template>
 
 <script lang="ts" setup>
@@ -214,8 +215,14 @@ function getWeekdayFromStringInterval(dateString: string) {
 	}
 }
 
-:deep(.flatpickr-calendar) {
+.flatpickr-container {
-	margin: 0 auto 8px;
+	:deep(.flatpickr-calendar) {
-	box-shadow: none;
+		margin: 0 auto 8px;
+		box-shadow: none;
+	}
+
+	:deep(.input) {
+		border: none;
+	}
 }
 </style>

src/components/tasks/partials/reminder-detail.vue

@@ -166,6 +166,8 @@ function updateDataAndMaybeClose(toggle) {
 function formatReminder(reminder: TaskReminderModel) {
 
 	const period = secondsToPeriod(reminder.relativePeriod)
+	
+	// TODO: 0 does not work
 
 	if (period.amount === 0) {
 		switch (reminder.relativeTo) {
@@ -267,9 +269,4 @@ function translateUnit(amount: number, unit: PeriodUnit): string {
 .currently-active {
 	color: var(--primary);
 }
-
-:deep(.flatpickr-calendar) {
-	margin: 0 auto;
-	box-shadow: none;
-}
 </style>