From ce57d85f04eca3ee1f797deff37d730ff18ed6fc Mon Sep 17 00:00:00 2001
From: kolaente <k@knt.li>
Date: Sun, 9 Mar 2025 12:32:01 +0100
Subject: [PATCH] fix: show close button on mobile popups

Resolves https://community.vikunja.io/t/ios-view-bug-project-info-screen-has-no-way-to-exit/3457/4
---
 frontend/src/components/misc/Card.vue       | 13 +++++--------
 frontend/src/components/misc/CreateEdit.vue |  1 +
 frontend/src/components/misc/Modal.vue      |  8 ++++++++
 frontend/src/views/About.vue                |  1 +
 frontend/src/views/labels/ListLabels.vue    |  1 +
 frontend/src/views/project/ProjectInfo.vue  |  3 +++
 6 files changed, 19 insertions(+), 8 deletions(-)

diff --git a/frontend/src/components/misc/Card.vue b/frontend/src/components/misc/Card.vue
index ca7c40ee9..0f433b94c 100644
--- a/frontend/src/components/misc/Card.vue
+++ b/frontend/src/components/misc/Card.vue
@@ -11,14 +11,13 @@
 				{{ title }}
 			</p>
 			<BaseButton
-				v-if="$attrs.onClose"
-				v-tooltip="$t('misc.close')"
-				class="card-header-icon"
+				v-if="showClose"
+				class="card-header-icon close"
 				:aria-label="$t('misc.close')"
 				@click="$emit('close')"
 			>	
 				<span class="icon">
-					<Icon :icon="closeIcon" />
+					<Icon icon="times" />
 				</span>
 			</BaseButton>
 		</header>
@@ -44,24 +43,22 @@
 </template>
 
 <script setup lang="ts">
-import type {IconProp} from '@fortawesome/fontawesome-svg-core'
-
 import BaseButton from '@/components/base/BaseButton.vue'
 
 withDefaults(defineProps<{
 	title?: string
 	padding?: boolean
-	closeIcon?: IconProp
 	shadow?: boolean
 	hasContent?: boolean
 	loading?: boolean
+	showClose?: boolean
 }>(), {
 	title: '',
 	padding: true,
-	closeIcon: 'times',
 	shadow: true,
 	hasContent: true,
 	loading: false,
+	showClose: false,
 })
 
 defineEmits<{
diff --git a/frontend/src/components/misc/CreateEdit.vue b/frontend/src/components/misc/CreateEdit.vue
index f83b180a8..a1cf67e2d 100644
--- a/frontend/src/components/misc/CreateEdit.vue
+++ b/frontend/src/components/misc/CreateEdit.vue
@@ -10,6 +10,7 @@
 			:padding="false"
 			class="has-text-left"
 			:loading="loading"
+			:show-close="true"
 			@close="$router.back()"
 		>
 			<div class="p-4">
diff --git a/frontend/src/components/misc/Modal.vue b/frontend/src/components/misc/Modal.vue
index 2a4271ebd..4cbe5cedd 100644
--- a/frontend/src/components/misc/Modal.vue
+++ b/frontend/src/components/misc/Modal.vue
@@ -248,6 +248,14 @@ $modal-width: 1024px;
 	padding: 0 1rem;
 	min-height: 100vh
 }
+
+.modal-content :deep(.card .card-header-icon.close) {
+	display: none;
+	
+	@media screen and (max-width: $tablet) {
+		display: block;
+	}
+}
 </style>
 
 <style lang="scss">
diff --git a/frontend/src/views/About.vue b/frontend/src/views/About.vue
index b50615070..b7771a348 100644
--- a/frontend/src/views/About.vue
+++ b/frontend/src/views/About.vue
@@ -8,6 +8,7 @@
 			class="has-no-shadow"
 			:title="$t('about.title')"
 			:padding="false"
+			:show-close="true"
 			@close="$router.back()"
 		>
 			<div class="p-4">
diff --git a/frontend/src/views/labels/ListLabels.vue b/frontend/src/views/labels/ListLabels.vue
index 254df3f00..87f7bdf2e 100644
--- a/frontend/src/views/labels/ListLabels.vue
+++ b/frontend/src/views/labels/ListLabels.vue
@@ -62,6 +62,7 @@
 			>
 				<Card
 					:title="$t('label.edit.header')"
+					:show-close="true"
 					@close="() => isLabelEdit = false"
 				>
 					<form @submit.prevent="editLabelSubmit()">
diff --git a/frontend/src/views/project/ProjectInfo.vue b/frontend/src/views/project/ProjectInfo.vue
index 179e873e1..1b1080674 100644
--- a/frontend/src/views/project/ProjectInfo.vue
+++ b/frontend/src/views/project/ProjectInfo.vue
@@ -4,6 +4,9 @@
 	>
 		<Card
 			:title="project?.title"
+			class="is-justify-content-start"
+			:show-close="true"
+			@close="$router.back()"
 		>
 			<div
 				v-if="htmlDescription !== ''"