6 files changed, 26 insertions, 14 deletions
diff --git a/src/components/global_notice_list/global_notice_list.vue b/src/components/global_notice_list/global_notice_list.vue
index 09904761..d828b819 100644
--- a/src/components/global_notice_list/global_notice_list.vue
+++ b/src/components/global_notice_list/global_notice_list.vue
@@ -29,10 +29,10 @@
 
 .global-notice-list {
   position: fixed;
-  top: 50px;
+  top: calc(var(--navbar-height) + 0.5em);
   width: 100%;
   pointer-events: none;
-  z-index: var(--ZI_popovers);
+  z-index: var(--ZI_navbar_popovers);
   display: flex;
   flex-direction: column;
   align-items: center;
diff --git a/src/components/settings_modal/tabs/general_tab.js b/src/components/settings_modal/tabs/general_tab.js
index a22b9b03..ea24d6ad 100644
--- a/src/components/settings_modal/tabs/general_tab.js
+++ b/src/components/settings_modal/tabs/general_tab.js
@@ -44,6 +44,11 @@ const GeneralTab = {
         value: mode,
         label: this.$t(`settings.third_column_mode_${mode}`)
       })),
+      userPopoverAvatarActionOptions: ['close', 'zoom', 'open'].map(mode => ({
+        key: mode,
+        value: mode,
+        label: this.$t(`settings.user_popover_avatar_action_${mode}`)
+      })),
       loopSilentAvailable:
       // Firefox
       Object.getOwnPropertyDescriptor(HTMLVideoElement.prototype, 'mozHasAudio') ||
diff --git a/src/components/settings_modal/tabs/general_tab.vue b/src/components/settings_modal/tabs/general_tab.vue
index 815a32fa..8561647b 100644
--- a/src/components/settings_modal/tabs/general_tab.vue
+++ b/src/components/settings_modal/tabs/general_tab.vue
@@ -60,12 +60,14 @@
           </BooleanSetting>
         </li>
         <li>
-          <BooleanSetting
-            path="userPopoverZoom"
+          <ChoiceSetting
+            id="userPopoverAvatarAction"
+            path="userPopoverAvatarAction"
+            :options="userPopoverAvatarActionOptions"
             expert="1"
           >
-            {{ $t('settings.user_popover_avatar_zoom') }}
-          </BooleanSetting>
+            {{ $t('settings.user_popover_avatar_action') }}
+          </ChoiceSetting>
         </li>
         <li>
           <BooleanSetting
diff --git a/src/components/user_popover/user_popover.js b/src/components/user_popover/user_popover.js
index 69b25383..3b12aa1e 100644
--- a/src/components/user_popover/user_popover.js
+++ b/src/components/user_popover/user_popover.js
@@ -11,8 +11,8 @@ const UserPopover = {
     Popover: defineAsyncComponent(() => import('../popover/popover.vue'))
   },
   computed: {
-    userPopoverZoom () {
-      return this.$store.getters.mergedConfig.userPopoverZoom
+    userPopoverAvatarAction () {
+      return this.$store.getters.mergedConfig.userPopoverAvatarAction
     },
     userPopoverOverlay () {
       return this.$store.getters.mergedConfig.userPopoverOverlay
diff --git a/src/components/user_popover/user_popover.vue b/src/components/user_popover/user_popover.vue
index 4e999672..53d51fc4 100644
--- a/src/components/user_popover/user_popover.vue
+++ b/src/components/user_popover/user_popover.vue
@@ -14,7 +14,7 @@
         class="user-popover"
         :user-id="userId"
         :hide-bio="true"
-        :avatar-action="userPopoverZoom ? 'zoom' : close"
+        :avatar-action="userPopoverAvatarAction == 'close' ? close : userPopoverAvatarAction"
         :on-close="close"
       />
     </template>
diff --git a/src/components/user_profile/user_profile.js b/src/components/user_profile/user_profile.js
index f779b823..08adaeab 100644
--- a/src/components/user_profile/user_profile.js
+++ b/src/components/user_profile/user_profile.js
@@ -45,7 +45,7 @@ const UserProfile = {
   },
   created () {
     const routeParams = this.$route.params
-    this.load(routeParams.name || routeParams.id)
+    this.load({ name: routeParams.name, id: routeParams.id })
     this.tab = get(this.$route, 'query.tab', defaultTabKey)
   },
   unmounted () {
@@ -106,12 +106,17 @@ const UserProfile = {
       this.userId = null
       this.error = false
 
+      const maybeId = userNameOrId.id
+      const maybeName = userNameOrId.name
+
       // Check if user data is already loaded in store
-      const user = this.$store.getters.findUser(userNameOrId)
+      const user = maybeId ? this.$store.getters.findUser(maybeId) : this.$store.getters.findUserByName(maybeName)
       if (user) {
         loadById(user.id)
       } else {
-        this.$store.dispatch('fetchUser', userNameOrId)
+        (maybeId
+          ? this.$store.dispatch('fetchUser', maybeId)
+          : this.$store.dispatch('fetchUserByName', maybeName))
           .then(({ id }) => loadById(id))
           .catch((reason) => {
             const errorMessage = get(reason, 'error.error')
@@ -150,12 +155,12 @@ const UserProfile = {
   watch: {
     '$route.params.id': function (newVal) {
       if (newVal) {
-        this.switchUser(newVal)
+        this.switchUser({ id: newVal })
       }
     },
     '$route.params.name': function (newVal) {
       if (newVal) {
-        this.switchUser(newVal)
+        this.switchUser({ name: newVal })
       }
     },
     '$route.query': function (newVal) {