pkp/pkp-lib#11577 [main] [UI] Top menu items are only clickable on text (#657)

* pkp/pkp-lib#11577 Render links in full on top nav menu items

* pkp/pkp-lib#11577 Move li padding to the link in top nav links

* pkp/pkp-lib#11577 Add Change Language locale key

Author: blesildaramirez

public/globals.js

@@ -174,6 +174,7 @@ window.pkp = {
 		'common.attachFiles': 'Attach Files',
 		'common.back': 'Back',
 		'common.cancel': 'Cancel',
+		'common.changeLanguage': 'Change Language',
 		'common.clearSearch': 'Clear search phrase',
 		'common.close': 'Close',
 		'common.commaListSeparator': ', ',

src/components/TopNavActions/TopNavActions.vue

@@ -57,15 +57,18 @@
 						class="-ml-2 -mr-2 border-b border-b-light pb-2 pl-2 pr-2"
 					>
 						<div class="ps-2 text-base-bold leading-6 text-secondary">
-							Change Language
+							{{ t('common.changeLanguage') }}
 						</div>
 						<ul>
 							<li
 								v-for="locale in getSupportedLocalesList()"
 								:key="locale.key"
 								:class="actionLinkStyle"
 							>
-								<a :href="locale.href" class="block w-full no-underline">
+								<a
+									:href="locale.href"
+									class="block w-full px-2 py-1 no-underline"
+								>
 									<Icon
 										v-if="locale.key === currentLocale"
 										icon="Complete"
@@ -97,12 +100,12 @@
 					<div class="-ml-2 -mr-2 text-wrap px-2 pt-2">
 						<ul>
 							<li :class="actionLinkStyle">
-								<a :href="editProfileLink" class="w-full">
+								<a :href="editProfileLink" class="block px-2 py-1">
 									{{ t('user.profile.editProfile') }}
 								</a>
 							</li>
 							<li :class="actionLinkStyle">
-								<a :href="signOutLink" class="w-full">
+								<a :href="signOutLink" class="block px-2 py-1">
 									{{
 										_isUserLoggedInAs
 											? t('user.logOutAs', {username: currentUser.username})
@@ -186,7 +189,7 @@ const getAnimationStyle = (buttonType) => {
 const actionLinkStyle = [
 	'max-w-full cursor-pointer overflow-hidden truncate whitespace-nowrap',
 	'rounded border border-transparent bg-transparent hover:!border-primary',
-	'px-2 py-1 leading-6 text-primary',
+	'leading-6 text-primary',
 ];
 
 function getSupportedLocalesList() {