From fe67219b11b421539f90105c9aeb24075c66837d Mon Sep 17 00:00:00 2001
From: Blesilda Ramirez <ramirezblesilda@gmail.com>
Date: Thu, 31 Oct 2024 03:38:08 +0800
Subject: [PATCH] pkp/pkp-lib#9626 Adjust vertical alignment of icons next to
 texts

---
 src/components/Container/StatsPage.stories.js |  1 +
 .../Form/fields/FieldArchivingPn.vue          | 11 ++++++++--
 .../Form/fields/FieldBaseAutosuggest.vue      | 15 ++++++++++++--
 src/components/Form/fields/FieldColor.vue     |  4 +++-
 src/components/Form/fields/FieldHtml.vue      | 11 ++++++++--
 .../Form/fields/FieldMetadataSetting.vue      | 11 ++++++++--
 src/components/Form/fields/FieldOptions.vue   | 10 ++++++----
 src/components/Form/fields/FieldOrcid.vue     | 11 ++++++++--
 src/components/Form/fields/FieldPubId.vue     | 11 ++++++++--
 .../Form/fields/FieldRadioInput.vue           |  4 +++-
 .../Form/fields/FieldRichTextarea.vue         |  4 +++-
 src/components/Form/fields/FieldSelect.vue    | 11 ++++++++--
 .../Form/fields/FieldSelectIssue.vue          | 11 ++++++++--
 src/components/Form/fields/FieldSlider.vue    |  4 +++-
 src/components/Form/fields/FieldText.vue      |  4 +++-
 src/components/Form/fields/FieldTextarea.vue  |  4 +++-
 src/components/Form/fields/FieldUpload.vue    | 11 ++++++++--
 .../Form/fields/FieldUploadImage.vue          | 11 ++++++++--
 src/components/HelpButton/HelpButton.vue      |  6 +++++-
 src/components/Tooltip/Tooltip.vue            | 20 +++++++++++++++++--
 .../PublicationsDownloadReportModal.vue       |  3 ++-
 21 files changed, 144 insertions(+), 34 deletions(-)

diff --git a/src/components/Container/StatsPage.stories.js b/src/components/Container/StatsPage.stories.js
index 81962b0f0..52ef5e423 100644
--- a/src/components/Container/StatsPage.stories.js
+++ b/src/components/Container/StatsPage.stories.js
@@ -130,6 +130,7 @@ const EditorialStatsPageWithDataAndTemplate = {
 										v-if="row.description"
 										:label="'Description for ' + row.name"
 										:tooltip="row.description"
+										icon-size="small"
 									></Tooltip>
 								</TableCell>
 								<TableCell>{{ row.dateRange }}</TableCell>
diff --git a/src/components/Form/fields/FieldArchivingPn.vue b/src/components/Form/fields/FieldArchivingPn.vue
index b50c3ad16..ab585be41 100644
--- a/src/components/Form/fields/FieldArchivingPn.vue
+++ b/src/components/Form/fields/FieldArchivingPn.vue
@@ -3,7 +3,7 @@
 		class="pkpFormField pkpFormField--options pkpFormField--archivingPn"
 		:class="classes"
 	>
-		<legend class="pkpFormField--options__legend">
+		<legend class="pkpFormField--options__legend flex items-center">
 			<template v-if="localeLabel">
 				<span class="aria-hidden">{{ localeLabel }}</span>
 				<span class="-screenReader">{{ multilingualLabel }}</span>
@@ -15,7 +15,13 @@
 				*
 				<span class="-screenReader">{{ t('common.required') }}</span>
 			</span>
-			<Tooltip v-if="tooltip" aria-hidden="true" :tooltip="tooltip" label="" />
+			<Tooltip
+				v-if="tooltip"
+				aria-hidden="true"
+				:tooltip="tooltip"
+				label=""
+				:flex="true"
+			/>
 			<span
 				v-if="tooltip"
 				:id="describedByTooltipId"
@@ -28,6 +34,7 @@
 				: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 c227d5310..f981a706a 100644
--- a/src/components/Form/fields/FieldBaseAutosuggest.vue
+++ b/src/components/Form/fields/FieldBaseAutosuggest.vue
@@ -6,7 +6,11 @@
 			'pkpAutosuggest--rtl': isRTL,
 		}"
 	>
-		<div v-if="!isLabelInline" ref="heading" class="pkpFormField__heading">
+		<div
+			v-if="!isLabelInline"
+			ref="heading"
+			class="pkpFormField__heading flex items-center"
+		>
 			<FormFieldLabel
 				:control-id="controlId"
 				:label="label"
@@ -15,7 +19,13 @@
 				:required-label="t('common.required')"
 				:multilingual-label="multilingualLabel"
 			/>
-			<Tooltip v-if="tooltip" aria-hidden="true" :tooltip="tooltip" label="" />
+			<Tooltip
+				v-if="tooltip"
+				aria-hidden="true"
+				:tooltip="tooltip"
+				label=""
+				:flex="true"
+			/>
 			<span
 				v-if="tooltip"
 				:id="describedByTooltipId"
@@ -28,6 +38,7 @@
 				: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 cc1403303..eccc39113 100644
--- a/src/components/Form/fields/FieldColor.vue
+++ b/src/components/Form/fields/FieldColor.vue
@@ -1,6 +1,6 @@
 <template>
 	<fieldset class="pkpFormField pkpFormField--color">
-		<legend class="pkpFormField__heading--legend">
+		<legend class="pkpFormField__heading--legend flex items-center">
 			<template v-if="localeLabel">
 				<span class="aria-hidden">{{ localeLabel }}</span>
 				<span class="-screenReader">{{ multilingualLabel }}</span>
@@ -17,6 +17,7 @@
 				aria-hidden="true"
 				:tooltip="tooltip"
 				label=""
+				:flex="true"
 			/>
 			<span
 				v-if="isPrimaryLocale && tooltip"
@@ -30,6 +31,7 @@
 				: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 a16af1e3b..4a0ea5e02 100644
--- a/src/components/Form/fields/FieldHtml.vue
+++ b/src/components/Form/fields/FieldHtml.vue
@@ -1,16 +1,23 @@
 <template>
 	<div class="pkpFormField pkpFormField--html">
-		<div class="pkpFormField__heading">
+		<div class="pkpFormField__heading flex items-center">
 			<span class="pkpFormFieldLabel">
 				{{ label }}
 			</span>
-			<Tooltip v-if="tooltip" aria-hidden="true" :tooltip="tooltip" label="" />
+			<Tooltip
+				v-if="tooltip"
+				aria-hidden="true"
+				:tooltip="tooltip"
+				label=""
+				:flex="true"
+			/>
 			<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 0a28536c6..1d7e3b66a 100644
--- a/src/components/Form/fields/FieldMetadataSetting.vue
+++ b/src/components/Form/fields/FieldMetadataSetting.vue
@@ -1,8 +1,14 @@
 <template>
 	<fieldset class="pkpFormField pkpFormField--options pkpFormField--metadata">
-		<legend class="pkpFormField--options__legend">
+		<legend class="pkpFormField--options__legend flex items-center">
 			{{ label }}
-			<Tooltip v-if="tooltip" aria-hidden="true" :tooltip="tooltip" label="" />
+			<Tooltip
+				v-if="tooltip"
+				aria-hidden="true"
+				:tooltip="tooltip"
+				label=""
+				:flex="true"
+			/>
 			<span
 				v-if="tooltip"
 				:id="describedByTooltipId"
@@ -15,6 +21,7 @@
 				: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 33b87c56d..c525c8ffd 100644
--- a/src/components/Form/fields/FieldOptions.vue
+++ b/src/components/Form/fields/FieldOptions.vue
@@ -1,6 +1,6 @@
 <template>
 	<fieldset class="pkpFormField pkpFormField--options" :class="classes">
-		<legend class="pkpFormField--options__legend">
+		<legend class="pkpFormField--options__legend flex items-center">
 			<template v-if="localeLabel">
 				<span class="aria-hidden">{{ localeLabel }}</span>
 				<span class="-screenReader">{{ multilingualLabel }}</span>
@@ -17,6 +17,7 @@
 				aria-hidden="true"
 				:tooltip="tooltip"
 				label=""
+				:flex="true"
 			/>
 			<span
 				v-if="isPrimaryLocale && tooltip"
@@ -30,6 +31,7 @@
 				:topic="helpTopic"
 				:section="helpSection"
 				:label="t('help.help')"
+				:flex="true"
 			/>
 		</legend>
 		<div
@@ -238,12 +240,12 @@ export default {
 		 */
 		if (this.isOrderable && this.selectedValue?.length) {
 			this.localizedOptions = this.localizedOptions.sort((a, b) => {
-				let aIndex = this.selectedValue.findIndex(value => a.value === value);
-				let bIndex = this.selectedValue.findIndex(value => b.value === value);
+				let aIndex = this.selectedValue.findIndex((value) => a.value === value);
+				let bIndex = this.selectedValue.findIndex((value) => b.value === value);
 				aIndex = aIndex === -1 ? Number.MAX_SAFE_INTEGER : aIndex;
 				bIndex = bIndex === -1 ? Number.MAX_SAFE_INTEGER : bIndex;
 				return aIndex < bIndex ? -1 : 1;
-			})
+			});
 		}
 	},
 	methods: {
diff --git a/src/components/Form/fields/FieldOrcid.vue b/src/components/Form/fields/FieldOrcid.vue
index 884d24c02..b118df48c 100644
--- a/src/components/Form/fields/FieldOrcid.vue
+++ b/src/components/Form/fields/FieldOrcid.vue
@@ -1,16 +1,23 @@
 <template>
 	<div class="pkpFormField pkpFormField--html">
-		<div class="pkpFormField__heading">
+		<div class="pkpFormField__heading flex items-center">
 			<span class="pkpFormFieldLabel">
 				{{ label }}
 			</span>
-			<Tooltip v-if="tooltip" aria-hidden="true" :tooltip="tooltip" label="" />
+			<Tooltip
+				v-if="tooltip"
+				aria-hidden="true"
+				:tooltip="tooltip"
+				label=""
+				:flex="true"
+			/>
 			<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 f620dbaec..defa6e52e 100644
--- a/src/components/Form/fields/FieldPubId.vue
+++ b/src/components/Form/fields/FieldPubId.vue
@@ -1,13 +1,19 @@
 <template>
 	<div class="pkpFormField pkpFormField--pubid">
-		<div class="pkpFormField__heading">
+		<div class="pkpFormField__heading flex items-center">
 			<FormFieldLabel
 				:control-id="controlId"
 				:label="label"
 				:is-required="isRequired"
 				:required-label="t('common.required')"
 			/>
-			<Tooltip v-if="tooltip" aria-hidden="true" :tooltip="tooltip" label="" />
+			<Tooltip
+				v-if="tooltip"
+				aria-hidden="true"
+				:tooltip="tooltip"
+				label=""
+				:flex="true"
+			/>
 			<span
 				v-if="tooltip"
 				:id="describedByTooltipId"
@@ -20,6 +26,7 @@
 				: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 39cac59b1..fa8546145 100644
--- a/src/components/Form/fields/FieldRadioInput.vue
+++ b/src/components/Form/fields/FieldRadioInput.vue
@@ -1,6 +1,6 @@
 <template>
 	<fieldset class="pkpFormField pkpFormField--options" :class="classes">
-		<legend class="pkpFormField--options__legend">
+		<legend class="pkpFormField--options__legend flex items-center">
 			<template v-if="localeLabel">
 				<span class="aria-hidden">{{ localeLabel }}</span>
 				<span class="-screenReader">{{ multilingualLabel }}</span>
@@ -17,6 +17,7 @@
 				aria-hidden="true"
 				:tooltip="tooltip"
 				label=""
+				:flex="true"
 			/>
 			<span
 				v-if="isPrimaryLocale && tooltip"
@@ -30,6 +31,7 @@
 				: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 7f63cb85c..ad093d43b 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">
+		<div class="pkpFormField__heading flex items-center">
 			<FormFieldLabel
 				:control-id="controlId"
 				:label="label"
@@ -17,6 +17,7 @@
 				aria-hidden="true"
 				:tooltip="tooltip"
 				label=""
+				:flex="true"
 			/>
 			<span
 				v-if="isPrimaryLocale && tooltip"
@@ -30,6 +31,7 @@
 				: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 2027fb0e6..0734768c1 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">
+		<div class="pkpFormField__heading flex items-center">
 			<FormFieldLabel
 				:control-id="controlId"
 				:label="label"
@@ -9,7 +9,13 @@
 				:required-label="t('common.required')"
 				:multilingual-label="multilingualLabel"
 			/>
-			<Tooltip v-if="tooltip" aria-hidden="true" :tooltip="tooltip" label="" />
+			<Tooltip
+				v-if="tooltip"
+				aria-hidden="true"
+				:tooltip="tooltip"
+				label=""
+				:flex="true"
+			/>
 			<span
 				v-if="tooltip"
 				:id="describedByTooltipId"
@@ -22,6 +28,7 @@
 				: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 7a1a71483..9d8182ed4 100644
--- a/src/components/Form/fields/FieldSelectIssue.vue
+++ b/src/components/Form/fields/FieldSelectIssue.vue
@@ -1,13 +1,19 @@
 <template>
 	<div class="pkpFormField pkpFormField--select pkpFormField--selectIssue">
-		<div class="pkpFormField__heading">
+		<div class="pkpFormField__heading flex items-center">
 			<FormFieldLabel
 				:control-id="controlId"
 				:label="label"
 				:is-required="isRequired"
 				:required-label="t('common.required')"
 			/>
-			<Tooltip v-if="tooltip" aria-hidden="true" :tooltip="tooltip" label="" />
+			<Tooltip
+				v-if="tooltip"
+				aria-hidden="true"
+				:tooltip="tooltip"
+				label=""
+				:flex="true"
+			/>
 			<span
 				v-if="tooltip"
 				:id="describedByTooltipId"
@@ -20,6 +26,7 @@
 				: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 73d02c7ea..ac1b63b25 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">
+		<div class="pkpFormField__heading flex items-center">
 			<FormFieldLabel
 				:id="labelId"
 				:label="label"
@@ -14,6 +14,7 @@
 				aria-hidden="true"
 				:tooltip="tooltip"
 				label=""
+				:flex="true"
 			/>
 			<span
 				v-if="isPrimaryLocale && tooltip"
@@ -27,6 +28,7 @@
 				: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 5e62789c5..447171e8f 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">
+		<div class="pkpFormField__heading flex items-center">
 			<FormFieldLabel
 				:control-id="controlId"
 				:label="label"
@@ -14,6 +14,7 @@
 				aria-hidden="true"
 				:tooltip="tooltip"
 				label=""
+				:flex="true"
 			/>
 			<span
 				v-if="isPrimaryLocale && tooltip"
@@ -27,6 +28,7 @@
 				: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 251f2070e..4f90f775c 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">
+		<div class="pkpFormField__heading flex items-center">
 			<FormFieldLabel
 				:control-id="controlId"
 				:label="label"
@@ -14,6 +14,7 @@
 				aria-hidden="true"
 				:tooltip="tooltip"
 				label=""
+				:flex="true"
 			/>
 			<span
 				v-if="isPrimaryLocale && tooltip"
@@ -27,6 +28,7 @@
 				: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 efeb39fd3..49d5bc4bd 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">
+		<div class="pkpFormField__heading flex items-center">
 			<FormFieldLabel
 				:control-id="dropzoneHiddenFileId"
 				:label="label"
@@ -9,7 +9,13 @@
 				:required-label="t('common.required')"
 				:multilingual-label="multilingualLabel"
 			/>
-			<Tooltip v-if="tooltip" aria-hidden="true" :tooltip="tooltip" label="" />
+			<Tooltip
+				v-if="tooltip"
+				aria-hidden="true"
+				:tooltip="tooltip"
+				label=""
+				:flex="true"
+			/>
 			<span
 				v-if="tooltip"
 				:id="describedByTooltipId"
@@ -22,6 +28,7 @@
 				: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 bdfe75b14..9501d5f4e 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">
+		<div class="pkpFormField__heading flex items-center">
 			<FormFieldLabel
 				:control-id="dropzoneHiddenFileId"
 				:label="label"
@@ -9,7 +9,13 @@
 				:required-label="t('common.required')"
 				:multilingual-label="multilingualLabel"
 			/>
-			<Tooltip v-if="tooltip" aria-hidden="true" :tooltip="tooltip" label="" />
+			<Tooltip
+				v-if="tooltip"
+				aria-hidden="true"
+				:tooltip="tooltip"
+				label=""
+				:flex="true"
+			/>
 			<span
 				v-if="tooltip"
 				:id="describedByTooltipId"
@@ -22,6 +28,7 @@
 				: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 04375b21d..02381d300 100644
--- a/src/components/HelpButton/HelpButton.vue
+++ b/src/components/HelpButton/HelpButton.vue
@@ -1,6 +1,7 @@
 <template>
 	<button
 		class="helpButton requestHelpPanel"
+		:class="flex ? 'flex' : 'inline-block'"
 		:data-topic="topic"
 		:data-section="section"
 		@click.prevent
@@ -29,6 +30,10 @@ export default {
 			type: String,
 			required: true,
 		},
+		flex: {
+			type: Boolean,
+			default: () => false,
+		},
 	},
 };
 </script>
@@ -37,7 +42,6 @@ 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 5022c67bd..d36c7dc52 100644
--- a/src/components/Tooltip/Tooltip.vue
+++ b/src/components/Tooltip/Tooltip.vue
@@ -5,9 +5,10 @@
 			theme: 'pkp-tooltip',
 		}"
 		class="tooltipButton"
+		:class="flex ? 'flex' : 'inline-block'"
 		@click.prevent
 	>
-		<Icon icon="UsefulTips" class="h-4 w-4" />
+		<Icon icon="UsefulTips" :class="iconClass" />
 		<span v-if="label" class="-screenReader">{{ label }}</span>
 	</span>
 </template>
@@ -30,6 +31,22 @@ export default {
 			type: String,
 			required: true,
 		},
+		iconSize: {
+			type: String,
+			default: () => 'normal',
+			validator: (value) => {
+				return ['normal', 'small'].includes(value);
+			},
+		},
+		flex: {
+			type: Boolean,
+			default: () => false,
+		},
+	},
+	computed: {
+		iconClass() {
+			return this.iconSize === 'small' ? 'h-3 w-3' : 'h-4 w-4';
+		},
 	},
 };
 </script>
@@ -42,7 +59,6 @@ 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 d21e19904..bc839c933 100644
--- a/src/pages/statsPublications/PublicationsDownloadReportModal.vue
+++ b/src/pages/statsPublications/PublicationsDownloadReportModal.vue
@@ -63,11 +63,12 @@
 				</template>
 			</ActionPanel>
 			<ActionPanel v-if="geoReportType" class="pkpStats__reportAction">
-				<h2>
+				<h2 class="flex items-center">
 					{{ t('common.geographic') }}
 					<Tooltip
 						:tooltip="t('stats.geographic.ccAttribution')"
 						:label="t('stats.geographic.tooltip.label')"
+						:flex="true"
 					></Tooltip>
 				</h2>
 				<p>