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

@@ -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<{

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">

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">

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">

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()">

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 !== ''"