From 86ae6aa9c4f0d55d8c5b49b458e718062472661a Mon Sep 17 00:00:00 2001
From: Blesilda Ramirez <ramirezblesilda@gmail.com>
Date: Fri, 8 Nov 2024 17:32:07 +0800
Subject: [PATCH] pkp/pkp-lib#9626 Remove prop flex in Tooltip and HelpButton
 components

---
 src/components/Form/fields/FieldArchivingPn.vue  | 15 ++++-----------
 .../Form/fields/FieldBaseAutosuggest.vue         | 16 +++-------------
 src/components/Form/fields/FieldColor.vue        |  8 +++-----
 src/components/Form/fields/FieldHtml.vue         | 13 +++----------
 .../Form/fields/FieldMetadataSetting.vue         | 13 +++----------
 src/components/Form/fields/FieldOptions.vue      |  8 +++-----
 src/components/Form/fields/FieldOrcid.vue        | 13 +++----------
 src/components/Form/fields/FieldPubId.vue        | 12 +++---------
 src/components/Form/fields/FieldRadioInput.vue   |  8 +++-----
 src/components/Form/fields/FieldRichTextarea.vue |  5 ++---
 src/components/Form/fields/FieldSelect.vue       | 12 +++---------
 src/components/Form/fields/FieldSelectIssue.vue  | 12 +++---------
 src/components/Form/fields/FieldSlider.vue       |  5 ++---
 src/components/Form/fields/FieldText.vue         |  5 ++---
 src/components/Form/fields/FieldTextarea.vue     |  5 ++---
 src/components/Form/fields/FieldUpload.vue       | 12 +++---------
 src/components/Form/fields/FieldUploadImage.vue  | 12 +++---------
 src/components/HelpButton/HelpButton.vue         |  6 +-----
 src/components/Tooltip/Tooltip.vue               | 13 ++++---------
 .../PublicationsDownloadReportModal.vue          |  5 ++---
 20 files changed, 55 insertions(+), 143 deletions(-)

diff --git a/src/components/Form/fields/FieldArchivingPn.vue b/src/components/Form/fields/FieldArchivingPn.vue
index ab585be41..8fee80538 100644
--- a/src/components/Form/fields/FieldArchivingPn.vue
+++ b/src/components/Form/fields/FieldArchivingPn.vue
@@ -3,25 +3,19 @@
 		class="pkpFormField pkpFormField--options pkpFormField--archivingPn"
 		:class="classes"
 	>
-		<legend class="pkpFormField--options__legend flex items-center">
+		<legend class="pkpFormField--options__legend">
 			<template v-if="localeLabel">
-				<span class="aria-hidden">{{ localeLabel }}</span>
+				<span class="aria-hidden align-middle">{{ localeLabel }}</span>
 				<span class="-screenReader">{{ multilingualLabel }}</span>
 			</template>
 			<template v-else>
-				{{ label }}
+				<span class="align-middle">{{ label }}</span>
 			</template>
 			<span v-if="isRequired" class="pkpFormFieldLabel__required">
 				*
 				<span class="-screenReader">{{ t('common.required') }}</span>
 			</span>
-			<Tooltip
-				v-if="tooltip"
-				aria-hidden="true"
-				:tooltip="tooltip"
-				label=""
-				:flex="true"
-			/>
+			<Tooltip v-if="tooltip" aria-hidden="true" :tooltip="tooltip" label="" />
 			<span
 				v-if="tooltip"
 				:id="describedByTooltipId"
@@ -34,7 +28,6 @@
 				:topic="helpTopic"
 				:section="helpSection"
 				:label="t('help.help')"
-				:flex="true"
 			/>
 		</legend>
 		<div
diff --git a/src/components/Form/fields/FieldBaseAutosuggest.vue b/src/components/Form/fields/FieldBaseAutosuggest.vue
index f981a706a..3e12db31f 100644
--- a/src/components/Form/fields/FieldBaseAutosuggest.vue
+++ b/src/components/Form/fields/FieldBaseAutosuggest.vue
@@ -6,11 +6,7 @@
 			'pkpAutosuggest--rtl': isRTL,
 		}"
 	>
-		<div
-			v-if="!isLabelInline"
-			ref="heading"
-			class="pkpFormField__heading flex items-center"
-		>
+		<div v-if="!isLabelInline" ref="heading" class="pkpFormField__heading">
 			<FormFieldLabel
 				:control-id="controlId"
 				:label="label"
@@ -18,14 +14,9 @@
 				:is-required="isRequired"
 				:required-label="t('common.required')"
 				:multilingual-label="multilingualLabel"
+				class="align-middle"
 			/>
-			<Tooltip
-				v-if="tooltip"
-				aria-hidden="true"
-				:tooltip="tooltip"
-				label=""
-				:flex="true"
-			/>
+			<Tooltip v-if="tooltip" aria-hidden="true" :tooltip="tooltip" label="" />
 			<span
 				v-if="tooltip"
 				:id="describedByTooltipId"
@@ -38,7 +29,6 @@
 				:topic="helpTopic"
 				:section="helpSection"
 				:label="t('help.help')"
-				:flex="true"
 			/>
 		</div>
 		<div
diff --git a/src/components/Form/fields/FieldColor.vue b/src/components/Form/fields/FieldColor.vue
index eccc39113..a07b96507 100644
--- a/src/components/Form/fields/FieldColor.vue
+++ b/src/components/Form/fields/FieldColor.vue
@@ -1,12 +1,12 @@
 <template>
 	<fieldset class="pkpFormField pkpFormField--color">
-		<legend class="pkpFormField__heading--legend flex items-center">
+		<legend class="pkpFormField__heading--legend">
 			<template v-if="localeLabel">
-				<span class="aria-hidden">{{ localeLabel }}</span>
+				<span class="aria-hidden align-middle">{{ localeLabel }}</span>
 				<span class="-screenReader">{{ multilingualLabel }}</span>
 			</template>
 			<template v-else>
-				{{ label }}
+				<span class="align-middle">{{ label }}</span>
 			</template>
 			<span v-if="isRequired" class="pkpFormFieldLabel__required">
 				*
@@ -17,7 +17,6 @@
 				aria-hidden="true"
 				:tooltip="tooltip"
 				label=""
-				:flex="true"
 			/>
 			<span
 				v-if="isPrimaryLocale && tooltip"
@@ -31,7 +30,6 @@
 				:topic="helpTopic"
 				:section="helpSection"
 				:label="t('help.help')"
-				:flex="true"
 			/>
 		</legend>
 		<div
diff --git a/src/components/Form/fields/FieldHtml.vue b/src/components/Form/fields/FieldHtml.vue
index 4a0ea5e02..a0c9b041d 100644
--- a/src/components/Form/fields/FieldHtml.vue
+++ b/src/components/Form/fields/FieldHtml.vue
@@ -1,23 +1,16 @@
 <template>
 	<div class="pkpFormField pkpFormField--html">
-		<div class="pkpFormField__heading flex items-center">
-			<span class="pkpFormFieldLabel">
+		<div class="pkpFormField__heading">
+			<span class="pkpFormFieldLabel align-middle">
 				{{ label }}
 			</span>
-			<Tooltip
-				v-if="tooltip"
-				aria-hidden="true"
-				:tooltip="tooltip"
-				label=""
-				:flex="true"
-			/>
+			<Tooltip v-if="tooltip" aria-hidden="true" :tooltip="tooltip" label="" />
 			<span v-if="tooltip" class="-screenReader" v-html="tooltip" />
 			<HelpButton
 				v-if="helpTopic"
 				:topic="helpTopic"
 				:section="helpSection"
 				:label="t('help.help')"
-				:flex="true"
 			/>
 		</div>
 		<div
diff --git a/src/components/Form/fields/FieldMetadataSetting.vue b/src/components/Form/fields/FieldMetadataSetting.vue
index 1d7e3b66a..df87d94dc 100644
--- a/src/components/Form/fields/FieldMetadataSetting.vue
+++ b/src/components/Form/fields/FieldMetadataSetting.vue
@@ -1,14 +1,8 @@
 <template>
 	<fieldset class="pkpFormField pkpFormField--options pkpFormField--metadata">
-		<legend class="pkpFormField--options__legend flex items-center">
-			{{ label }}
-			<Tooltip
-				v-if="tooltip"
-				aria-hidden="true"
-				:tooltip="tooltip"
-				label=""
-				:flex="true"
-			/>
+		<legend class="pkpFormField--options__legend">
+			<span class="align-middle">{{ label }}</span>
+			<Tooltip v-if="tooltip" aria-hidden="true" :tooltip="tooltip" label="" />
 			<span
 				v-if="tooltip"
 				:id="describedByTooltipId"
@@ -21,7 +15,6 @@
 				:topic="helpTopic"
 				:section="helpSection"
 				:label="t('help.help')"
-				:flex="true"
 			/>
 		</legend>
 		<div
diff --git a/src/components/Form/fields/FieldOptions.vue b/src/components/Form/fields/FieldOptions.vue
index c525c8ffd..5648a7c60 100644
--- a/src/components/Form/fields/FieldOptions.vue
+++ b/src/components/Form/fields/FieldOptions.vue
@@ -1,12 +1,12 @@
 <template>
 	<fieldset class="pkpFormField pkpFormField--options" :class="classes">
-		<legend class="pkpFormField--options__legend flex items-center">
+		<legend class="pkpFormField--options__legend">
 			<template v-if="localeLabel">
-				<span class="aria-hidden">{{ localeLabel }}</span>
+				<span class="aria-hidden align-middle">{{ localeLabel }}</span>
 				<span class="-screenReader">{{ multilingualLabel }}</span>
 			</template>
 			<template v-else>
-				{{ label }}
+				<span class="align-middle">{{ label }}</span>
 			</template>
 			<span v-if="isRequired" class="pkpFormFieldLabel__required">
 				*
@@ -17,7 +17,6 @@
 				aria-hidden="true"
 				:tooltip="tooltip"
 				label=""
-				:flex="true"
 			/>
 			<span
 				v-if="isPrimaryLocale && tooltip"
@@ -31,7 +30,6 @@
 				:topic="helpTopic"
 				:section="helpSection"
 				:label="t('help.help')"
-				:flex="true"
 			/>
 		</legend>
 		<div
diff --git a/src/components/Form/fields/FieldOrcid.vue b/src/components/Form/fields/FieldOrcid.vue
index b118df48c..2c837050b 100644
--- a/src/components/Form/fields/FieldOrcid.vue
+++ b/src/components/Form/fields/FieldOrcid.vue
@@ -1,23 +1,16 @@
 <template>
 	<div class="pkpFormField pkpFormField--html">
-		<div class="pkpFormField__heading flex items-center">
-			<span class="pkpFormFieldLabel">
+		<div class="pkpFormField__heading">
+			<span class="pkpFormFieldLabel align-middle">
 				{{ label }}
 			</span>
-			<Tooltip
-				v-if="tooltip"
-				aria-hidden="true"
-				:tooltip="tooltip"
-				label=""
-				:flex="true"
-			/>
+			<Tooltip v-if="tooltip" aria-hidden="true" :tooltip="tooltip" label="" />
 			<span v-if="tooltip" class="-screenReader" v-html="tooltip" />
 			<HelpButton
 				v-if="helpTopic"
 				:topic="helpTopic"
 				:section="helpSection"
 				:label="t('help.help')"
-				:flex="true"
 			/>
 		</div>
 		<div
diff --git a/src/components/Form/fields/FieldPubId.vue b/src/components/Form/fields/FieldPubId.vue
index defa6e52e..6bbc194bc 100644
--- a/src/components/Form/fields/FieldPubId.vue
+++ b/src/components/Form/fields/FieldPubId.vue
@@ -1,19 +1,14 @@
 <template>
 	<div class="pkpFormField pkpFormField--pubid">
-		<div class="pkpFormField__heading flex items-center">
+		<div class="pkpFormField__heading">
 			<FormFieldLabel
 				:control-id="controlId"
 				:label="label"
 				:is-required="isRequired"
 				:required-label="t('common.required')"
+				class="align-middle"
 			/>
-			<Tooltip
-				v-if="tooltip"
-				aria-hidden="true"
-				:tooltip="tooltip"
-				label=""
-				:flex="true"
-			/>
+			<Tooltip v-if="tooltip" aria-hidden="true" :tooltip="tooltip" label="" />
 			<span
 				v-if="tooltip"
 				:id="describedByTooltipId"
@@ -26,7 +21,6 @@
 				:topic="helpTopic"
 				:section="helpSection"
 				:label="t('help.help')"
-				:flex="true"
 			/>
 		</div>
 		<div
diff --git a/src/components/Form/fields/FieldRadioInput.vue b/src/components/Form/fields/FieldRadioInput.vue
index fa8546145..198f8fcba 100644
--- a/src/components/Form/fields/FieldRadioInput.vue
+++ b/src/components/Form/fields/FieldRadioInput.vue
@@ -1,12 +1,12 @@
 <template>
 	<fieldset class="pkpFormField pkpFormField--options" :class="classes">
-		<legend class="pkpFormField--options__legend flex items-center">
+		<legend class="pkpFormField--options__legend">
 			<template v-if="localeLabel">
-				<span class="aria-hidden">{{ localeLabel }}</span>
+				<span class="aria-hidden align-middle">{{ localeLabel }}</span>
 				<span class="-screenReader">{{ multilingualLabel }}</span>
 			</template>
 			<template v-else>
-				{{ label }}
+				<span class="align-middle">{{ label }}</span>
 			</template>
 			<span v-if="isRequired" class="pkpFormFieldLabel__required">
 				*
@@ -17,7 +17,6 @@
 				aria-hidden="true"
 				:tooltip="tooltip"
 				label=""
-				:flex="true"
 			/>
 			<span
 				v-if="isPrimaryLocale && tooltip"
@@ -31,7 +30,6 @@
 				:topic="helpTopic"
 				:section="helpSection"
 				:label="t('help.help')"
-				:flex="true"
 			/>
 		</legend>
 		<div
diff --git a/src/components/Form/fields/FieldRichTextarea.vue b/src/components/Form/fields/FieldRichTextarea.vue
index ad093d43b..bfce04b17 100644
--- a/src/components/Form/fields/FieldRichTextarea.vue
+++ b/src/components/Form/fields/FieldRichTextarea.vue
@@ -3,7 +3,7 @@
 		class="pkpFormField pkpFormField--richTextarea"
 		:class="{'-isFocused': isFocused, 'pkpFormField--richTextarea--rtl': isRTL}"
 	>
-		<div class="pkpFormField__heading flex items-center">
+		<div class="pkpFormField__heading">
 			<FormFieldLabel
 				:control-id="controlId"
 				:label="label"
@@ -11,13 +11,13 @@
 				:is-required="isRequired"
 				:required-label="t('common.required')"
 				:multilingual-label="multilingualLabel"
+				class="align-middle"
 			/>
 			<Tooltip
 				v-if="isPrimaryLocale && tooltip"
 				aria-hidden="true"
 				:tooltip="tooltip"
 				label=""
-				:flex="true"
 			/>
 			<span
 				v-if="isPrimaryLocale && tooltip"
@@ -31,7 +31,6 @@
 				:topic="helpTopic"
 				:section="helpSection"
 				:label="t('help.help')"
-				:flex="true"
 			/>
 		</div>
 		<div
diff --git a/src/components/Form/fields/FieldSelect.vue b/src/components/Form/fields/FieldSelect.vue
index 0734768c1..a915f2be4 100644
--- a/src/components/Form/fields/FieldSelect.vue
+++ b/src/components/Form/fields/FieldSelect.vue
@@ -1,6 +1,6 @@
 <template>
 	<div class="pkpFormField pkpFormField--select">
-		<div class="pkpFormField__heading flex items-center">
+		<div class="pkpFormField__heading">
 			<FormFieldLabel
 				:control-id="controlId"
 				:label="label"
@@ -8,14 +8,9 @@
 				:is-required="isRequired"
 				:required-label="t('common.required')"
 				:multilingual-label="multilingualLabel"
+				class="align-middle"
 			/>
-			<Tooltip
-				v-if="tooltip"
-				aria-hidden="true"
-				:tooltip="tooltip"
-				label=""
-				:flex="true"
-			/>
+			<Tooltip v-if="tooltip" aria-hidden="true" :tooltip="tooltip" label="" />
 			<span
 				v-if="tooltip"
 				:id="describedByTooltipId"
@@ -28,7 +23,6 @@
 				:topic="helpTopic"
 				:section="helpSection"
 				:label="t('help.help')"
-				:flex="true"
 			/>
 		</div>
 		<div
diff --git a/src/components/Form/fields/FieldSelectIssue.vue b/src/components/Form/fields/FieldSelectIssue.vue
index 9d8182ed4..a75731174 100644
--- a/src/components/Form/fields/FieldSelectIssue.vue
+++ b/src/components/Form/fields/FieldSelectIssue.vue
@@ -1,19 +1,14 @@
 <template>
 	<div class="pkpFormField pkpFormField--select pkpFormField--selectIssue">
-		<div class="pkpFormField__heading flex items-center">
+		<div class="pkpFormField__heading">
 			<FormFieldLabel
 				:control-id="controlId"
 				:label="label"
 				:is-required="isRequired"
 				:required-label="t('common.required')"
+				class="align-middle"
 			/>
-			<Tooltip
-				v-if="tooltip"
-				aria-hidden="true"
-				:tooltip="tooltip"
-				label=""
-				:flex="true"
-			/>
+			<Tooltip v-if="tooltip" aria-hidden="true" :tooltip="tooltip" label="" />
 			<span
 				v-if="tooltip"
 				:id="describedByTooltipId"
@@ -26,7 +21,6 @@
 				:topic="helpTopic"
 				:section="helpSection"
 				:label="t('help.help')"
-				:flex="true"
 			/>
 		</div>
 		<div
diff --git a/src/components/Form/fields/FieldSlider.vue b/src/components/Form/fields/FieldSlider.vue
index ac1b63b25..ee8be1b97 100644
--- a/src/components/Form/fields/FieldSlider.vue
+++ b/src/components/Form/fields/FieldSlider.vue
@@ -1,6 +1,6 @@
 <template>
 	<div class="mt-5 max-w-lg">
-		<div class="pkpFormField__heading flex items-center">
+		<div class="pkpFormField__heading">
 			<FormFieldLabel
 				:id="labelId"
 				:label="label"
@@ -8,13 +8,13 @@
 				:is-required="isRequired"
 				:required-label="t('common.required')"
 				:multilingual-label="multilingualLabel"
+				class="align-middle"
 			/>
 			<Tooltip
 				v-if="isPrimaryLocale && tooltip"
 				aria-hidden="true"
 				:tooltip="tooltip"
 				label=""
-				:flex="true"
 			/>
 			<span
 				v-if="isPrimaryLocale && tooltip"
@@ -28,7 +28,6 @@
 				:topic="helpTopic"
 				:section="helpSection"
 				:label="t('help.help')"
-				:flex="true"
 			/>
 		</div>
 		<div
diff --git a/src/components/Form/fields/FieldText.vue b/src/components/Form/fields/FieldText.vue
index 447171e8f..4144eba24 100644
--- a/src/components/Form/fields/FieldText.vue
+++ b/src/components/Form/fields/FieldText.vue
@@ -1,6 +1,6 @@
 <template>
 	<div class="pkpFormField pkpFormField--text" :class="classes">
-		<div class="pkpFormField__heading flex items-center">
+		<div class="pkpFormField__heading">
 			<FormFieldLabel
 				:control-id="controlId"
 				:label="label"
@@ -8,13 +8,13 @@
 				:is-required="isRequired"
 				:required-label="t('common.required')"
 				:multilingual-label="multilingualLabel"
+				class="align-middle"
 			/>
 			<Tooltip
 				v-if="isPrimaryLocale && tooltip"
 				aria-hidden="true"
 				:tooltip="tooltip"
 				label=""
-				:flex="true"
 			/>
 			<span
 				v-if="isPrimaryLocale && tooltip"
@@ -28,7 +28,6 @@
 				:topic="helpTopic"
 				:section="helpSection"
 				:label="t('help.help')"
-				:flex="true"
 			/>
 		</div>
 		<div
diff --git a/src/components/Form/fields/FieldTextarea.vue b/src/components/Form/fields/FieldTextarea.vue
index 4f90f775c..f4af33e27 100644
--- a/src/components/Form/fields/FieldTextarea.vue
+++ b/src/components/Form/fields/FieldTextarea.vue
@@ -1,6 +1,6 @@
 <template>
 	<div class="pkpFormField pkpFormField--textarea" :class="classes">
-		<div class="pkpFormField__heading flex items-center">
+		<div class="pkpFormField__heading">
 			<FormFieldLabel
 				:control-id="controlId"
 				:label="label"
@@ -8,13 +8,13 @@
 				:is-required="isRequired"
 				:required-label="t('common.required')"
 				:multilingual-label="multilingualLabel"
+				class="align-middle"
 			/>
 			<Tooltip
 				v-if="isPrimaryLocale && tooltip"
 				aria-hidden="true"
 				:tooltip="tooltip"
 				label=""
-				:flex="true"
 			/>
 			<span
 				v-if="isPrimaryLocale && tooltip"
@@ -28,7 +28,6 @@
 				:topic="helpTopic"
 				:section="helpSection"
 				:label="t('help.help')"
-				:flex="true"
 			/>
 		</div>
 		<div
diff --git a/src/components/Form/fields/FieldUpload.vue b/src/components/Form/fields/FieldUpload.vue
index 49d5bc4bd..2188e8ddd 100644
--- a/src/components/Form/fields/FieldUpload.vue
+++ b/src/components/Form/fields/FieldUpload.vue
@@ -1,6 +1,6 @@
 <template>
 	<div class="pkpFormField pkpFormField--upload">
-		<div class="pkpFormField__heading flex items-center">
+		<div class="pkpFormField__heading">
 			<FormFieldLabel
 				:control-id="dropzoneHiddenFileId"
 				:label="label"
@@ -8,14 +8,9 @@
 				:is-required="isRequired"
 				:required-label="t('common.required')"
 				:multilingual-label="multilingualLabel"
+				class="align-middle"
 			/>
-			<Tooltip
-				v-if="tooltip"
-				aria-hidden="true"
-				:tooltip="tooltip"
-				label=""
-				:flex="true"
-			/>
+			<Tooltip v-if="tooltip" aria-hidden="true" :tooltip="tooltip" label="" />
 			<span
 				v-if="tooltip"
 				:id="describedByTooltipId"
@@ -28,7 +23,6 @@
 				:topic="helpTopic"
 				:section="helpSection"
 				:label="t('help.help')"
-				:flex="true"
 			/>
 		</div>
 		<div
diff --git a/src/components/Form/fields/FieldUploadImage.vue b/src/components/Form/fields/FieldUploadImage.vue
index 9501d5f4e..7e5745db7 100644
--- a/src/components/Form/fields/FieldUploadImage.vue
+++ b/src/components/Form/fields/FieldUploadImage.vue
@@ -1,6 +1,6 @@
 <template>
 	<div class="pkpFormField pkpFormField--upload pkpFormField--uploadImage">
-		<div class="pkpFormField__heading flex items-center">
+		<div class="pkpFormField__heading">
 			<FormFieldLabel
 				:control-id="dropzoneHiddenFileId"
 				:label="label"
@@ -8,14 +8,9 @@
 				:is-required="isRequired"
 				:required-label="t('common.required')"
 				:multilingual-label="multilingualLabel"
+				class="align-middle"
 			/>
-			<Tooltip
-				v-if="tooltip"
-				aria-hidden="true"
-				:tooltip="tooltip"
-				label=""
-				:flex="true"
-			/>
+			<Tooltip v-if="tooltip" aria-hidden="true" :tooltip="tooltip" label="" />
 			<span
 				v-if="tooltip"
 				:id="describedByTooltipId"
@@ -28,7 +23,6 @@
 				:topic="helpTopic"
 				:section="helpSection"
 				:label="t('help.help')"
-				:flex="true"
 			/>
 		</div>
 		<div
diff --git a/src/components/HelpButton/HelpButton.vue b/src/components/HelpButton/HelpButton.vue
index 02381d300..04375b21d 100644
--- a/src/components/HelpButton/HelpButton.vue
+++ b/src/components/HelpButton/HelpButton.vue
@@ -1,7 +1,6 @@
 <template>
 	<button
 		class="helpButton requestHelpPanel"
-		:class="flex ? 'flex' : 'inline-block'"
 		:data-topic="topic"
 		:data-section="section"
 		@click.prevent
@@ -30,10 +29,6 @@ export default {
 			type: String,
 			required: true,
 		},
-		flex: {
-			type: Boolean,
-			default: () => false,
-		},
 	},
 };
 </script>
@@ -42,6 +37,7 @@ export default {
 @import '../../styles/_import';
 
 .helpButton {
+	display: inline-block;
 	border: none;
 	padding: 0 0.25em;
 	background: transparent;
diff --git a/src/components/Tooltip/Tooltip.vue b/src/components/Tooltip/Tooltip.vue
index 138922b07..52f035270 100644
--- a/src/components/Tooltip/Tooltip.vue
+++ b/src/components/Tooltip/Tooltip.vue
@@ -5,7 +5,6 @@
 			theme: 'pkp-tooltip',
 		}"
 		class="tooltipButton"
-		:class="flex ? 'flex' : 'inline-block'"
 		@click.prevent
 	>
 		<Icon
@@ -34,19 +33,14 @@ export default {
 			type: String,
 			required: true,
 		},
-		/** Indicates whether the icon should be displayed in normal size (16px) or smaller (14 px) */
+		/** Indicates the icon size: medium (16px), small (14 px) */
 		iconSize: {
 			type: String,
-			default: () => 'normal',
+			default: () => 'medium',
 			validator: (value) => {
-				return ['normal', 'small'].includes(value);
+				return ['medium', 'small'].includes(value);
 			},
 		},
-		/** Display mode of the icon container 'flex' or 'inline-block' (default)  */
-		flex: {
-			type: Boolean,
-			default: () => false,
-		},
 		/** If the icon color should use primary color (blue) */
 		isPrimary: {
 			type: Boolean,
@@ -73,6 +67,7 @@ export default {
 }
 
 .tooltipButton {
+	display: inline-block;
 	border: none;
 	padding: 0 0.25em;
 	background: transparent;
diff --git a/src/pages/statsPublications/PublicationsDownloadReportModal.vue b/src/pages/statsPublications/PublicationsDownloadReportModal.vue
index bc839c933..45c1c3558 100644
--- a/src/pages/statsPublications/PublicationsDownloadReportModal.vue
+++ b/src/pages/statsPublications/PublicationsDownloadReportModal.vue
@@ -63,12 +63,11 @@
 				</template>
 			</ActionPanel>
 			<ActionPanel v-if="geoReportType" class="pkpStats__reportAction">
-				<h2 class="flex items-center">
-					{{ t('common.geographic') }}
+				<h2>
+					<span class="align-middle">{{ t('common.geographic') }}</span>
 					<Tooltip
 						:tooltip="t('stats.geographic.ccAttribution')"
 						:label="t('stats.geographic.tooltip.label')"
-						:flex="true"
 					></Tooltip>
 				</h2>
 				<p>