From 33274e5b9a557b3031060fd54c5e48be4f40b7ee Mon Sep 17 00:00:00 2001
From: Max <maxharz@gmail.com>
Date: Tue, 6 May 2025 01:54:13 +0200
Subject: [PATCH] feat(webapp): user teaser popover (#8450)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* calculate distance between current user and queried user

* fix query for unset location

* use database to calculate distance

* rename distance to distance to me, 100% calculation done in DB

* distanceToMe tests

* lint fixes

* remove comments

* Show user teaser popover with badges, Desktop

* Refactor UserTeaser and add mobile popover support

* Avoid click propagation (WIP)

* Prevent event propagation

* Adjust alignment and font sizes

* More spacing for statistics

* Add distance, simplify user link

* Refactor location info into own component

* Add tests for UserTeaserPopup

* Refactor and test LocationInfo

* Query distanceToMe, rename distance to distanceToMe

* Update test

* Improve tests for UserTeaser, WIP

* Fix tests

* DistanceToMe on User instead of Location

* Revert "DistanceToMe on User instead of Location"

This reverts commit 96c9db00a44cd120e47bfe9534d3e066a194744c.

* Fix notifications

* Refactor UserTeaser and fix location info

* Fix group member crash

* Show 0 distance

* Fit in popover on small screens

* Allow access to profile on desktop

* Revert backend changes

* Load user teaser popover data only when needed

* Fix type mismatch

* Refactor for clarity and accessibility

* Litte refactorings and improvements

* Fix popover test

* Adapt and fix tests

* Fix tests and bugs

* Add placeholder

* cypress: adapt user teaser locator to changes

* Remove delays and scrolling

* Disable popovers in notification list and fix layout

* Remove flickering

* Make overlay catch all pointer events on touch devices

* Re-add attribute for E2E test

* Fix test, return to mouseover

* fix snapshot

---------

Co-authored-by: Ulf Gebhardt <ulf.gebhardt@webcraft-media.de>
Co-authored-by: Wolfgang Huß <wolle.huss@pjannto.com>
Co-authored-by: mahula <lenzmath@posteo.de>
---
 .../Post.Comment/I_should_see_my_comment.js   |    2 +-
 webapp/assets/_new/styles/tokens.scss         |   14 +-
 webapp/assets/styles/main.scss                |   12 +-
 webapp/components/Dropdown.vue                |   30 +-
 .../components/Notification/Notification.vue  |    1 +
 .../NotificationMenu/NotificationMenu.vue     |    2 +-
 .../NotificationsTable.spec.js                |    4 +-
 .../UserTeaser/LocationInfo.spec.js           |   31 +
 webapp/components/UserTeaser/LocationInfo.vue |   44 +
 .../components/UserTeaser/UserTeaser.spec.js  |  301 +-
 webapp/components/UserTeaser/UserTeaser.vue   |  118 +-
 .../UserTeaser/UserTeaserHelper.spec.js       |   71 +
 .../UserTeaser/UserTeaserHelper.vue           |   46 +
 .../UserTeaser/UserTeaserNonAnonymous.vue     |  123 +
 .../UserTeaser/UserTeaserPopover.spec.js      |   99 +
 .../UserTeaser/UserTeaserPopover.vue          |  103 +
 .../__snapshots__/LocationInfo.spec.js.snap   |   51 +
 .../__snapshots__/UserTeaser.spec.js.snap     | 1136 +++++++
 .../UserTeaserHelper.spec.js.snap             |   19 +
 .../UserTeaserPopover.spec.js.snap            |  547 ++++
 webapp/components/utils/isTouchDevice.js      |    2 +
 webapp/graphql/Fragments.js                   |   15 +
 webapp/graphql/User.js                        |   15 +-
 webapp/locales/de.json                        |    8 +
 webapp/locales/en.json                        |    8 +
 webapp/locales/es.json                        |    8 +
 webapp/locales/fr.json                        |    8 +
 webapp/locales/it.json                        |    8 +
 webapp/locales/nl.json                        |    8 +
 webapp/locales/pl.json                        |    8 +
 webapp/locales/pt.json                        |    8 +
 webapp/locales/ru.json                        |    8 +
 .../_id/__snapshots__/_slug.spec.js.snap      | 2784 ++++++++++-------
 33 files changed, 4277 insertions(+), 1365 deletions(-)
 create mode 100644 webapp/components/UserTeaser/LocationInfo.spec.js
 create mode 100644 webapp/components/UserTeaser/LocationInfo.vue
 create mode 100644 webapp/components/UserTeaser/UserTeaserHelper.spec.js
 create mode 100644 webapp/components/UserTeaser/UserTeaserHelper.vue
 create mode 100644 webapp/components/UserTeaser/UserTeaserNonAnonymous.vue
 create mode 100644 webapp/components/UserTeaser/UserTeaserPopover.spec.js
 create mode 100644 webapp/components/UserTeaser/UserTeaserPopover.vue
 create mode 100644 webapp/components/UserTeaser/__snapshots__/LocationInfo.spec.js.snap
 create mode 100644 webapp/components/UserTeaser/__snapshots__/UserTeaser.spec.js.snap
 create mode 100644 webapp/components/UserTeaser/__snapshots__/UserTeaserHelper.spec.js.snap
 create mode 100644 webapp/components/UserTeaser/__snapshots__/UserTeaserPopover.spec.js.snap
 create mode 100644 webapp/components/utils/isTouchDevice.js

diff --git a/cypress/support/step_definitions/Post.Comment/I_should_see_my_comment.js b/cypress/support/step_definitions/Post.Comment/I_should_see_my_comment.js
index 707a7397f..332379dcc 100644
--- a/cypress/support/step_definitions/Post.Comment/I_should_see_my_comment.js
+++ b/cypress/support/step_definitions/Post.Comment/I_should_see_my_comment.js
@@ -8,6 +8,6 @@ defineStep('I should see my comment', () => {
     .get('.profile-avatar img')
     .should('have.attr', 'src')
     .and('contain', 'https://') // some url
-    .get('.user-teaser > .info > .text')
+    .get('.user-teaser .info > .text')
     .should('contain', 'today at')
 })
diff --git a/webapp/assets/_new/styles/tokens.scss b/webapp/assets/_new/styles/tokens.scss
index 578484355..42c01d3a8 100644
--- a/webapp/assets/_new/styles/tokens.scss
+++ b/webapp/assets/_new/styles/tokens.scss
@@ -150,7 +150,7 @@ $font-size-xx-large: 2rem;
 $font-size-x-large: 1.5rem;
 $font-size-large: 1.25rem;
 $font-size-base: 1rem;
-$font-size-body: 15px;
+$font-size-body: 0.938rem;
 $font-size-small: 0.8rem;
 $font-size-x-small: 0.7rem;
 $font-size-xx-small: 0.6rem;
@@ -359,37 +359,37 @@ $media-query-medium: (min-width: 768px);
 $media-query-large: (min-width: 1024px);
 $media-query-x-large: (min-width: 1200px);
 
-/** 
+/**
  * @tokens Background Images
  */
 
-/** 
+/**
  * @tokens Header Color
  */
 
 $color-header-background: $color-neutral-100;
 
-/** 
+/**
  * @tokens Footer Color
  */
 
 $color-footer-background: $color-neutral-100;
 $color-footer-link: $color-primary;
 
-/** 
+/**
  * @tokens Locale Menu Color
  */
 
 $color-locale-menu: $text-color-soft;
 
-/** 
+/**
  * @tokens Donation Bar Color
  */
 
 $color-donation-bar: $color-primary;
 $color-donation-bar-light: $color-primary-light;
 
-/** 
+/**
  * @tokens Toast Color
  */
 
diff --git a/webapp/assets/styles/main.scss b/webapp/assets/styles/main.scss
index b726758c7..4fba0b5e0 100644
--- a/webapp/assets/styles/main.scss
+++ b/webapp/assets/styles/main.scss
@@ -52,11 +52,6 @@ $easeOut: cubic-bezier(0.19, 1, 0.22, 1);
   background: #fff;
 }
 
-body.dropdown-open {
-  height: 100vh;
-  overflow: hidden;
-}
-
 blockquote {
   display: block;
   padding: 15px 20px 15px 45px;
@@ -140,6 +135,10 @@ hr {
     opacity: 1;
     transition-delay: 0;
     transition: opacity 80ms ease-out;
+
+    @media(hover: none) {
+      pointer-events: all;
+    }
   }
 }
 
@@ -155,7 +154,6 @@ hr {
 [class$='menu-popover'] {
   min-width: 130px;
 
-  a,
   button {
     display: flex;
     align-content: center;
@@ -179,4 +177,4 @@ hr {
 
 .dropdown-arrow {
   font-size: $font-size-xx-small;
-}
\ No newline at end of file
+}
diff --git a/webapp/components/Dropdown.vue b/webapp/components/Dropdown.vue
index 7e4d21223..dd2b4a822 100644
--- a/webapp/components/Dropdown.vue
+++ b/webapp/components/Dropdown.vue
@@ -43,32 +43,12 @@ export default {
   },
   watch: {
     isPopoverOpen: {
-      immediate: true,
       handler(isOpen) {
-        try {
-          if (isOpen) {
-            this.$nextTick(() => {
-              setTimeout(() => {
-                const paddingRightStyle = `${
-                  window.innerWidth - document.documentElement.clientWidth
-                }px`
-                const navigationElement = document.querySelector('.main-navigation')
-                document.body.style.paddingRight = paddingRightStyle
-                document.body.classList.add('dropdown-open')
-                if (navigationElement) {
-                  navigationElement.style.paddingRight = paddingRightStyle
-                }
-              }, 20)
-            })
-          } else {
-            const navigationElement = document.querySelector('.main-navigation')
-            document.body.style.paddingRight = null
-            document.body.classList.remove('dropdown-open')
-            if (navigationElement) {
-              navigationElement.style.paddingRight = null
-            }
-          }
-        } catch (err) {}
+        if (isOpen) {
+          document.body.classList.add('dropdown-open')
+        } else {
+          document.body.classList.remove('dropdown-open')
+        }
       },
     },
   },
diff --git a/webapp/components/Notification/Notification.vue b/webapp/components/Notification/Notification.vue
index a657b10ba..d83995b9b 100644
--- a/webapp/components/Notification/Notification.vue
+++ b/webapp/components/Notification/Notification.vue
@@ -4,6 +4,7 @@
       <user-teaser
         :user="isGroup ? notification.relatedUser : from.author"
         :date-time="from.createdAt"
+        :show-popover="false"
       />
     </client-only>
     <p class="description">{{ $t(`notifications.reason.${notification.reason}`) }}</p>
diff --git a/webapp/components/NotificationMenu/NotificationMenu.vue b/webapp/components/NotificationMenu/NotificationMenu.vue
index 276da8490..576abb213 100644
--- a/webapp/components/NotificationMenu/NotificationMenu.vue
+++ b/webapp/components/NotificationMenu/NotificationMenu.vue
@@ -127,7 +127,7 @@ export default {
   apollo: {
     notifications: {
       query() {
-        return notificationQuery(this.$i18n)
+        return notificationQuery()
       },
       variables() {
         return {
diff --git a/webapp/components/NotificationsTable/NotificationsTable.spec.js b/webapp/components/NotificationsTable/NotificationsTable.spec.js
index 0d3560787..5fbfc338a 100644
--- a/webapp/components/NotificationsTable/NotificationsTable.spec.js
+++ b/webapp/components/NotificationsTable/NotificationsTable.spec.js
@@ -88,7 +88,7 @@ describe('NotificationsTable.vue', () => {
         })
 
         it('renders the author', () => {
-          const userinfo = firstRowNotification.find('.user-teaser > .info')
+          const userinfo = firstRowNotification.find('.user-teaser .info')
           expect(userinfo.text()).toContain(postNotification.from.author.name)
         })
 
@@ -121,7 +121,7 @@ describe('NotificationsTable.vue', () => {
         })
 
         it('renders the author', () => {
-          const userinfo = secondRowNotification.find('.user-teaser > .info')
+          const userinfo = secondRowNotification.find('.user-teaser .info')
           expect(userinfo.text()).toContain(commentNotification.from.author.name)
         })
 
diff --git a/webapp/components/UserTeaser/LocationInfo.spec.js b/webapp/components/UserTeaser/LocationInfo.spec.js
new file mode 100644
index 000000000..2b100e66d
--- /dev/null
+++ b/webapp/components/UserTeaser/LocationInfo.spec.js
@@ -0,0 +1,31 @@
+import { render } from '@testing-library/vue'
+import LocationInfo from './LocationInfo.vue'
+
+const localVue = global.localVue
+
+describe('LocationInfo', () => {
+  const Wrapper = ({ withDistance }) => {
+    return render(LocationInfo, {
+      localVue,
+      propsData: {
+        locationData: {
+          name: 'Paris',
+          distanceToMe: withDistance ? 100 : null,
+        },
+      },
+      mocks: {
+        $t: jest.fn((t) => t),
+      },
+    })
+  }
+
+  it('renders with distance', () => {
+    const wrapper = Wrapper({ withDistance: true })
+    expect(wrapper.container).toMatchSnapshot()
+  })
+
+  it('renders without distance', () => {
+    const wrapper = Wrapper({ withDistance: false })
+    expect(wrapper.container).toMatchSnapshot()
+  })
+})
diff --git a/webapp/components/UserTeaser/LocationInfo.vue b/webapp/components/UserTeaser/LocationInfo.vue
new file mode 100644
index 000000000..67dc46c27
--- /dev/null
+++ b/webapp/components/UserTeaser/LocationInfo.vue
@@ -0,0 +1,44 @@
+<template>
+  <div class="location-info">
+    <div class="location">
+      <base-icon name="map-marker" />
+      {{ locationData.name }}
+    </div>
+    <div v-if="distance" class="distance">{{ distance }}</div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'LocationInfo',
+  props: {
+    locationData: { type: Object, default: null },
+  },
+  computed: {
+    distance() {
+      return this.locationData.distanceToMe === null
+        ? null
+        : this.$t('location.distance', { distance: this.locationData.distanceToMe })
+    },
+  },
+}
+</script>
+
+<style scoped>
+.location-info {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+
+  .location {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  .distance {
+    margin-top: 8px;
+  }
+}
+</style>
diff --git a/webapp/components/UserTeaser/UserTeaser.spec.js b/webapp/components/UserTeaser/UserTeaser.spec.js
index 354308109..8a67285ac 100644
--- a/webapp/components/UserTeaser/UserTeaser.spec.js
+++ b/webapp/components/UserTeaser/UserTeaser.spec.js
@@ -1,113 +1,250 @@
-import { mount, RouterLinkStub } from '@vue/test-utils'
+import { render, screen, fireEvent } from '@testing-library/vue'
+import { RouterLinkStub } from '@vue/test-utils'
 import UserTeaser from './UserTeaser.vue'
 import Vuex from 'vuex'
 
 const localVue = global.localVue
-const filter = jest.fn((str) => str)
 
-localVue.filter('truncate', filter)
+// Mock Math.random, used in Dropdown
+Object.assign(Math, {
+  random: () => 0,
+})
+
+const waitForPopover = async () => await new Promise((resolve) => setTimeout(resolve, 1000))
+
+let mockIsTouchDevice
+jest.mock('../utils/isTouchDevice', () => ({
+  isTouchDevice: jest.fn(() => mockIsTouchDevice),
+}))
+
+const userTilda = {
+  name: 'Tilda Swinton',
+  slug: 'tilda-swinton',
+  id: 'user1',
+  avatar: '/avatars/tilda-swinton',
+  badgeVerification: {
+    id: 'bv1',
+    icon: '/icons/verified',
+    description: 'Verified',
+    isDefault: false,
+  },
+  badgeTrophiesSelected: [
+    {
+      id: 'trophy1',
+      icon: '/icons/trophy1',
+      description: 'Trophy 1',
+      isDefault: false,
+    },
+    {
+      id: 'trophy2',
+      icon: '/icons/trophy2',
+      description: 'Trophy 2',
+      isDefault: false,
+    },
+    {
+      id: 'empty',
+      icon: '/icons/empty',
+      description: 'Empty',
+      isDefault: true,
+    },
+  ],
+}
 
 describe('UserTeaser', () => {
-  let propsData
-  let mocks
-  let stubs
-  let getters
+  const Wrapper = ({
+    isModerator = false,
+    withLinkToProfile = true,
+    onTouchScreen = false,
+    withAvatar = true,
+    user = userTilda,
+    withPopoverEnabled = true,
+  }) => {
+    mockIsTouchDevice = onTouchScreen
 
-  beforeEach(() => {
-    propsData = {}
-
-    mocks = {
-      $t: jest.fn(),
-    }
-    stubs = {
-      NuxtLink: RouterLinkStub,
-    }
-    getters = {
-      'auth/user': () => {
-        return {}
+    const store = new Vuex.Store({
+      getters: {
+        'auth/user': () => {
+          return {}
+        },
+        'auth/isModerator': () => isModerator,
       },
-      'auth/isModerator': () => false,
-    }
+    })
+    return render(UserTeaser, {
+      localVue,
+      store,
+      propsData: {
+        user,
+        linkToProfile: withLinkToProfile,
+        showAvatar: withAvatar,
+        showPopover: withPopoverEnabled,
+      },
+      stubs: {
+        NuxtLink: RouterLinkStub,
+        'user-teaser-popover': true,
+        'v-popover': true,
+        'client-only': true,
+      },
+      mocks: {
+        $t: jest.fn((t) => t),
+      },
+    })
+  }
+
+  it('renders anonymous user', () => {
+    const wrapper = Wrapper({ user: null })
+    expect(wrapper.container).toMatchSnapshot()
   })
 
-  describe('mount', () => {
-    const Wrapper = () => {
-      const store = new Vuex.Store({
-        getters,
+  describe('given an user', () => {
+    describe('without linkToProfile, on touch screen', () => {
+      let wrapper
+      beforeEach(() => {
+        wrapper = Wrapper({ withLinkToProfile: false, onTouchScreen: true })
       })
-      return mount(UserTeaser, { store, propsData, mocks, stubs, localVue })
-    }
 
-    it('renders anonymous user', () => {
-      const wrapper = Wrapper()
-      expect(wrapper.text()).toBe('')
-      expect(mocks.$t).toHaveBeenCalledWith('profile.userAnonym')
+      it('renders', () => {
+        expect(wrapper.container).toMatchSnapshot()
+      })
+
+      describe('when clicking the user name', () => {
+        beforeEach(async () => {
+          const userName = screen.getByText('Tilda Swinton')
+          await fireEvent.click(userName)
+          await waitForPopover()
+        })
+
+        it('renders the popover', () => {
+          expect(wrapper.container).toMatchSnapshot()
+        })
+      })
+
+      describe('when clicking the user avatar', () => {
+        beforeEach(async () => {
+          const userAvatar = screen.getByAltText('Tilda Swinton')
+          await fireEvent.click(userAvatar)
+          await waitForPopover()
+        })
+
+        it('renders the popover', () => {
+          expect(wrapper.container).toMatchSnapshot()
+        })
+      })
     })
 
-    describe('given an user', () => {
+    describe('with linkToProfile, on touch screen', () => {
+      let wrapper
       beforeEach(() => {
-        propsData.user = {
-          name: 'Tilda Swinton',
-          slug: 'tilda-swinton',
-        }
+        wrapper = Wrapper({ withLinkToProfile: true, onTouchScreen: true })
       })
 
-      it('renders user name', () => {
-        const wrapper = Wrapper()
-        expect(mocks.$t).not.toHaveBeenCalledWith('profile.userAnonym')
-        expect(wrapper.text()).toMatch('Tilda Swinton')
+      it('renders', () => {
+        expect(wrapper.container).toMatchSnapshot()
       })
 
-      describe('user is deleted', () => {
-        beforeEach(() => {
-          propsData.user.deleted = true
+      describe('when clicking the user name', () => {
+        beforeEach(async () => {
+          const userName = screen.getByText('Tilda Swinton')
+          await fireEvent.click(userName)
         })
 
+        it('renders the popover', () => {
+          expect(wrapper.container).toMatchSnapshot()
+        })
+      })
+    })
+
+    describe('without linkToProfile, on desktop', () => {
+      let wrapper
+      beforeEach(() => {
+        wrapper = Wrapper({ withLinkToProfile: false, onTouchScreen: false })
+      })
+
+      it('renders', () => {
+        expect(wrapper.container).toMatchSnapshot()
+      })
+
+      describe('when hovering the user name', () => {
+        beforeEach(async () => {
+          const userName = screen.getByText('Tilda Swinton')
+          await fireEvent.mouseOver(userName)
+          await waitForPopover()
+        })
+
+        it('renders the popover', () => {
+          expect(wrapper.container).toMatchSnapshot()
+        })
+      })
+
+      describe('when hovering the user avatar', () => {
+        beforeEach(async () => {
+          const userAvatar = screen.getByAltText('Tilda Swinton')
+          await fireEvent.mouseOver(userAvatar)
+          await waitForPopover()
+        })
+
+        it('renders the popover', () => {
+          expect(wrapper.container).toMatchSnapshot()
+        })
+      })
+    })
+
+    describe('with linkToProfile, on desktop', () => {
+      let wrapper
+      beforeEach(() => {
+        wrapper = Wrapper({ withLinkToProfile: true, onTouchScreen: false })
+      })
+
+      it('renders', () => {
+        expect(wrapper.container).toMatchSnapshot()
+      })
+
+      describe('when hovering the user name', () => {
+        beforeEach(async () => {
+          const userName = screen.getByText('Tilda Swinton')
+          await fireEvent.mouseOver(userName)
+          await waitForPopover()
+        })
+
+        it('renders the popover', () => {
+          expect(wrapper.container).toMatchSnapshot()
+        })
+      })
+    })
+
+    describe('avatar is disabled', () => {
+      it('does not render the avatar', () => {
+        const wrapper = Wrapper({ withAvatar: false })
+        expect(wrapper.container).toMatchSnapshot()
+      })
+    })
+
+    describe('user is deleted', () => {
+      it('renders anonymous user', () => {
+        const wrapper = Wrapper({ user: { ...userTilda, deleted: true } })
+        expect(wrapper.container).toMatchSnapshot()
+      })
+
+      describe('even if the current user is a moderator', () => {
         it('renders anonymous user', () => {
-          const wrapper = Wrapper()
-          expect(wrapper.text()).not.toMatch('Tilda Swinton')
-          expect(mocks.$t).toHaveBeenCalledWith('profile.userAnonym')
-        })
-
-        describe('even if the current user is a moderator', () => {
-          beforeEach(() => {
-            getters['auth/isModerator'] = () => true
-          })
-
-          it('renders anonymous user', () => {
-            const wrapper = Wrapper()
-            expect(wrapper.text()).not.toMatch('Tilda Swinton')
-            expect(mocks.$t).toHaveBeenCalledWith('profile.userAnonym')
+          const wrapper = Wrapper({
+            user: { ...userTilda, deleted: true },
+            isModerator: true,
           })
+          expect(wrapper.container).toMatchSnapshot()
         })
       })
+    })
 
-      describe('user is disabled', () => {
-        beforeEach(() => {
-          propsData.user.disabled = true
-        })
+    describe('user is disabled', () => {
+      it('renders anonymous user', () => {
+        const wrapper = Wrapper({ user: { ...userTilda, disabled: true } })
+        expect(wrapper.container).toMatchSnapshot()
+      })
 
-        it('renders anonymous user', () => {
-          const wrapper = Wrapper()
-          expect(wrapper.text()).not.toMatch('Tilda Swinton')
-          expect(mocks.$t).toHaveBeenCalledWith('profile.userAnonym')
-        })
-
-        describe('current user is a moderator', () => {
-          beforeEach(() => {
-            getters['auth/isModerator'] = () => true
-          })
-
-          it('renders user name', () => {
-            const wrapper = Wrapper()
-            expect(wrapper.text()).not.toMatch('Anonymous')
-            expect(wrapper.text()).toMatch('Tilda Swinton')
-          })
-
-          it('has "disabled-content" class', () => {
-            const wrapper = Wrapper()
-            expect(wrapper.classes()).toContain('disabled-content')
-          })
+      describe('current user is a moderator', () => {
+        it('renders user name', () => {
+          const wrapper = Wrapper({ user: { ...userTilda, disabled: true }, isModerator: true })
+          expect(wrapper.container).toMatchSnapshot()
         })
       })
     })
diff --git a/webapp/components/UserTeaser/UserTeaser.vue b/webapp/components/UserTeaser/UserTeaser.vue
index a9e556bf4..4bc72576e 100644
--- a/webapp/components/UserTeaser/UserTeaser.vue
+++ b/webapp/components/UserTeaser/UserTeaser.vue
@@ -4,57 +4,34 @@
     <span class="info anonymous">{{ $t('profile.userAnonym') }}</span>
   </div>
   <div v-else :class="[{ 'disabled-content': user.disabled }]" placement="top-start">
-    <div :class="['user-teaser']">
-      <nuxt-link v-if="linkToProfile && showAvatar" :to="userLink" data-test="avatarUserLink">
-        <profile-avatar :profile="user" size="small" />
-      </nuxt-link>
-      <profile-avatar v-else-if="showAvatar" :profile="user" size="small" />
-      <div class="info flex-direction-column">
-        <div :class="wide ? 'flex-direction-row' : 'flex-direction-column'">
-          <nuxt-link v-if="linkToProfile" :to="userLink">
-            <span class="text">
-              <span class="slug">{{ userSlug }}</span>
-              <span class="name">{{ userName }}</span>
-            </span>
-          </nuxt-link>
-          <span v-else class="text">
-            <span class="slug">{{ userSlug }}</span>
-            <span class="name">{{ userName }}</span>
-          </span>
-          <span v-if="wide">&nbsp;</span>
-          <span v-if="group">
-            <span class="text">
-              {{ $t('group.in') }}
-            </span>
-            <nuxt-link :to="groupLink">
-              <span class="text">
-                <span class="slug">{{ groupSlug }}</span>
-                <span v-if="!userOnly" class="name">{{ groupName }}</span>
-              </span>
-            </nuxt-link>
-          </span>
-        </div>
-        <span v-if="!userOnly && dateTime" class="text">
-          <base-icon name="clock" />
-          <date-time :date-time="dateTime" />
-          <slot name="dateTime"></slot>
-        </span>
-      </div>
-    </div>
+    <!-- isTouchDevice only supported on client-->
+    <client-only>
+      <user-teaser-non-anonymous
+        v-if="user"
+        :link-to-profile="linkToProfile"
+        :user="user"
+        :group="group"
+        :wide="wide"
+        :show-avatar="showAvatar"
+        :date-time="dateTime"
+        :show-popover="showPopover"
+        @close="closeMenu"
+      />
+    </client-only>
   </div>
 </template>
 
 <script>
 import { mapGetters } from 'vuex'
 
-import DateTime from '~/components/DateTime'
 import ProfileAvatar from '~/components/_new/generic/ProfileAvatar/ProfileAvatar'
+import UserTeaserNonAnonymous from './UserTeaserNonAnonymous'
 
 export default {
   name: 'UserTeaser',
   components: {
-    DateTime,
     ProfileAvatar,
+    UserTeaserNonAnonymous,
   },
   props: {
     linkToProfile: { type: Boolean, default: true },
@@ -69,71 +46,36 @@ export default {
     ...mapGetters({
       isModerator: 'auth/isModerator',
     }),
-    itsMe() {
-      return this.user.slug === this.$store.getters['auth/user'].slug
-    },
     displayAnonymous() {
       const { user, isModerator } = this
       return !user || user.deleted || (user.disabled && !isModerator)
     },
-    userLink() {
-      const { id, slug } = this.user
-      if (!(id && slug)) return ''
-      return { name: 'profile-id-slug', params: { slug, id } }
-    },
-    userSlug() {
-      const { slug } = this.user || {}
-      return slug && `@${slug}`
-    },
-    userName() {
-      const { name } = this.user || {}
-      return name || this.$t('profile.userAnonym')
-    },
-    userOnly() {
-      return !this.dateTime && !this.group
-    },
-    groupLink() {
-      const { id, slug } = this.group
-      if (!(id && slug)) return ''
-      return { name: 'groups-id-slug', params: { slug, id } }
-    },
-    groupSlug() {
-      const { slug } = this.group || {}
-      return slug && `&${slug}`
-    },
-    groupName() {
-      const { name } = this.group || {}
-      return name || this.$t('profile.userAnonym')
-    },
   },
   methods: {
-    optimisticFollow({ followedByCurrentUser }) {
-      const inc = followedByCurrentUser ? 1 : -1
-      this.user.followedByCurrentUser = followedByCurrentUser
-      this.user.followedByCount += inc
-    },
-    updateFollow({ followedByCurrentUser, followedByCount }) {
-      this.user.followedByCount = followedByCount
-      this.user.followedByCurrentUser = followedByCurrentUser
+    closeMenu() {
+      this.$emit('close')
     },
   },
 }
 </script>
 
 <style lang="scss">
-.trigger {
-  max-width: 100%;
-}
-
 .user-teaser {
   display: flex;
   flex-wrap: nowrap;
 
-  > .profile-avatar {
+  .trigger {
+    max-width: 100%;
+    display: flex !important;
+    justify-content: center;
+    align-items: center;
+  }
+
+  .profile-avatar {
     flex-shrink: 0;
   }
 
-  > .info {
+  .info {
     padding-left: $space-xx-small;
     overflow: hidden;
     text-overflow: ellipsis;
@@ -145,12 +87,12 @@ export default {
 
     .slug {
       color: $color-primary;
-      font-size: $font-size-base;
+      font-size: calc(1.15 * $font-size-base);
     }
 
     .name {
       color: $text-color-soft;
-      font-size: $font-size-small;
+      font-size: $font-size-base;
     }
   }
 
@@ -158,12 +100,14 @@ export default {
     display: flex;
     flex-direction: column;
     justify-content: center;
+    align-items: flex-start;
   }
 
   .flex-direction-row {
     display: flex;
     flex-direction: row;
     justify-content: center;
+    padding-left: 2px;
   }
 
   .text {
diff --git a/webapp/components/UserTeaser/UserTeaserHelper.spec.js b/webapp/components/UserTeaser/UserTeaserHelper.spec.js
new file mode 100644
index 000000000..0a33c3252
--- /dev/null
+++ b/webapp/components/UserTeaser/UserTeaserHelper.spec.js
@@ -0,0 +1,71 @@
+import { render } from '@testing-library/vue'
+import { RouterLinkStub } from '@vue/test-utils'
+import UserTeaserHelper from './UserTeaserHelper.vue'
+
+const localVue = global.localVue
+
+const userLink = {
+  name: 'profile-id-slug',
+  params: { slug: 'slug', id: 'id' },
+}
+
+let mockIsTouchDevice
+
+jest.mock('../utils/isTouchDevice', () => ({
+  isTouchDevice: jest.fn(() => mockIsTouchDevice),
+}))
+
+describe('UserTeaserHelper', () => {
+  const Wrapper = ({
+    withLinkToProfile = true,
+    onTouchScreen = false,
+    withPopoverEnabled = true,
+  }) => {
+    mockIsTouchDevice = onTouchScreen
+
+    return render(UserTeaserHelper, {
+      localVue,
+      propsData: {
+        userLink,
+        linkToProfile: withLinkToProfile,
+        showPopover: withPopoverEnabled,
+      },
+      stubs: {
+        NuxtLink: RouterLinkStub,
+      },
+    })
+  }
+
+  describe('with linkToProfile and popover enabled, on touch screen', () => {
+    let wrapper
+    beforeEach(() => {
+      wrapper = Wrapper({ withLinkToProfile: true, onTouchScreen: true, withPopoverEnabled: true })
+    })
+
+    it('renders button', () => {
+      expect(wrapper.container).toMatchSnapshot()
+    })
+  })
+
+  describe('without linkToProfile', () => {
+    let wrapper
+    beforeEach(() => {
+      wrapper = Wrapper({ withLinkToProfile: false, onTouchScreen: false })
+    })
+
+    it('renders span', () => {
+      expect(wrapper.container).toMatchSnapshot()
+    })
+  })
+
+  describe('with linkToProfile, on desktop', () => {
+    let wrapper
+    beforeEach(() => {
+      wrapper = Wrapper({ withLinkToProfile: true, onTouchScreen: false })
+    })
+
+    it('renders link', () => {
+      expect(wrapper.container).toMatchSnapshot()
+    })
+  })
+})
diff --git a/webapp/components/UserTeaser/UserTeaserHelper.vue b/webapp/components/UserTeaser/UserTeaserHelper.vue
new file mode 100644
index 000000000..e06e52c0a
--- /dev/null
+++ b/webapp/components/UserTeaser/UserTeaserHelper.vue
@@ -0,0 +1,46 @@
+<template>
+  <button v-if="showPopover && isTouchDevice" @click.prevent="openMenu">
+    <slot />
+  </button>
+  <span
+    v-else-if="!linkToProfile || !userLink"
+    @mouseover="() => showPopover && openMenu()"
+    @mouseleave="closeMenu"
+  >
+    <slot />
+  </span>
+  <nuxt-link
+    v-else
+    :to="userLink"
+    @mouseover.native="() => showPopover && openMenu()"
+    @mouseleave.native="closeMenu"
+  >
+    <slot />
+  </nuxt-link>
+</template>
+
+<script>
+import { isTouchDevice } from '../utils/isTouchDevice'
+
+export default {
+  name: 'UserTeaserHelper',
+  props: {
+    userLink: { type: Object, default: null },
+    linkToProfile: { type: Boolean, default: true },
+    showPopover: { type: Boolean, default: false },
+  },
+  computed: {
+    isTouchDevice() {
+      return isTouchDevice()
+    },
+  },
+  methods: {
+    openMenu() {
+      this.$emit('open-menu')
+    },
+    closeMenu() {
+      this.$emit('close-menu')
+    },
+  },
+}
+</script>
diff --git a/webapp/components/UserTeaser/UserTeaserNonAnonymous.vue b/webapp/components/UserTeaser/UserTeaserNonAnonymous.vue
new file mode 100644
index 000000000..34c3769bb
--- /dev/null
+++ b/webapp/components/UserTeaser/UserTeaserNonAnonymous.vue
@@ -0,0 +1,123 @@
+<template>
+  <dropdown class="user-teaser">
+    <template #default="{ openMenu, closeMenu }">
+      <user-teaser-helper
+        v-if="showAvatar"
+        :link-to-profile="linkToProfile"
+        :show-popover="showPopover"
+        :user-link="userLink"
+        @open-menu="openMenu(false)"
+        @close-menu="closeMenu(false)"
+        data-test="avatarUserLink"
+      >
+        <profile-avatar :profile="user" size="small" />
+      </user-teaser-helper>
+      <div class="info flex-direction-column">
+        <div :class="wide ? 'flex-direction-row' : 'flex-direction-column'">
+          <user-teaser-helper
+            :link-to-profile="linkToProfile"
+            :show-popover="showPopover"
+            :user-link="userLink"
+            @open-menu="openMenu(false)"
+            @close-menu="closeMenu(false)"
+          >
+            <span class="slug">{{ userSlug }}</span>
+            <span class="name">{{ userName }}</span>
+          </user-teaser-helper>
+          <span v-if="wide">&nbsp;</span>
+          <span v-if="group">
+            <span class="text">
+              {{ $t('group.in') }}
+            </span>
+            <nuxt-link :to="groupLink">
+              <span class="text">
+                <span class="slug">{{ groupSlug }}</span>
+                <span v-if="!userOnly" class="name">{{ groupName }}</span>
+              </span>
+            </nuxt-link>
+          </span>
+        </div>
+        <span v-if="!userOnly && dateTime" class="text">
+          <base-icon name="clock" />
+          <date-time :date-time="dateTime" />
+          <slot name="dateTime"></slot>
+        </span>
+      </div>
+    </template>
+    <template #popover="{ isOpen }" v-if="showPopover">
+      <user-teaser-popover
+        v-if="isOpen"
+        :user-id="user.id"
+        :user-link="linkToProfile ? userLink : null"
+      />
+    </template>
+  </dropdown>
+</template>
+
+<script>
+import { mapGetters } from 'vuex'
+
+import DateTime from '~/components/DateTime'
+import Dropdown from '~/components/Dropdown'
+import ProfileAvatar from '~/components/_new/generic/ProfileAvatar/ProfileAvatar'
+import UserTeaserPopover from './UserTeaserPopover'
+import UserTeaserHelper from './UserTeaserHelper.vue'
+
+export default {
+  name: 'UserTeaser',
+  components: {
+    ProfileAvatar,
+    UserTeaserPopover,
+    UserTeaserHelper,
+    Dropdown,
+    DateTime,
+  },
+  props: {
+    linkToProfile: { type: Boolean, default: true },
+    user: { type: Object, default: null },
+    group: { type: Object, default: null },
+    wide: { type: Boolean, default: false },
+    showAvatar: { type: Boolean, default: true },
+    dateTime: { type: [Date, String], default: null },
+    showPopover: { type: Boolean, default: true },
+  },
+  computed: {
+    ...mapGetters({
+      isModerator: 'auth/isModerator',
+    }),
+
+    itsMe() {
+      return this.user.slug === this.$store.getters['auth/user'].slug
+    },
+    userLink() {
+      const { id, slug } = this.user
+      if (!(id && slug)) return null
+      return { name: 'profile-id-slug', params: { slug, id } }
+    },
+    userSlug() {
+      const { slug } = this.user || {}
+      return slug && `@${slug}`
+    },
+    userName() {
+      const { name } = this.user || {}
+      return name || this.$t('profile.userAnonym')
+    },
+    userOnly() {
+      return !this.dateTime && !this.group
+    },
+    groupLink() {
+      const { id, slug } = this.group
+      if (!(id && slug)) return ''
+      return { name: 'groups-id-slug', params: { slug, id } }
+    },
+    groupSlug() {
+      const { slug } = this.group || {}
+      return slug && `&${slug}`
+    },
+    groupName() {
+      const { name } = this.group || {}
+      return name || this.$t('profile.userAnonym')
+    },
+  },
+}
+</script>
diff --git a/webapp/components/UserTeaser/UserTeaserPopover.spec.js b/webapp/components/UserTeaser/UserTeaserPopover.spec.js
new file mode 100644
index 000000000..9b6d52cf2
--- /dev/null
+++ b/webapp/components/UserTeaser/UserTeaserPopover.spec.js
@@ -0,0 +1,99 @@
+import { render } from '@testing-library/vue'
+import { RouterLinkStub } from '@vue/test-utils'
+import UserTeaserPopover from './UserTeaserPopover.vue'
+
+const localVue = global.localVue
+
+const user = {
+  id: 'id',
+  name: 'Tilda Swinton',
+  slug: 'tilda-swinton',
+  badgeVerification: {
+    id: 'bv1',
+    icon: '/icons/verified',
+    description: 'Verified',
+    isDefault: false,
+  },
+  badgeTrophiesSelected: [
+    {
+      id: 'trophy1',
+      icon: '/icons/trophy1',
+      description: 'Trophy 1',
+      isDefault: false,
+    },
+    {
+      id: 'trophy2',
+      icon: '/icons/trophy2',
+      description: 'Trophy 2',
+      isDefault: false,
+    },
+    {
+      id: 'empty',
+      icon: '/icons/empty',
+      description: 'Empty',
+      isDefault: true,
+    },
+  ],
+}
+
+const userLink = {
+  name: 'profile-id-slug',
+  params: { slug: 'slug', id: 'id' },
+}
+
+describe('UserTeaserPopover', () => {
+  const Wrapper = ({ badgesEnabled = true, withUserLink = true, onTouchScreen = false }) => {
+    const mockIsTouchDevice = onTouchScreen
+    jest.mock('../utils/isTouchDevice', () => ({
+      isTouchDevice: jest.fn(() => mockIsTouchDevice),
+    }))
+    return render(UserTeaserPopover, {
+      localVue,
+      propsData: {
+        userId: 'id',
+        userLink: withUserLink ? userLink : null,
+      },
+      data: () => ({
+        User: [user],
+      }),
+      stubs: {
+        NuxtLink: RouterLinkStub,
+      },
+      mocks: {
+        $t: jest.fn((t) => t),
+        $env: {
+          BADGES_ENABLED: badgesEnabled,
+        },
+      },
+    })
+  }
+
+  describe('given a touch device', () => {
+    it('shows button when userLink is provided', () => {
+      const wrapper = Wrapper({ withUserLink: true, onTouchScreen: true })
+      expect(wrapper.container).toMatchSnapshot()
+    })
+
+    it('does not show button when userLink is not provided', () => {
+      const wrapper = Wrapper({ withUserLink: false, onTouchScreen: true })
+      expect(wrapper.container).toMatchSnapshot()
+    })
+  })
+
+  describe('given a non-touch device', () => {
+    it('does not show button when userLink is provided', () => {
+      const wrapper = Wrapper({ withUserLink: true, onTouchScreen: false })
+      expect(wrapper.container).toMatchSnapshot()
+    })
+  })
+
+  it('shows badges when enabled', () => {
+    const wrapper = Wrapper({ badgesEnabled: true })
+    expect(wrapper.container).toMatchSnapshot()
+  })
+
+  it('does not show badges when disabled', () => {
+    const wrapper = Wrapper({ badgesEnabled: false })
+    expect(wrapper.container).toMatchSnapshot()
+  })
+})
diff --git a/webapp/components/UserTeaser/UserTeaserPopover.vue b/webapp/components/UserTeaser/UserTeaserPopover.vue
new file mode 100644
index 000000000..05d34631a
--- /dev/null
+++ b/webapp/components/UserTeaser/UserTeaserPopover.vue
@@ -0,0 +1,103 @@
+<template>
+  <div class="placeholder" v-if="!user" />
+  <div class="user-teaser-popover" v-else>
+    <badges
+      v-if="$env.BADGES_ENABLED && user.badgeVerification"
+      :badges="[user.badgeVerification, ...user.badgeTrophiesSelected]"
+    />
+    <location-info v-if="user.location" :location-data="user.location" class="location-info" />
+    <ul class="statistics">
+      <li>
+        <ds-number :count="user.followedByCount" :label="$t('profile.followers')" />
+      </li>
+      <li>
+        <ds-number
+          :count="user.contributionsCount"
+          :label="$t('common.post', null, user.contributionsCount)"
+        />
+      </li>
+      <li>
+        <ds-number
+          :count="user.commentedCount"
+          :label="$t('common.comment', null, user.commentedCount)"
+        />
+      </li>
+    </ul>
+    <nuxt-link v-if="isTouchDevice && userLink" :to="userLink" class="link">
+      <ds-button primary>{{ $t('user-teaser.popover.open-profile') }}</ds-button>
+    </nuxt-link>
+  </div>
+</template>
+
+<script>
+import Badges from '~/components/Badges.vue'
+import LocationInfo from '~/components/UserTeaser/LocationInfo.vue'
+import { isTouchDevice } from '~/components/utils/isTouchDevice'
+import { userTeaserQuery } from '~/graphql/User.js'
+
+export default {
+  name: 'UserTeaserPopover',
+  components: {
+    Badges,
+    LocationInfo,
+  },
+  props: {
+    userId: { type: String },
+    userLink: { type: Object },
+  },
+  computed: {
+    isTouchDevice() {
+      return isTouchDevice()
+    },
+    user() {
+      return (this.User && this.User[0]) ?? null
+    },
+  },
+  apollo: {
+    User: {
+      query() {
+        return userTeaserQuery(this.$i18n)
+      },
+      variables() {
+        return { id: this.userId }
+      },
+    },
+  },
+}
+</script>
+
+<style scoped>
+.placeholder {
+  height: 200px;
+  width: 200px;
+}
+.user-teaser-popover {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: 16px;
+  gap: 16px;
+  min-width: 200px;
+}
+
+@media (max-height: 800px) {
+  .user-teaser-popover {
+    padding: 0;
+    gap: 0;
+  }
+}
+
+.location-info {
+  margin-bottom: 12px;
+}
+
+.link {
+  margin-top: 16px;
+}
+
+.statistics {
+  display: flex;
+  justify-content: space-between;
+  width: 100%;
+}
+</style>
diff --git a/webapp/components/UserTeaser/__snapshots__/LocationInfo.spec.js.snap b/webapp/components/UserTeaser/__snapshots__/LocationInfo.spec.js.snap
new file mode 100644
index 000000000..50ce23f9a
--- /dev/null
+++ b/webapp/components/UserTeaser/__snapshots__/LocationInfo.spec.js.snap
@@ -0,0 +1,51 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`LocationInfo renders with distance 1`] = `
+<div>
+  <div
+    class="location-info"
+  >
+    <div
+      class="location"
+    >
+      <span
+        class="base-icon"
+      >
+        <!---->
+      </span>
+      
+    Paris
+  
+    </div>
+     
+    <div
+      class="distance"
+    >
+      location.distance
+    </div>
+  </div>
+</div>
+`;
+
+exports[`LocationInfo renders without distance 1`] = `
+<div>
+  <div
+    class="location-info"
+  >
+    <div
+      class="location"
+    >
+      <span
+        class="base-icon"
+      >
+        <!---->
+      </span>
+      
+    Paris
+  
+    </div>
+     
+    <!---->
+  </div>
+</div>
+`;
diff --git a/webapp/components/UserTeaser/__snapshots__/UserTeaser.spec.js.snap b/webapp/components/UserTeaser/__snapshots__/UserTeaser.spec.js.snap
new file mode 100644
index 000000000..b8fc6cae9
--- /dev/null
+++ b/webapp/components/UserTeaser/__snapshots__/UserTeaser.spec.js.snap
@@ -0,0 +1,1136 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`UserTeaser given an user avatar is disabled does not render the avatar 1`] = `
+<div>
+  <div
+    class=""
+    placement="top-start"
+  >
+    <client-only-stub>
+      <v-popover-stub
+        autohide="true"
+        class="user-teaser"
+        container="body"
+        delay="0"
+        handleresize="true"
+        offset="16"
+        openclass="open"
+        opengroup="0"
+        placement="bottom-end"
+        popoverarrowclass="tooltip-arrow popover-arrow"
+        popoverbaseclass="tooltip popover"
+        popoverclass="vue-popover-theme"
+        popoverinnerclass="tooltip-inner popover-inner"
+        popoverwrapperclass="wrapper"
+        popperoptions="[object Object]"
+        trigger="manual"
+      >
+        <!---->
+         
+        <div
+          class="info flex-direction-column"
+        >
+          <div
+            class="flex-direction-column"
+          >
+            <a>
+              <span
+                class="slug"
+              >
+                @tilda-swinton
+              </span>
+               
+              <span
+                class="name"
+              >
+                Tilda Swinton
+              </span>
+            </a>
+             
+            <!---->
+             
+            <!---->
+          </div>
+           
+          <!---->
+        </div>
+         
+        <div />
+      </v-popover-stub>
+    </client-only-stub>
+  </div>
+</div>
+`;
+
+exports[`UserTeaser given an user user is deleted even if the current user is a moderator renders anonymous user 1`] = `
+<div>
+  <div
+    class="user-teaser"
+  >
+    <div
+      class="profile-avatar --small --no-image"
+    >
+      <span
+        class="initials"
+      >
+        
+      </span>
+       
+      <span
+        class="base-icon"
+      >
+        <!---->
+      </span>
+       
+      <!---->
+    </div>
+     
+    <span
+      class="info anonymous"
+    >
+      profile.userAnonym
+    </span>
+  </div>
+</div>
+`;
+
+exports[`UserTeaser given an user user is deleted renders anonymous user 1`] = `
+<div>
+  <div
+    class="user-teaser"
+  >
+    <div
+      class="profile-avatar --small --no-image"
+    >
+      <span
+        class="initials"
+      >
+        
+      </span>
+       
+      <span
+        class="base-icon"
+      >
+        <!---->
+      </span>
+       
+      <!---->
+    </div>
+     
+    <span
+      class="info anonymous"
+    >
+      profile.userAnonym
+    </span>
+  </div>
+</div>
+`;
+
+exports[`UserTeaser given an user user is disabled current user is a moderator renders user name 1`] = `
+<div>
+  <div
+    class="disabled-content"
+    placement="top-start"
+  >
+    <client-only-stub>
+      <v-popover-stub
+        autohide="true"
+        class="user-teaser"
+        container="body"
+        delay="0"
+        handleresize="true"
+        offset="16"
+        openclass="open"
+        opengroup="0"
+        placement="bottom-end"
+        popoverarrowclass="tooltip-arrow popover-arrow"
+        popoverbaseclass="tooltip popover"
+        popoverclass="vue-popover-theme"
+        popoverinnerclass="tooltip-inner popover-inner"
+        popoverwrapperclass="wrapper"
+        popperoptions="[object Object]"
+        trigger="manual"
+      >
+        <a
+          data-test="avatarUserLink"
+        >
+          <div
+            class="profile-avatar --small"
+          >
+            <span
+              class="initials"
+            >
+              TS
+            </span>
+             
+            <!---->
+             
+            <img
+              alt="Tilda Swinton"
+              class="image"
+              src="/api/avatars/tilda-swinton"
+              title="Tilda Swinton"
+            />
+          </div>
+        </a>
+         
+        <div
+          class="info flex-direction-column"
+        >
+          <div
+            class="flex-direction-column"
+          >
+            <a>
+              <span
+                class="slug"
+              >
+                @tilda-swinton
+              </span>
+               
+              <span
+                class="name"
+              >
+                Tilda Swinton
+              </span>
+            </a>
+             
+            <!---->
+             
+            <!---->
+          </div>
+           
+          <!---->
+        </div>
+         
+        <div />
+      </v-popover-stub>
+    </client-only-stub>
+  </div>
+</div>
+`;
+
+exports[`UserTeaser given an user user is disabled renders anonymous user 1`] = `
+<div>
+  <div
+    class="user-teaser"
+  >
+    <div
+      class="profile-avatar --small --no-image"
+    >
+      <span
+        class="initials"
+      >
+        
+      </span>
+       
+      <span
+        class="base-icon"
+      >
+        <!---->
+      </span>
+       
+      <!---->
+    </div>
+     
+    <span
+      class="info anonymous"
+    >
+      profile.userAnonym
+    </span>
+  </div>
+</div>
+`;
+
+exports[`UserTeaser given an user with linkToProfile, on desktop renders 1`] = `
+<div>
+  <div
+    class=""
+    placement="top-start"
+  >
+    <client-only-stub>
+      <v-popover-stub
+        autohide="true"
+        class="user-teaser"
+        container="body"
+        delay="0"
+        handleresize="true"
+        offset="16"
+        openclass="open"
+        opengroup="0"
+        placement="bottom-end"
+        popoverarrowclass="tooltip-arrow popover-arrow"
+        popoverbaseclass="tooltip popover"
+        popoverclass="vue-popover-theme"
+        popoverinnerclass="tooltip-inner popover-inner"
+        popoverwrapperclass="wrapper"
+        popperoptions="[object Object]"
+        trigger="manual"
+      >
+        <a
+          data-test="avatarUserLink"
+        >
+          <div
+            class="profile-avatar --small"
+          >
+            <span
+              class="initials"
+            >
+              TS
+            </span>
+             
+            <!---->
+             
+            <img
+              alt="Tilda Swinton"
+              class="image"
+              src="/api/avatars/tilda-swinton"
+              title="Tilda Swinton"
+            />
+          </div>
+        </a>
+         
+        <div
+          class="info flex-direction-column"
+        >
+          <div
+            class="flex-direction-column"
+          >
+            <a>
+              <span
+                class="slug"
+              >
+                @tilda-swinton
+              </span>
+               
+              <span
+                class="name"
+              >
+                Tilda Swinton
+              </span>
+            </a>
+             
+            <!---->
+             
+            <!---->
+          </div>
+           
+          <!---->
+        </div>
+         
+        <div />
+      </v-popover-stub>
+    </client-only-stub>
+  </div>
+</div>
+`;
+
+exports[`UserTeaser given an user with linkToProfile, on desktop when hovering the user name renders the popover 1`] = `
+<div>
+  <div
+    class=""
+    placement="top-start"
+  >
+    <client-only-stub>
+      <v-popover-stub
+        autohide="true"
+        class="user-teaser"
+        container="body"
+        delay="0"
+        handleresize="true"
+        offset="16"
+        open="true"
+        openclass="open"
+        opengroup="0"
+        placement="bottom-end"
+        popoverarrowclass="tooltip-arrow popover-arrow"
+        popoverbaseclass="tooltip popover"
+        popoverclass="vue-popover-theme"
+        popoverinnerclass="tooltip-inner popover-inner"
+        popoverwrapperclass="wrapper"
+        popperoptions="[object Object]"
+        trigger="manual"
+      >
+        <a
+          data-test="avatarUserLink"
+        >
+          <div
+            class="profile-avatar --small"
+          >
+            <span
+              class="initials"
+            >
+              TS
+            </span>
+             
+            <!---->
+             
+            <img
+              alt="Tilda Swinton"
+              class="image"
+              src="/api/avatars/tilda-swinton"
+              title="Tilda Swinton"
+            />
+          </div>
+        </a>
+         
+        <div
+          class="info flex-direction-column"
+        >
+          <div
+            class="flex-direction-column"
+          >
+            <a>
+              <span
+                class="slug"
+              >
+                @tilda-swinton
+              </span>
+               
+              <span
+                class="name"
+              >
+                Tilda Swinton
+              </span>
+            </a>
+             
+            <!---->
+             
+            <!---->
+          </div>
+           
+          <!---->
+        </div>
+         
+        <div>
+          <user-teaser-popover-stub
+            user-id="user1"
+            user-link="[object Object]"
+          />
+        </div>
+      </v-popover-stub>
+    </client-only-stub>
+  </div>
+</div>
+`;
+
+exports[`UserTeaser given an user with linkToProfile, on touch screen renders 1`] = `
+<div>
+  <div
+    class=""
+    placement="top-start"
+  >
+    <client-only-stub>
+      <v-popover-stub
+        autohide="true"
+        class="user-teaser"
+        container="body"
+        delay="0"
+        handleresize="true"
+        offset="16"
+        openclass="open"
+        opengroup="0"
+        placement="bottom-end"
+        popoverarrowclass="tooltip-arrow popover-arrow"
+        popoverbaseclass="tooltip popover"
+        popoverclass="vue-popover-theme"
+        popoverinnerclass="tooltip-inner popover-inner"
+        popoverwrapperclass="wrapper"
+        popperoptions="[object Object]"
+        trigger="manual"
+      >
+        <button
+          data-test="avatarUserLink"
+        >
+          <div
+            class="profile-avatar --small"
+          >
+            <span
+              class="initials"
+            >
+              TS
+            </span>
+             
+            <!---->
+             
+            <img
+              alt="Tilda Swinton"
+              class="image"
+              src="/api/avatars/tilda-swinton"
+              title="Tilda Swinton"
+            />
+          </div>
+        </button>
+         
+        <div
+          class="info flex-direction-column"
+        >
+          <div
+            class="flex-direction-column"
+          >
+            <button>
+              <span
+                class="slug"
+              >
+                @tilda-swinton
+              </span>
+               
+              <span
+                class="name"
+              >
+                Tilda Swinton
+              </span>
+            </button>
+             
+            <!---->
+             
+            <!---->
+          </div>
+           
+          <!---->
+        </div>
+         
+        <div />
+      </v-popover-stub>
+    </client-only-stub>
+  </div>
+</div>
+`;
+
+exports[`UserTeaser given an user with linkToProfile, on touch screen when clicking the user name renders the popover 1`] = `
+<div>
+  <div
+    class=""
+    placement="top-start"
+  >
+    <client-only-stub>
+      <v-popover-stub
+        autohide="true"
+        class="user-teaser"
+        container="body"
+        delay="0"
+        handleresize="true"
+        offset="16"
+        open="true"
+        openclass="open"
+        opengroup="0"
+        placement="bottom-end"
+        popoverarrowclass="tooltip-arrow popover-arrow"
+        popoverbaseclass="tooltip popover"
+        popoverclass="vue-popover-theme"
+        popoverinnerclass="tooltip-inner popover-inner"
+        popoverwrapperclass="wrapper"
+        popperoptions="[object Object]"
+        trigger="manual"
+      >
+        <button
+          data-test="avatarUserLink"
+        >
+          <div
+            class="profile-avatar --small"
+          >
+            <span
+              class="initials"
+            >
+              TS
+            </span>
+             
+            <!---->
+             
+            <img
+              alt="Tilda Swinton"
+              class="image"
+              src="/api/avatars/tilda-swinton"
+              title="Tilda Swinton"
+            />
+          </div>
+        </button>
+         
+        <div
+          class="info flex-direction-column"
+        >
+          <div
+            class="flex-direction-column"
+          >
+            <button>
+              <span
+                class="slug"
+              >
+                @tilda-swinton
+              </span>
+               
+              <span
+                class="name"
+              >
+                Tilda Swinton
+              </span>
+            </button>
+             
+            <!---->
+             
+            <!---->
+          </div>
+           
+          <!---->
+        </div>
+         
+        <div>
+          <user-teaser-popover-stub
+            user-id="user1"
+            user-link="[object Object]"
+          />
+        </div>
+      </v-popover-stub>
+    </client-only-stub>
+  </div>
+</div>
+`;
+
+exports[`UserTeaser given an user without linkToProfile, on desktop renders 1`] = `
+<div>
+  <div
+    class=""
+    placement="top-start"
+  >
+    <client-only-stub>
+      <v-popover-stub
+        autohide="true"
+        class="user-teaser"
+        container="body"
+        delay="0"
+        handleresize="true"
+        offset="16"
+        openclass="open"
+        opengroup="0"
+        placement="bottom-end"
+        popoverarrowclass="tooltip-arrow popover-arrow"
+        popoverbaseclass="tooltip popover"
+        popoverclass="vue-popover-theme"
+        popoverinnerclass="tooltip-inner popover-inner"
+        popoverwrapperclass="wrapper"
+        popperoptions="[object Object]"
+        trigger="manual"
+      >
+        <span
+          data-test="avatarUserLink"
+        >
+          <div
+            class="profile-avatar --small"
+          >
+            <span
+              class="initials"
+            >
+              TS
+            </span>
+             
+            <!---->
+             
+            <img
+              alt="Tilda Swinton"
+              class="image"
+              src="/api/avatars/tilda-swinton"
+              title="Tilda Swinton"
+            />
+          </div>
+        </span>
+         
+        <div
+          class="info flex-direction-column"
+        >
+          <div
+            class="flex-direction-column"
+          >
+            <span>
+              <span
+                class="slug"
+              >
+                @tilda-swinton
+              </span>
+               
+              <span
+                class="name"
+              >
+                Tilda Swinton
+              </span>
+            </span>
+             
+            <!---->
+             
+            <!---->
+          </div>
+           
+          <!---->
+        </div>
+         
+        <div />
+      </v-popover-stub>
+    </client-only-stub>
+  </div>
+</div>
+`;
+
+exports[`UserTeaser given an user without linkToProfile, on desktop when hovering the user avatar renders the popover 1`] = `
+<div>
+  <div
+    class=""
+    placement="top-start"
+  >
+    <client-only-stub>
+      <v-popover-stub
+        autohide="true"
+        class="user-teaser"
+        container="body"
+        delay="0"
+        handleresize="true"
+        offset="16"
+        open="true"
+        openclass="open"
+        opengroup="0"
+        placement="bottom-end"
+        popoverarrowclass="tooltip-arrow popover-arrow"
+        popoverbaseclass="tooltip popover"
+        popoverclass="vue-popover-theme"
+        popoverinnerclass="tooltip-inner popover-inner"
+        popoverwrapperclass="wrapper"
+        popperoptions="[object Object]"
+        trigger="manual"
+      >
+        <span
+          data-test="avatarUserLink"
+        >
+          <div
+            class="profile-avatar --small"
+          >
+            <span
+              class="initials"
+            >
+              TS
+            </span>
+             
+            <!---->
+             
+            <img
+              alt="Tilda Swinton"
+              class="image"
+              src="/api/avatars/tilda-swinton"
+              title="Tilda Swinton"
+            />
+          </div>
+        </span>
+         
+        <div
+          class="info flex-direction-column"
+        >
+          <div
+            class="flex-direction-column"
+          >
+            <span>
+              <span
+                class="slug"
+              >
+                @tilda-swinton
+              </span>
+               
+              <span
+                class="name"
+              >
+                Tilda Swinton
+              </span>
+            </span>
+             
+            <!---->
+             
+            <!---->
+          </div>
+           
+          <!---->
+        </div>
+         
+        <div>
+          <user-teaser-popover-stub
+            user-id="user1"
+          />
+        </div>
+      </v-popover-stub>
+    </client-only-stub>
+  </div>
+</div>
+`;
+
+exports[`UserTeaser given an user without linkToProfile, on desktop when hovering the user name renders the popover 1`] = `
+<div>
+  <div
+    class=""
+    placement="top-start"
+  >
+    <client-only-stub>
+      <v-popover-stub
+        autohide="true"
+        class="user-teaser"
+        container="body"
+        delay="0"
+        handleresize="true"
+        offset="16"
+        open="true"
+        openclass="open"
+        opengroup="0"
+        placement="bottom-end"
+        popoverarrowclass="tooltip-arrow popover-arrow"
+        popoverbaseclass="tooltip popover"
+        popoverclass="vue-popover-theme"
+        popoverinnerclass="tooltip-inner popover-inner"
+        popoverwrapperclass="wrapper"
+        popperoptions="[object Object]"
+        trigger="manual"
+      >
+        <span
+          data-test="avatarUserLink"
+        >
+          <div
+            class="profile-avatar --small"
+          >
+            <span
+              class="initials"
+            >
+              TS
+            </span>
+             
+            <!---->
+             
+            <img
+              alt="Tilda Swinton"
+              class="image"
+              src="/api/avatars/tilda-swinton"
+              title="Tilda Swinton"
+            />
+          </div>
+        </span>
+         
+        <div
+          class="info flex-direction-column"
+        >
+          <div
+            class="flex-direction-column"
+          >
+            <span>
+              <span
+                class="slug"
+              >
+                @tilda-swinton
+              </span>
+               
+              <span
+                class="name"
+              >
+                Tilda Swinton
+              </span>
+            </span>
+             
+            <!---->
+             
+            <!---->
+          </div>
+           
+          <!---->
+        </div>
+         
+        <div>
+          <user-teaser-popover-stub
+            user-id="user1"
+          />
+        </div>
+      </v-popover-stub>
+    </client-only-stub>
+  </div>
+</div>
+`;
+
+exports[`UserTeaser given an user without linkToProfile, on touch screen renders 1`] = `
+<div>
+  <div
+    class=""
+    placement="top-start"
+  >
+    <client-only-stub>
+      <v-popover-stub
+        autohide="true"
+        class="user-teaser"
+        container="body"
+        delay="0"
+        handleresize="true"
+        offset="16"
+        openclass="open"
+        opengroup="0"
+        placement="bottom-end"
+        popoverarrowclass="tooltip-arrow popover-arrow"
+        popoverbaseclass="tooltip popover"
+        popoverclass="vue-popover-theme"
+        popoverinnerclass="tooltip-inner popover-inner"
+        popoverwrapperclass="wrapper"
+        popperoptions="[object Object]"
+        trigger="manual"
+      >
+        <button
+          data-test="avatarUserLink"
+        >
+          <div
+            class="profile-avatar --small"
+          >
+            <span
+              class="initials"
+            >
+              TS
+            </span>
+             
+            <!---->
+             
+            <img
+              alt="Tilda Swinton"
+              class="image"
+              src="/api/avatars/tilda-swinton"
+              title="Tilda Swinton"
+            />
+          </div>
+        </button>
+         
+        <div
+          class="info flex-direction-column"
+        >
+          <div
+            class="flex-direction-column"
+          >
+            <button>
+              <span
+                class="slug"
+              >
+                @tilda-swinton
+              </span>
+               
+              <span
+                class="name"
+              >
+                Tilda Swinton
+              </span>
+            </button>
+             
+            <!---->
+             
+            <!---->
+          </div>
+           
+          <!---->
+        </div>
+         
+        <div />
+      </v-popover-stub>
+    </client-only-stub>
+  </div>
+</div>
+`;
+
+exports[`UserTeaser given an user without linkToProfile, on touch screen when clicking the user avatar renders the popover 1`] = `
+<div>
+  <div
+    class=""
+    placement="top-start"
+  >
+    <client-only-stub>
+      <v-popover-stub
+        autohide="true"
+        class="user-teaser"
+        container="body"
+        delay="0"
+        handleresize="true"
+        offset="16"
+        open="true"
+        openclass="open"
+        opengroup="0"
+        placement="bottom-end"
+        popoverarrowclass="tooltip-arrow popover-arrow"
+        popoverbaseclass="tooltip popover"
+        popoverclass="vue-popover-theme"
+        popoverinnerclass="tooltip-inner popover-inner"
+        popoverwrapperclass="wrapper"
+        popperoptions="[object Object]"
+        trigger="manual"
+      >
+        <button
+          data-test="avatarUserLink"
+        >
+          <div
+            class="profile-avatar --small"
+          >
+            <span
+              class="initials"
+            >
+              TS
+            </span>
+             
+            <!---->
+             
+            <img
+              alt="Tilda Swinton"
+              class="image"
+              src="/api/avatars/tilda-swinton"
+              title="Tilda Swinton"
+            />
+          </div>
+        </button>
+         
+        <div
+          class="info flex-direction-column"
+        >
+          <div
+            class="flex-direction-column"
+          >
+            <button>
+              <span
+                class="slug"
+              >
+                @tilda-swinton
+              </span>
+               
+              <span
+                class="name"
+              >
+                Tilda Swinton
+              </span>
+            </button>
+             
+            <!---->
+             
+            <!---->
+          </div>
+           
+          <!---->
+        </div>
+         
+        <div>
+          <user-teaser-popover-stub
+            user-id="user1"
+          />
+        </div>
+      </v-popover-stub>
+    </client-only-stub>
+  </div>
+</div>
+`;
+
+exports[`UserTeaser given an user without linkToProfile, on touch screen when clicking the user name renders the popover 1`] = `
+<div>
+  <div
+    class=""
+    placement="top-start"
+  >
+    <client-only-stub>
+      <v-popover-stub
+        autohide="true"
+        class="user-teaser"
+        container="body"
+        delay="0"
+        handleresize="true"
+        offset="16"
+        open="true"
+        openclass="open"
+        opengroup="0"
+        placement="bottom-end"
+        popoverarrowclass="tooltip-arrow popover-arrow"
+        popoverbaseclass="tooltip popover"
+        popoverclass="vue-popover-theme"
+        popoverinnerclass="tooltip-inner popover-inner"
+        popoverwrapperclass="wrapper"
+        popperoptions="[object Object]"
+        trigger="manual"
+      >
+        <button
+          data-test="avatarUserLink"
+        >
+          <div
+            class="profile-avatar --small"
+          >
+            <span
+              class="initials"
+            >
+              TS
+            </span>
+             
+            <!---->
+             
+            <img
+              alt="Tilda Swinton"
+              class="image"
+              src="/api/avatars/tilda-swinton"
+              title="Tilda Swinton"
+            />
+          </div>
+        </button>
+         
+        <div
+          class="info flex-direction-column"
+        >
+          <div
+            class="flex-direction-column"
+          >
+            <button>
+              <span
+                class="slug"
+              >
+                @tilda-swinton
+              </span>
+               
+              <span
+                class="name"
+              >
+                Tilda Swinton
+              </span>
+            </button>
+             
+            <!---->
+             
+            <!---->
+          </div>
+           
+          <!---->
+        </div>
+         
+        <div>
+          <user-teaser-popover-stub
+            user-id="user1"
+          />
+        </div>
+      </v-popover-stub>
+    </client-only-stub>
+  </div>
+</div>
+`;
+
+exports[`UserTeaser renders anonymous user 1`] = `
+<div>
+  <div
+    class="user-teaser"
+  >
+    <div
+      class="profile-avatar --small --no-image"
+    >
+      <span
+        class="initials"
+      >
+        
+      </span>
+       
+      <span
+        class="base-icon"
+      >
+        <!---->
+      </span>
+       
+      <!---->
+    </div>
+     
+    <span
+      class="info anonymous"
+    >
+      profile.userAnonym
+    </span>
+  </div>
+</div>
+`;
diff --git a/webapp/components/UserTeaser/__snapshots__/UserTeaserHelper.spec.js.snap b/webapp/components/UserTeaser/__snapshots__/UserTeaserHelper.spec.js.snap
new file mode 100644
index 000000000..2257e8a51
--- /dev/null
+++ b/webapp/components/UserTeaser/__snapshots__/UserTeaserHelper.spec.js.snap
@@ -0,0 +1,19 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`UserTeaserHelper with linkToProfile and popover enabled, on touch screen renders button 1`] = `
+<div>
+  <button />
+</div>
+`;
+
+exports[`UserTeaserHelper with linkToProfile, on desktop renders link 1`] = `
+<div>
+  <a />
+</div>
+`;
+
+exports[`UserTeaserHelper without linkToProfile renders span 1`] = `
+<div>
+  <span />
+</div>
+`;
diff --git a/webapp/components/UserTeaser/__snapshots__/UserTeaserPopover.spec.js.snap b/webapp/components/UserTeaser/__snapshots__/UserTeaserPopover.spec.js.snap
new file mode 100644
index 000000000..3eab03611
--- /dev/null
+++ b/webapp/components/UserTeaser/__snapshots__/UserTeaserPopover.spec.js.snap
@@ -0,0 +1,547 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`UserTeaserPopover does not show badges when disabled 1`] = `
+<div>
+  <div
+    class="user-teaser-popover"
+  >
+    <!---->
+     
+    <!---->
+     
+    <ul
+      class="statistics"
+    >
+      <li>
+        <div
+          class="ds-number ds-number-size-x-large"
+        >
+          <p
+            class="ds-text ds-number-count ds-text-size-x-large"
+            style="margin-bottom: 0px;"
+          >
+            0
+          </p>
+          <p
+            class="ds-text ds-number-label ds-text-size-small ds-text-soft"
+          >
+            
+    profile.followers
+  
+          </p>
+        </div>
+      </li>
+       
+      <li>
+        <div
+          class="ds-number ds-number-size-x-large"
+        >
+          <p
+            class="ds-text ds-number-count ds-text-size-x-large"
+            style="margin-bottom: 0px;"
+          >
+            0
+          </p>
+          <p
+            class="ds-text ds-number-label ds-text-size-small ds-text-soft"
+          >
+            
+    common.post
+  
+          </p>
+        </div>
+      </li>
+       
+      <li>
+        <div
+          class="ds-number ds-number-size-x-large"
+        >
+          <p
+            class="ds-text ds-number-count ds-text-size-x-large"
+            style="margin-bottom: 0px;"
+          >
+            0
+          </p>
+          <p
+            class="ds-text ds-number-label ds-text-size-small ds-text-soft"
+          >
+            
+    common.comment
+  
+          </p>
+        </div>
+      </li>
+    </ul>
+     
+    <!---->
+  </div>
+</div>
+`;
+
+exports[`UserTeaserPopover given a non-touch device does not show button when userLink is provided 1`] = `
+<div>
+  <div
+    class="user-teaser-popover"
+  >
+    <div
+      class="hc-badges"
+    >
+      <div
+        class="hc-badge-container"
+      >
+        <img
+          class="hc-badge"
+          src="/api/icons/verified"
+          title="Verified"
+        />
+      </div>
+      <div
+        class="hc-badge-container"
+      >
+        <img
+          class="hc-badge"
+          src="/api/icons/trophy1"
+          title="Trophy 1"
+        />
+      </div>
+      <div
+        class="hc-badge-container"
+      >
+        <img
+          class="hc-badge"
+          src="/api/icons/trophy2"
+          title="Trophy 2"
+        />
+      </div>
+      <div
+        class="hc-badge-container"
+      >
+        <img
+          class="hc-badge"
+          src="/api/icons/empty"
+          title="Empty"
+        />
+      </div>
+    </div>
+     
+    <!---->
+     
+    <ul
+      class="statistics"
+    >
+      <li>
+        <div
+          class="ds-number ds-number-size-x-large"
+        >
+          <p
+            class="ds-text ds-number-count ds-text-size-x-large"
+            style="margin-bottom: 0px;"
+          >
+            0
+          </p>
+          <p
+            class="ds-text ds-number-label ds-text-size-small ds-text-soft"
+          >
+            
+    profile.followers
+  
+          </p>
+        </div>
+      </li>
+       
+      <li>
+        <div
+          class="ds-number ds-number-size-x-large"
+        >
+          <p
+            class="ds-text ds-number-count ds-text-size-x-large"
+            style="margin-bottom: 0px;"
+          >
+            0
+          </p>
+          <p
+            class="ds-text ds-number-label ds-text-size-small ds-text-soft"
+          >
+            
+    common.post
+  
+          </p>
+        </div>
+      </li>
+       
+      <li>
+        <div
+          class="ds-number ds-number-size-x-large"
+        >
+          <p
+            class="ds-text ds-number-count ds-text-size-x-large"
+            style="margin-bottom: 0px;"
+          >
+            0
+          </p>
+          <p
+            class="ds-text ds-number-label ds-text-size-small ds-text-soft"
+          >
+            
+    common.comment
+  
+          </p>
+        </div>
+      </li>
+    </ul>
+     
+    <!---->
+  </div>
+</div>
+`;
+
+exports[`UserTeaserPopover given a touch device does not show button when userLink is not provided 1`] = `
+<div>
+  <div
+    class="user-teaser-popover"
+  >
+    <div
+      class="hc-badges"
+    >
+      <div
+        class="hc-badge-container"
+      >
+        <img
+          class="hc-badge"
+          src="/api/icons/verified"
+          title="Verified"
+        />
+      </div>
+      <div
+        class="hc-badge-container"
+      >
+        <img
+          class="hc-badge"
+          src="/api/icons/trophy1"
+          title="Trophy 1"
+        />
+      </div>
+      <div
+        class="hc-badge-container"
+      >
+        <img
+          class="hc-badge"
+          src="/api/icons/trophy2"
+          title="Trophy 2"
+        />
+      </div>
+      <div
+        class="hc-badge-container"
+      >
+        <img
+          class="hc-badge"
+          src="/api/icons/empty"
+          title="Empty"
+        />
+      </div>
+    </div>
+     
+    <!---->
+     
+    <ul
+      class="statistics"
+    >
+      <li>
+        <div
+          class="ds-number ds-number-size-x-large"
+        >
+          <p
+            class="ds-text ds-number-count ds-text-size-x-large"
+            style="margin-bottom: 0px;"
+          >
+            0
+          </p>
+          <p
+            class="ds-text ds-number-label ds-text-size-small ds-text-soft"
+          >
+            
+    profile.followers
+  
+          </p>
+        </div>
+      </li>
+       
+      <li>
+        <div
+          class="ds-number ds-number-size-x-large"
+        >
+          <p
+            class="ds-text ds-number-count ds-text-size-x-large"
+            style="margin-bottom: 0px;"
+          >
+            0
+          </p>
+          <p
+            class="ds-text ds-number-label ds-text-size-small ds-text-soft"
+          >
+            
+    common.post
+  
+          </p>
+        </div>
+      </li>
+       
+      <li>
+        <div
+          class="ds-number ds-number-size-x-large"
+        >
+          <p
+            class="ds-text ds-number-count ds-text-size-x-large"
+            style="margin-bottom: 0px;"
+          >
+            0
+          </p>
+          <p
+            class="ds-text ds-number-label ds-text-size-small ds-text-soft"
+          >
+            
+    common.comment
+  
+          </p>
+        </div>
+      </li>
+    </ul>
+     
+    <!---->
+  </div>
+</div>
+`;
+
+exports[`UserTeaserPopover given a touch device shows button when userLink is provided 1`] = `
+<div>
+  <div
+    class="user-teaser-popover"
+  >
+    <div
+      class="hc-badges"
+    >
+      <div
+        class="hc-badge-container"
+      >
+        <img
+          class="hc-badge"
+          src="/api/icons/verified"
+          title="Verified"
+        />
+      </div>
+      <div
+        class="hc-badge-container"
+      >
+        <img
+          class="hc-badge"
+          src="/api/icons/trophy1"
+          title="Trophy 1"
+        />
+      </div>
+      <div
+        class="hc-badge-container"
+      >
+        <img
+          class="hc-badge"
+          src="/api/icons/trophy2"
+          title="Trophy 2"
+        />
+      </div>
+      <div
+        class="hc-badge-container"
+      >
+        <img
+          class="hc-badge"
+          src="/api/icons/empty"
+          title="Empty"
+        />
+      </div>
+    </div>
+     
+    <!---->
+     
+    <ul
+      class="statistics"
+    >
+      <li>
+        <div
+          class="ds-number ds-number-size-x-large"
+        >
+          <p
+            class="ds-text ds-number-count ds-text-size-x-large"
+            style="margin-bottom: 0px;"
+          >
+            0
+          </p>
+          <p
+            class="ds-text ds-number-label ds-text-size-small ds-text-soft"
+          >
+            
+    profile.followers
+  
+          </p>
+        </div>
+      </li>
+       
+      <li>
+        <div
+          class="ds-number ds-number-size-x-large"
+        >
+          <p
+            class="ds-text ds-number-count ds-text-size-x-large"
+            style="margin-bottom: 0px;"
+          >
+            0
+          </p>
+          <p
+            class="ds-text ds-number-label ds-text-size-small ds-text-soft"
+          >
+            
+    common.post
+  
+          </p>
+        </div>
+      </li>
+       
+      <li>
+        <div
+          class="ds-number ds-number-size-x-large"
+        >
+          <p
+            class="ds-text ds-number-count ds-text-size-x-large"
+            style="margin-bottom: 0px;"
+          >
+            0
+          </p>
+          <p
+            class="ds-text ds-number-label ds-text-size-small ds-text-soft"
+          >
+            
+    common.comment
+  
+          </p>
+        </div>
+      </li>
+    </ul>
+     
+    <!---->
+  </div>
+</div>
+`;
+
+exports[`UserTeaserPopover shows badges when enabled 1`] = `
+<div>
+  <div
+    class="user-teaser-popover"
+  >
+    <div
+      class="hc-badges"
+    >
+      <div
+        class="hc-badge-container"
+      >
+        <img
+          class="hc-badge"
+          src="/api/icons/verified"
+          title="Verified"
+        />
+      </div>
+      <div
+        class="hc-badge-container"
+      >
+        <img
+          class="hc-badge"
+          src="/api/icons/trophy1"
+          title="Trophy 1"
+        />
+      </div>
+      <div
+        class="hc-badge-container"
+      >
+        <img
+          class="hc-badge"
+          src="/api/icons/trophy2"
+          title="Trophy 2"
+        />
+      </div>
+      <div
+        class="hc-badge-container"
+      >
+        <img
+          class="hc-badge"
+          src="/api/icons/empty"
+          title="Empty"
+        />
+      </div>
+    </div>
+     
+    <!---->
+     
+    <ul
+      class="statistics"
+    >
+      <li>
+        <div
+          class="ds-number ds-number-size-x-large"
+        >
+          <p
+            class="ds-text ds-number-count ds-text-size-x-large"
+            style="margin-bottom: 0px;"
+          >
+            0
+          </p>
+          <p
+            class="ds-text ds-number-label ds-text-size-small ds-text-soft"
+          >
+            
+    profile.followers
+  
+          </p>
+        </div>
+      </li>
+       
+      <li>
+        <div
+          class="ds-number ds-number-size-x-large"
+        >
+          <p
+            class="ds-text ds-number-count ds-text-size-x-large"
+            style="margin-bottom: 0px;"
+          >
+            0
+          </p>
+          <p
+            class="ds-text ds-number-label ds-text-size-small ds-text-soft"
+          >
+            
+    common.post
+  
+          </p>
+        </div>
+      </li>
+       
+      <li>
+        <div
+          class="ds-number ds-number-size-x-large"
+        >
+          <p
+            class="ds-text ds-number-count ds-text-size-x-large"
+            style="margin-bottom: 0px;"
+          >
+            0
+          </p>
+          <p
+            class="ds-text ds-number-label ds-text-size-small ds-text-soft"
+          >
+            
+    common.comment
+  
+          </p>
+        </div>
+      </li>
+    </ul>
+     
+    <!---->
+  </div>
+</div>
+`;
diff --git a/webapp/components/utils/isTouchDevice.js b/webapp/components/utils/isTouchDevice.js
new file mode 100644
index 000000000..a6bc17752
--- /dev/null
+++ b/webapp/components/utils/isTouchDevice.js
@@ -0,0 +1,2 @@
+export const isTouchDevice = () =>
+  'ontouchstart' in window || navigator.MaxTouchPoints > 0 || navigator.msMaxTouchPoints > 0
diff --git a/webapp/graphql/Fragments.js b/webapp/graphql/Fragments.js
index 77af830e8..e1704923f 100644
--- a/webapp/graphql/Fragments.js
+++ b/webapp/graphql/Fragments.js
@@ -17,9 +17,11 @@ export const locationFragment = (lang) => gql`
   fragment location on User {
     locationName
     location {
+      id
       name: name${lang}
       lng
       lat
+      distanceToMe
     }
   }
 `
@@ -50,6 +52,19 @@ export const userCountsFragment = gql`
   }
 `
 
+export const userTeaserFragment = (lang) => gql`
+  ${badgesFragment}
+  ${locationFragment(lang)}
+
+  fragment userTeaser on User {
+    followedByCount
+    contributionsCount
+    commentedCount
+    ...badges
+    ...location
+  }
+`
+
 export const postFragment = gql`
   fragment post on Post {
     id
diff --git a/webapp/graphql/User.js b/webapp/graphql/User.js
index 75342ef2a..7440b5051 100644
--- a/webapp/graphql/User.js
+++ b/webapp/graphql/User.js
@@ -7,6 +7,7 @@ import {
   postFragment,
   commentFragment,
   groupFragment,
+  userTeaserFragment,
 } from './Fragments'
 
 export const profileUserQuery = (i18n) => {
@@ -125,7 +126,7 @@ export const mapUserQuery = (i18n) => {
   `
 }
 
-export const notificationQuery = (_i18n) => {
+export const notificationQuery = () => {
   return gql`
     ${userFragment}
     ${commentFragment}
@@ -483,6 +484,18 @@ export const userDataQuery = (i18n) => {
   `
 }
 
+export const userTeaserQuery = (i18n) => {
+  const lang = i18n.locale().toUpperCase()
+  return gql`
+    ${userTeaserFragment(lang)}
+    query ($id: ID!) {
+      User(id: $id) {
+        ...userTeaser
+      }
+    }
+  `
+}
+
 export const setTrophyBadgeSelected = gql`
   mutation ($slot: Int!, $badgeId: ID) {
     setTrophyBadgeSelected(slot: $slot, badgeId: $badgeId) {
diff --git a/webapp/locales/de.json b/webapp/locales/de.json
index df050b191..e2b641b08 100644
--- a/webapp/locales/de.json
+++ b/webapp/locales/de.json
@@ -636,6 +636,9 @@
   "localeSwitch": {
     "tooltip": "Sprache wählen"
   },
+  "location": {
+    "distance": "{distance} km von mir entfernt"
+  },
   "login": {
     "email": "Deine E-Mail",
     "failure": "Fehlerhafte E-Mail-Adresse oder Passwort.",
@@ -1173,5 +1176,10 @@
     "newTermsAndConditions": "Neue Nutzungsbedingungen",
     "termsAndConditionsNewConfirm": "Ich habe die neuen Nutzungsbedingungen durchgelesen und stimme zu.",
     "termsAndConditionsNewConfirmText": "Bitte lies Dir die neuen Nutzungsbedingungen jetzt durch!"
+  },
+  "user-teaser": {
+    "popover": {
+      "open-profile": "Profil öffnen"
+    }
   }
 }
diff --git a/webapp/locales/en.json b/webapp/locales/en.json
index ecd0ec18d..ab34ba66a 100644
--- a/webapp/locales/en.json
+++ b/webapp/locales/en.json
@@ -636,6 +636,9 @@
   "localeSwitch": {
     "tooltip": "Choose language"
   },
+  "location": {
+    "distance": "{distance} km away from me"
+  },
   "login": {
     "email": "Your E-mail",
     "failure": "Incorrect email address or password.",
@@ -1173,5 +1176,10 @@
     "newTermsAndConditions": "New Terms and Conditions",
     "termsAndConditionsNewConfirm": "I have read and agree to the new terms of conditions.",
     "termsAndConditionsNewConfirmText": "Please read the new terms of use now!"
+  },
+  "user-teaser": {
+    "popover": {
+      "open-profile": "Open profile"
+    }
   }
 }
diff --git a/webapp/locales/es.json b/webapp/locales/es.json
index 15096b9d8..b7d95d11c 100644
--- a/webapp/locales/es.json
+++ b/webapp/locales/es.json
@@ -636,6 +636,9 @@
   "localeSwitch": {
     "tooltip": null
   },
+  "location": {
+    "distance": null
+  },
   "login": {
     "email": "Su correo electrónico",
     "failure": "Dirección de correo electrónico o contraseña incorrecta.",
@@ -1173,5 +1176,10 @@
     "newTermsAndConditions": "Nuevos términos de uso",
     "termsAndConditionsNewConfirm": "He leído y acepto los nuevos términos de uso.",
     "termsAndConditionsNewConfirmText": "¡Por favor, lea los nuevos términos de uso ahora!"
+  },
+  "user-teaser": {
+    "popover": {
+      "open-profile": null
+    }
   }
 }
diff --git a/webapp/locales/fr.json b/webapp/locales/fr.json
index 2da2a9801..37a182c28 100644
--- a/webapp/locales/fr.json
+++ b/webapp/locales/fr.json
@@ -636,6 +636,9 @@
   "localeSwitch": {
     "tooltip": null
   },
+  "location": {
+    "distance": null
+  },
   "login": {
     "email": "Votre mail",
     "failure": "Adresse mail ou mot de passe incorrect.",
@@ -1173,5 +1176,10 @@
     "newTermsAndConditions": "Nouvelles conditions générales",
     "termsAndConditionsNewConfirm": "J'ai lu et accepté les nouvelles conditions générales.",
     "termsAndConditionsNewConfirmText": "Veuillez lire les nouvelles conditions d'utilisation dès maintenant !"
+  },
+  "user-teaser": {
+    "popover": {
+      "open-profile": null
+    }
   }
 }
diff --git a/webapp/locales/it.json b/webapp/locales/it.json
index 485abff3a..6b686502c 100644
--- a/webapp/locales/it.json
+++ b/webapp/locales/it.json
@@ -636,6 +636,9 @@
   "localeSwitch": {
     "tooltip": null
   },
+  "location": {
+    "distance": null
+  },
   "login": {
     "email": "La tua email",
     "failure": null,
@@ -1173,5 +1176,10 @@
     "newTermsAndConditions": "Nuovi Termini e Condizioni",
     "termsAndConditionsNewConfirm": "Ho letto e accetto le nuove condizioni generali di contratto.",
     "termsAndConditionsNewConfirmText": "Si prega di leggere le nuove condizioni d'uso ora!"
+  },
+  "user-teaser": {
+    "popover": {
+      "open-profile": null
+    }
   }
 }
diff --git a/webapp/locales/nl.json b/webapp/locales/nl.json
index 40f9aca2e..714ed2b01 100644
--- a/webapp/locales/nl.json
+++ b/webapp/locales/nl.json
@@ -636,6 +636,9 @@
   "localeSwitch": {
     "tooltip": null
   },
+  "location": {
+    "distance": null
+  },
   "login": {
     "email": "Uw E-mail",
     "failure": null,
@@ -1173,5 +1176,10 @@
     "newTermsAndConditions": null,
     "termsAndConditionsNewConfirm": null,
     "termsAndConditionsNewConfirmText": null
+  },
+  "user-teaser": {
+    "popover": {
+      "open-profile": null
+    }
   }
 }
diff --git a/webapp/locales/pl.json b/webapp/locales/pl.json
index ee332b84b..61a6acf24 100644
--- a/webapp/locales/pl.json
+++ b/webapp/locales/pl.json
@@ -636,6 +636,9 @@
   "localeSwitch": {
     "tooltip": null
   },
+  "location": {
+    "distance": null
+  },
   "login": {
     "email": "Twój adres e-mail",
     "failure": null,
@@ -1173,5 +1176,10 @@
     "newTermsAndConditions": null,
     "termsAndConditionsNewConfirm": null,
     "termsAndConditionsNewConfirmText": null
+  },
+  "user-teaser": {
+    "popover": {
+      "open-profile": null
+    }
   }
 }
diff --git a/webapp/locales/pt.json b/webapp/locales/pt.json
index 54f9b5d99..80172daa3 100644
--- a/webapp/locales/pt.json
+++ b/webapp/locales/pt.json
@@ -636,6 +636,9 @@
   "localeSwitch": {
     "tooltip": null
   },
+  "location": {
+    "distance": null
+  },
   "login": {
     "email": "Seu email",
     "failure": "Endereço de e-mail ou senha incorretos.",
@@ -1173,5 +1176,10 @@
     "newTermsAndConditions": "Novos Termos e Condições",
     "termsAndConditionsNewConfirm": "Eu li e concordo com os novos termos de condições.",
     "termsAndConditionsNewConfirmText": "Por favor, leia os novos termos de uso agora!"
+  },
+  "user-teaser": {
+    "popover": {
+      "open-profile": null
+    }
   }
 }
diff --git a/webapp/locales/ru.json b/webapp/locales/ru.json
index 4d2e2a357..f7956755c 100644
--- a/webapp/locales/ru.json
+++ b/webapp/locales/ru.json
@@ -636,6 +636,9 @@
   "localeSwitch": {
     "tooltip": null
   },
+  "location": {
+    "distance": null
+  },
   "login": {
     "email": "Электронная почта",
     "failure": "Неверный адрес электронной почты или пароль.",
@@ -1173,5 +1176,10 @@
     "newTermsAndConditions": "Новые условия и положения",
     "termsAndConditionsNewConfirm": "Я прочитал(а) и согласен(на) с новыми условиями.",
     "termsAndConditionsNewConfirmText": "Пожалуйста, ознакомьтесь с новыми условиями использования!"
+  },
+  "user-teaser": {
+    "popover": {
+      "open-profile": null
+    }
   }
 }
diff --git a/webapp/pages/groups/_id/__snapshots__/_slug.spec.js.snap b/webapp/pages/groups/_id/__snapshots__/_slug.spec.js.snap
index cb43b8526..68c2b50ba 100644
--- a/webapp/pages/groups/_id/__snapshots__/_slug.spec.js.snap
+++ b/webapp/pages/groups/_id/__snapshots__/_slug.spec.js.snap
@@ -493,39 +493,52 @@ exports[`GroupProfileSlug given a puplic group – "yoga-practice" given a close
                 class=""
                 placement="top-start"
               >
-                <div
-                  class="user-teaser"
-                >
-                  <nuxt-link-stub
-                    data-test="avatarUserLink"
-                    to="[object Object]"
+                <client-only-stub>
+                  <v-popover-stub
+                    autohide="true"
+                    class="user-teaser"
+                    container="body"
+                    delay="0"
+                    handleresize="true"
+                    offset="16"
+                    openclass="open"
+                    opengroup="0"
+                    placement="bottom-end"
+                    popoverarrowclass="tooltip-arrow popover-arrow"
+                    popoverbaseclass="tooltip popover"
+                    popoverclass="vue-popover-theme"
+                    popoverinnerclass="tooltip-inner popover-inner"
+                    popoverwrapperclass="wrapper"
+                    popperoptions="[object Object]"
+                    trigger="manual"
                   >
-                    <div
-                      class="profile-avatar --small --no-image"
+                    <nuxt-link-stub
+                      data-test="avatarUserLink"
+                      to="[object Object]"
                     >
-                      <span
-                        class="initials"
-                      >
-                        PL
-                      </span>
-                       
-                      <!---->
-                       
-                      <!---->
-                    </div>
-                  </nuxt-link-stub>
-                   
-                  <div
-                    class="info flex-direction-column"
-                  >
-                    <div
-                      class="flex-direction-column"
-                    >
-                      <nuxt-link-stub
-                        to="[object Object]"
+                      <div
+                        class="profile-avatar --small --no-image"
                       >
                         <span
-                          class="text"
+                          class="initials"
+                        >
+                          PL
+                        </span>
+                         
+                        <!---->
+                         
+                        <!---->
+                      </div>
+                    </nuxt-link-stub>
+                     
+                    <div
+                      class="info flex-direction-column"
+                    >
+                      <div
+                        class="flex-direction-column"
+                      >
+                        <nuxt-link-stub
+                          to="[object Object]"
                         >
                           <span
                             class="slug"
@@ -538,17 +551,19 @@ exports[`GroupProfileSlug given a puplic group – "yoga-practice" given a close
                           >
                             Peter Lustig
                           </span>
-                        </span>
-                      </nuxt-link-stub>
-                       
-                      <!---->
+                        </nuxt-link-stub>
+                         
+                        <!---->
+                         
+                        <!---->
+                      </div>
                        
                       <!---->
                     </div>
                      
-                    <!---->
-                  </div>
-                </div>
+                    <div />
+                  </v-popover-stub>
+                </client-only-stub>
               </div>
             </li>
             <li
@@ -558,39 +573,52 @@ exports[`GroupProfileSlug given a puplic group – "yoga-practice" given a close
                 class=""
                 placement="top-start"
               >
-                <div
-                  class="user-teaser"
-                >
-                  <nuxt-link-stub
-                    data-test="avatarUserLink"
-                    to="[object Object]"
+                <client-only-stub>
+                  <v-popover-stub
+                    autohide="true"
+                    class="user-teaser"
+                    container="body"
+                    delay="0"
+                    handleresize="true"
+                    offset="16"
+                    openclass="open"
+                    opengroup="0"
+                    placement="bottom-end"
+                    popoverarrowclass="tooltip-arrow popover-arrow"
+                    popoverbaseclass="tooltip popover"
+                    popoverclass="vue-popover-theme"
+                    popoverinnerclass="tooltip-inner popover-inner"
+                    popoverwrapperclass="wrapper"
+                    popperoptions="[object Object]"
+                    trigger="manual"
                   >
-                    <div
-                      class="profile-avatar --small --no-image"
+                    <nuxt-link-stub
+                      data-test="avatarUserLink"
+                      to="[object Object]"
                     >
-                      <span
-                        class="initials"
-                      >
-                        JR
-                      </span>
-                       
-                      <!---->
-                       
-                      <!---->
-                    </div>
-                  </nuxt-link-stub>
-                   
-                  <div
-                    class="info flex-direction-column"
-                  >
-                    <div
-                      class="flex-direction-column"
-                    >
-                      <nuxt-link-stub
-                        to="[object Object]"
+                      <div
+                        class="profile-avatar --small --no-image"
                       >
                         <span
-                          class="text"
+                          class="initials"
+                        >
+                          JR
+                        </span>
+                         
+                        <!---->
+                         
+                        <!---->
+                      </div>
+                    </nuxt-link-stub>
+                     
+                    <div
+                      class="info flex-direction-column"
+                    >
+                      <div
+                        class="flex-direction-column"
+                      >
+                        <nuxt-link-stub
+                          to="[object Object]"
                         >
                           <span
                             class="slug"
@@ -603,17 +631,19 @@ exports[`GroupProfileSlug given a puplic group – "yoga-practice" given a close
                           >
                             Jenny Rostock
                           </span>
-                        </span>
-                      </nuxt-link-stub>
-                       
-                      <!---->
+                        </nuxt-link-stub>
+                         
+                        <!---->
+                         
+                        <!---->
+                      </div>
                        
                       <!---->
                     </div>
                      
-                    <!---->
-                  </div>
-                </div>
+                    <div />
+                  </v-popover-stub>
+                </client-only-stub>
               </div>
             </li>
             <li
@@ -623,39 +653,52 @@ exports[`GroupProfileSlug given a puplic group – "yoga-practice" given a close
                 class=""
                 placement="top-start"
               >
-                <div
-                  class="user-teaser"
-                >
-                  <nuxt-link-stub
-                    data-test="avatarUserLink"
-                    to="[object Object]"
+                <client-only-stub>
+                  <v-popover-stub
+                    autohide="true"
+                    class="user-teaser"
+                    container="body"
+                    delay="0"
+                    handleresize="true"
+                    offset="16"
+                    openclass="open"
+                    opengroup="0"
+                    placement="bottom-end"
+                    popoverarrowclass="tooltip-arrow popover-arrow"
+                    popoverbaseclass="tooltip popover"
+                    popoverclass="vue-popover-theme"
+                    popoverinnerclass="tooltip-inner popover-inner"
+                    popoverwrapperclass="wrapper"
+                    popperoptions="[object Object]"
+                    trigger="manual"
                   >
-                    <div
-                      class="profile-avatar --small --no-image"
+                    <nuxt-link-stub
+                      data-test="avatarUserLink"
+                      to="[object Object]"
                     >
-                      <span
-                        class="initials"
-                      >
-                        BDB
-                      </span>
-                       
-                      <!---->
-                       
-                      <!---->
-                    </div>
-                  </nuxt-link-stub>
-                   
-                  <div
-                    class="info flex-direction-column"
-                  >
-                    <div
-                      class="flex-direction-column"
-                    >
-                      <nuxt-link-stub
-                        to="[object Object]"
+                      <div
+                        class="profile-avatar --small --no-image"
                       >
                         <span
-                          class="text"
+                          class="initials"
+                        >
+                          BDB
+                        </span>
+                         
+                        <!---->
+                         
+                        <!---->
+                      </div>
+                    </nuxt-link-stub>
+                     
+                    <div
+                      class="info flex-direction-column"
+                    >
+                      <div
+                        class="flex-direction-column"
+                      >
+                        <nuxt-link-stub
+                          to="[object Object]"
                         >
                           <span
                             class="slug"
@@ -668,17 +711,19 @@ exports[`GroupProfileSlug given a puplic group – "yoga-practice" given a close
                           >
                             Bob der Baumeister
                           </span>
-                        </span>
-                      </nuxt-link-stub>
-                       
-                      <!---->
+                        </nuxt-link-stub>
+                         
+                        <!---->
+                         
+                        <!---->
+                      </div>
                        
                       <!---->
                     </div>
                      
-                    <!---->
-                  </div>
-                </div>
+                    <div />
+                  </v-popover-stub>
+                </client-only-stub>
               </div>
             </li>
             <li
@@ -688,39 +733,52 @@ exports[`GroupProfileSlug given a puplic group – "yoga-practice" given a close
                 class=""
                 placement="top-start"
               >
-                <div
-                  class="user-teaser"
-                >
-                  <nuxt-link-stub
-                    data-test="avatarUserLink"
-                    to="[object Object]"
+                <client-only-stub>
+                  <v-popover-stub
+                    autohide="true"
+                    class="user-teaser"
+                    container="body"
+                    delay="0"
+                    handleresize="true"
+                    offset="16"
+                    openclass="open"
+                    opengroup="0"
+                    placement="bottom-end"
+                    popoverarrowclass="tooltip-arrow popover-arrow"
+                    popoverbaseclass="tooltip popover"
+                    popoverclass="vue-popover-theme"
+                    popoverinnerclass="tooltip-inner popover-inner"
+                    popoverwrapperclass="wrapper"
+                    popperoptions="[object Object]"
+                    trigger="manual"
                   >
-                    <div
-                      class="profile-avatar --small --no-image"
+                    <nuxt-link-stub
+                      data-test="avatarUserLink"
+                      to="[object Object]"
                     >
-                      <span
-                        class="initials"
-                      >
-                        H
-                      </span>
-                       
-                      <!---->
-                       
-                      <!---->
-                    </div>
-                  </nuxt-link-stub>
-                   
-                  <div
-                    class="info flex-direction-column"
-                  >
-                    <div
-                      class="flex-direction-column"
-                    >
-                      <nuxt-link-stub
-                        to="[object Object]"
+                      <div
+                        class="profile-avatar --small --no-image"
                       >
                         <span
-                          class="text"
+                          class="initials"
+                        >
+                          H
+                        </span>
+                         
+                        <!---->
+                         
+                        <!---->
+                      </div>
+                    </nuxt-link-stub>
+                     
+                    <div
+                      class="info flex-direction-column"
+                    >
+                      <div
+                        class="flex-direction-column"
+                      >
+                        <nuxt-link-stub
+                          to="[object Object]"
                         >
                           <span
                             class="slug"
@@ -733,17 +791,19 @@ exports[`GroupProfileSlug given a puplic group – "yoga-practice" given a close
                           >
                             Huey
                           </span>
-                        </span>
-                      </nuxt-link-stub>
-                       
-                      <!---->
+                        </nuxt-link-stub>
+                         
+                        <!---->
+                         
+                        <!---->
+                      </div>
                        
                       <!---->
                     </div>
                      
-                    <!---->
-                  </div>
-                </div>
+                    <div />
+                  </v-popover-stub>
+                </client-only-stub>
               </div>
             </li>
           </ul>
@@ -2304,39 +2364,52 @@ exports[`GroupProfileSlug given a puplic group – "yoga-practice" given a close
                 class=""
                 placement="top-start"
               >
-                <div
-                  class="user-teaser"
-                >
-                  <nuxt-link-stub
-                    data-test="avatarUserLink"
-                    to="[object Object]"
+                <client-only-stub>
+                  <v-popover-stub
+                    autohide="true"
+                    class="user-teaser"
+                    container="body"
+                    delay="0"
+                    handleresize="true"
+                    offset="16"
+                    openclass="open"
+                    opengroup="0"
+                    placement="bottom-end"
+                    popoverarrowclass="tooltip-arrow popover-arrow"
+                    popoverbaseclass="tooltip popover"
+                    popoverclass="vue-popover-theme"
+                    popoverinnerclass="tooltip-inner popover-inner"
+                    popoverwrapperclass="wrapper"
+                    popperoptions="[object Object]"
+                    trigger="manual"
                   >
-                    <div
-                      class="profile-avatar --small --no-image"
+                    <nuxt-link-stub
+                      data-test="avatarUserLink"
+                      to="[object Object]"
                     >
-                      <span
-                        class="initials"
-                      >
-                        PL
-                      </span>
-                       
-                      <!---->
-                       
-                      <!---->
-                    </div>
-                  </nuxt-link-stub>
-                   
-                  <div
-                    class="info flex-direction-column"
-                  >
-                    <div
-                      class="flex-direction-column"
-                    >
-                      <nuxt-link-stub
-                        to="[object Object]"
+                      <div
+                        class="profile-avatar --small --no-image"
                       >
                         <span
-                          class="text"
+                          class="initials"
+                        >
+                          PL
+                        </span>
+                         
+                        <!---->
+                         
+                        <!---->
+                      </div>
+                    </nuxt-link-stub>
+                     
+                    <div
+                      class="info flex-direction-column"
+                    >
+                      <div
+                        class="flex-direction-column"
+                      >
+                        <nuxt-link-stub
+                          to="[object Object]"
                         >
                           <span
                             class="slug"
@@ -2349,17 +2422,19 @@ exports[`GroupProfileSlug given a puplic group – "yoga-practice" given a close
                           >
                             Peter Lustig
                           </span>
-                        </span>
-                      </nuxt-link-stub>
-                       
-                      <!---->
+                        </nuxt-link-stub>
+                         
+                        <!---->
+                         
+                        <!---->
+                      </div>
                        
                       <!---->
                     </div>
                      
-                    <!---->
-                  </div>
-                </div>
+                    <div />
+                  </v-popover-stub>
+                </client-only-stub>
               </div>
             </li>
             <li
@@ -2369,39 +2444,52 @@ exports[`GroupProfileSlug given a puplic group – "yoga-practice" given a close
                 class=""
                 placement="top-start"
               >
-                <div
-                  class="user-teaser"
-                >
-                  <nuxt-link-stub
-                    data-test="avatarUserLink"
-                    to="[object Object]"
+                <client-only-stub>
+                  <v-popover-stub
+                    autohide="true"
+                    class="user-teaser"
+                    container="body"
+                    delay="0"
+                    handleresize="true"
+                    offset="16"
+                    openclass="open"
+                    opengroup="0"
+                    placement="bottom-end"
+                    popoverarrowclass="tooltip-arrow popover-arrow"
+                    popoverbaseclass="tooltip popover"
+                    popoverclass="vue-popover-theme"
+                    popoverinnerclass="tooltip-inner popover-inner"
+                    popoverwrapperclass="wrapper"
+                    popperoptions="[object Object]"
+                    trigger="manual"
                   >
-                    <div
-                      class="profile-avatar --small --no-image"
+                    <nuxt-link-stub
+                      data-test="avatarUserLink"
+                      to="[object Object]"
                     >
-                      <span
-                        class="initials"
-                      >
-                        JR
-                      </span>
-                       
-                      <!---->
-                       
-                      <!---->
-                    </div>
-                  </nuxt-link-stub>
-                   
-                  <div
-                    class="info flex-direction-column"
-                  >
-                    <div
-                      class="flex-direction-column"
-                    >
-                      <nuxt-link-stub
-                        to="[object Object]"
+                      <div
+                        class="profile-avatar --small --no-image"
                       >
                         <span
-                          class="text"
+                          class="initials"
+                        >
+                          JR
+                        </span>
+                         
+                        <!---->
+                         
+                        <!---->
+                      </div>
+                    </nuxt-link-stub>
+                     
+                    <div
+                      class="info flex-direction-column"
+                    >
+                      <div
+                        class="flex-direction-column"
+                      >
+                        <nuxt-link-stub
+                          to="[object Object]"
                         >
                           <span
                             class="slug"
@@ -2414,17 +2502,19 @@ exports[`GroupProfileSlug given a puplic group – "yoga-practice" given a close
                           >
                             Jenny Rostock
                           </span>
-                        </span>
-                      </nuxt-link-stub>
-                       
-                      <!---->
+                        </nuxt-link-stub>
+                         
+                        <!---->
+                         
+                        <!---->
+                      </div>
                        
                       <!---->
                     </div>
                      
-                    <!---->
-                  </div>
-                </div>
+                    <div />
+                  </v-popover-stub>
+                </client-only-stub>
               </div>
             </li>
             <li
@@ -2434,39 +2524,52 @@ exports[`GroupProfileSlug given a puplic group – "yoga-practice" given a close
                 class=""
                 placement="top-start"
               >
-                <div
-                  class="user-teaser"
-                >
-                  <nuxt-link-stub
-                    data-test="avatarUserLink"
-                    to="[object Object]"
+                <client-only-stub>
+                  <v-popover-stub
+                    autohide="true"
+                    class="user-teaser"
+                    container="body"
+                    delay="0"
+                    handleresize="true"
+                    offset="16"
+                    openclass="open"
+                    opengroup="0"
+                    placement="bottom-end"
+                    popoverarrowclass="tooltip-arrow popover-arrow"
+                    popoverbaseclass="tooltip popover"
+                    popoverclass="vue-popover-theme"
+                    popoverinnerclass="tooltip-inner popover-inner"
+                    popoverwrapperclass="wrapper"
+                    popperoptions="[object Object]"
+                    trigger="manual"
                   >
-                    <div
-                      class="profile-avatar --small --no-image"
+                    <nuxt-link-stub
+                      data-test="avatarUserLink"
+                      to="[object Object]"
                     >
-                      <span
-                        class="initials"
-                      >
-                        BDB
-                      </span>
-                       
-                      <!---->
-                       
-                      <!---->
-                    </div>
-                  </nuxt-link-stub>
-                   
-                  <div
-                    class="info flex-direction-column"
-                  >
-                    <div
-                      class="flex-direction-column"
-                    >
-                      <nuxt-link-stub
-                        to="[object Object]"
+                      <div
+                        class="profile-avatar --small --no-image"
                       >
                         <span
-                          class="text"
+                          class="initials"
+                        >
+                          BDB
+                        </span>
+                         
+                        <!---->
+                         
+                        <!---->
+                      </div>
+                    </nuxt-link-stub>
+                     
+                    <div
+                      class="info flex-direction-column"
+                    >
+                      <div
+                        class="flex-direction-column"
+                      >
+                        <nuxt-link-stub
+                          to="[object Object]"
                         >
                           <span
                             class="slug"
@@ -2479,17 +2582,19 @@ exports[`GroupProfileSlug given a puplic group – "yoga-practice" given a close
                           >
                             Bob der Baumeister
                           </span>
-                        </span>
-                      </nuxt-link-stub>
-                       
-                      <!---->
+                        </nuxt-link-stub>
+                         
+                        <!---->
+                         
+                        <!---->
+                      </div>
                        
                       <!---->
                     </div>
                      
-                    <!---->
-                  </div>
-                </div>
+                    <div />
+                  </v-popover-stub>
+                </client-only-stub>
               </div>
             </li>
             <li
@@ -2499,39 +2604,52 @@ exports[`GroupProfileSlug given a puplic group – "yoga-practice" given a close
                 class=""
                 placement="top-start"
               >
-                <div
-                  class="user-teaser"
-                >
-                  <nuxt-link-stub
-                    data-test="avatarUserLink"
-                    to="[object Object]"
+                <client-only-stub>
+                  <v-popover-stub
+                    autohide="true"
+                    class="user-teaser"
+                    container="body"
+                    delay="0"
+                    handleresize="true"
+                    offset="16"
+                    openclass="open"
+                    opengroup="0"
+                    placement="bottom-end"
+                    popoverarrowclass="tooltip-arrow popover-arrow"
+                    popoverbaseclass="tooltip popover"
+                    popoverclass="vue-popover-theme"
+                    popoverinnerclass="tooltip-inner popover-inner"
+                    popoverwrapperclass="wrapper"
+                    popperoptions="[object Object]"
+                    trigger="manual"
                   >
-                    <div
-                      class="profile-avatar --small --no-image"
+                    <nuxt-link-stub
+                      data-test="avatarUserLink"
+                      to="[object Object]"
                     >
-                      <span
-                        class="initials"
-                      >
-                        H
-                      </span>
-                       
-                      <!---->
-                       
-                      <!---->
-                    </div>
-                  </nuxt-link-stub>
-                   
-                  <div
-                    class="info flex-direction-column"
-                  >
-                    <div
-                      class="flex-direction-column"
-                    >
-                      <nuxt-link-stub
-                        to="[object Object]"
+                      <div
+                        class="profile-avatar --small --no-image"
                       >
                         <span
-                          class="text"
+                          class="initials"
+                        >
+                          H
+                        </span>
+                         
+                        <!---->
+                         
+                        <!---->
+                      </div>
+                    </nuxt-link-stub>
+                     
+                    <div
+                      class="info flex-direction-column"
+                    >
+                      <div
+                        class="flex-direction-column"
+                      >
+                        <nuxt-link-stub
+                          to="[object Object]"
                         >
                           <span
                             class="slug"
@@ -2544,17 +2662,19 @@ exports[`GroupProfileSlug given a puplic group – "yoga-practice" given a close
                           >
                             Huey
                           </span>
-                        </span>
-                      </nuxt-link-stub>
-                       
-                      <!---->
+                        </nuxt-link-stub>
+                         
+                        <!---->
+                         
+                        <!---->
+                      </div>
                        
                       <!---->
                     </div>
                      
-                    <!---->
-                  </div>
-                </div>
+                    <div />
+                  </v-popover-stub>
+                </client-only-stub>
               </div>
             </li>
           </ul>
@@ -3197,39 +3317,52 @@ exports[`GroupProfileSlug given a puplic group – "yoga-practice" given a curre
                 class=""
                 placement="top-start"
               >
-                <div
-                  class="user-teaser"
-                >
-                  <nuxt-link-stub
-                    data-test="avatarUserLink"
-                    to="[object Object]"
+                <client-only-stub>
+                  <v-popover-stub
+                    autohide="true"
+                    class="user-teaser"
+                    container="body"
+                    delay="0"
+                    handleresize="true"
+                    offset="16"
+                    openclass="open"
+                    opengroup="0"
+                    placement="bottom-end"
+                    popoverarrowclass="tooltip-arrow popover-arrow"
+                    popoverbaseclass="tooltip popover"
+                    popoverclass="vue-popover-theme"
+                    popoverinnerclass="tooltip-inner popover-inner"
+                    popoverwrapperclass="wrapper"
+                    popperoptions="[object Object]"
+                    trigger="manual"
                   >
-                    <div
-                      class="profile-avatar --small --no-image"
+                    <nuxt-link-stub
+                      data-test="avatarUserLink"
+                      to="[object Object]"
                     >
-                      <span
-                        class="initials"
-                      >
-                        PL
-                      </span>
-                       
-                      <!---->
-                       
-                      <!---->
-                    </div>
-                  </nuxt-link-stub>
-                   
-                  <div
-                    class="info flex-direction-column"
-                  >
-                    <div
-                      class="flex-direction-column"
-                    >
-                      <nuxt-link-stub
-                        to="[object Object]"
+                      <div
+                        class="profile-avatar --small --no-image"
                       >
                         <span
-                          class="text"
+                          class="initials"
+                        >
+                          PL
+                        </span>
+                         
+                        <!---->
+                         
+                        <!---->
+                      </div>
+                    </nuxt-link-stub>
+                     
+                    <div
+                      class="info flex-direction-column"
+                    >
+                      <div
+                        class="flex-direction-column"
+                      >
+                        <nuxt-link-stub
+                          to="[object Object]"
                         >
                           <span
                             class="slug"
@@ -3242,17 +3375,19 @@ exports[`GroupProfileSlug given a puplic group – "yoga-practice" given a curre
                           >
                             Peter Lustig
                           </span>
-                        </span>
-                      </nuxt-link-stub>
-                       
-                      <!---->
+                        </nuxt-link-stub>
+                         
+                        <!---->
+                         
+                        <!---->
+                      </div>
                        
                       <!---->
                     </div>
                      
-                    <!---->
-                  </div>
-                </div>
+                    <div />
+                  </v-popover-stub>
+                </client-only-stub>
               </div>
             </li>
             <li
@@ -3262,39 +3397,52 @@ exports[`GroupProfileSlug given a puplic group – "yoga-practice" given a curre
                 class=""
                 placement="top-start"
               >
-                <div
-                  class="user-teaser"
-                >
-                  <nuxt-link-stub
-                    data-test="avatarUserLink"
-                    to="[object Object]"
+                <client-only-stub>
+                  <v-popover-stub
+                    autohide="true"
+                    class="user-teaser"
+                    container="body"
+                    delay="0"
+                    handleresize="true"
+                    offset="16"
+                    openclass="open"
+                    opengroup="0"
+                    placement="bottom-end"
+                    popoverarrowclass="tooltip-arrow popover-arrow"
+                    popoverbaseclass="tooltip popover"
+                    popoverclass="vue-popover-theme"
+                    popoverinnerclass="tooltip-inner popover-inner"
+                    popoverwrapperclass="wrapper"
+                    popperoptions="[object Object]"
+                    trigger="manual"
                   >
-                    <div
-                      class="profile-avatar --small --no-image"
+                    <nuxt-link-stub
+                      data-test="avatarUserLink"
+                      to="[object Object]"
                     >
-                      <span
-                        class="initials"
-                      >
-                        JR
-                      </span>
-                       
-                      <!---->
-                       
-                      <!---->
-                    </div>
-                  </nuxt-link-stub>
-                   
-                  <div
-                    class="info flex-direction-column"
-                  >
-                    <div
-                      class="flex-direction-column"
-                    >
-                      <nuxt-link-stub
-                        to="[object Object]"
+                      <div
+                        class="profile-avatar --small --no-image"
                       >
                         <span
-                          class="text"
+                          class="initials"
+                        >
+                          JR
+                        </span>
+                         
+                        <!---->
+                         
+                        <!---->
+                      </div>
+                    </nuxt-link-stub>
+                     
+                    <div
+                      class="info flex-direction-column"
+                    >
+                      <div
+                        class="flex-direction-column"
+                      >
+                        <nuxt-link-stub
+                          to="[object Object]"
                         >
                           <span
                             class="slug"
@@ -3307,17 +3455,19 @@ exports[`GroupProfileSlug given a puplic group – "yoga-practice" given a curre
                           >
                             Jenny Rostock
                           </span>
-                        </span>
-                      </nuxt-link-stub>
-                       
-                      <!---->
+                        </nuxt-link-stub>
+                         
+                        <!---->
+                         
+                        <!---->
+                      </div>
                        
                       <!---->
                     </div>
                      
-                    <!---->
-                  </div>
-                </div>
+                    <div />
+                  </v-popover-stub>
+                </client-only-stub>
               </div>
             </li>
             <li
@@ -3327,39 +3477,52 @@ exports[`GroupProfileSlug given a puplic group – "yoga-practice" given a curre
                 class=""
                 placement="top-start"
               >
-                <div
-                  class="user-teaser"
-                >
-                  <nuxt-link-stub
-                    data-test="avatarUserLink"
-                    to="[object Object]"
+                <client-only-stub>
+                  <v-popover-stub
+                    autohide="true"
+                    class="user-teaser"
+                    container="body"
+                    delay="0"
+                    handleresize="true"
+                    offset="16"
+                    openclass="open"
+                    opengroup="0"
+                    placement="bottom-end"
+                    popoverarrowclass="tooltip-arrow popover-arrow"
+                    popoverbaseclass="tooltip popover"
+                    popoverclass="vue-popover-theme"
+                    popoverinnerclass="tooltip-inner popover-inner"
+                    popoverwrapperclass="wrapper"
+                    popperoptions="[object Object]"
+                    trigger="manual"
                   >
-                    <div
-                      class="profile-avatar --small --no-image"
+                    <nuxt-link-stub
+                      data-test="avatarUserLink"
+                      to="[object Object]"
                     >
-                      <span
-                        class="initials"
-                      >
-                        BDB
-                      </span>
-                       
-                      <!---->
-                       
-                      <!---->
-                    </div>
-                  </nuxt-link-stub>
-                   
-                  <div
-                    class="info flex-direction-column"
-                  >
-                    <div
-                      class="flex-direction-column"
-                    >
-                      <nuxt-link-stub
-                        to="[object Object]"
+                      <div
+                        class="profile-avatar --small --no-image"
                       >
                         <span
-                          class="text"
+                          class="initials"
+                        >
+                          BDB
+                        </span>
+                         
+                        <!---->
+                         
+                        <!---->
+                      </div>
+                    </nuxt-link-stub>
+                     
+                    <div
+                      class="info flex-direction-column"
+                    >
+                      <div
+                        class="flex-direction-column"
+                      >
+                        <nuxt-link-stub
+                          to="[object Object]"
                         >
                           <span
                             class="slug"
@@ -3372,17 +3535,19 @@ exports[`GroupProfileSlug given a puplic group – "yoga-practice" given a curre
                           >
                             Bob der Baumeister
                           </span>
-                        </span>
-                      </nuxt-link-stub>
-                       
-                      <!---->
+                        </nuxt-link-stub>
+                         
+                        <!---->
+                         
+                        <!---->
+                      </div>
                        
                       <!---->
                     </div>
                      
-                    <!---->
-                  </div>
-                </div>
+                    <div />
+                  </v-popover-stub>
+                </client-only-stub>
               </div>
             </li>
             <li
@@ -3392,39 +3557,52 @@ exports[`GroupProfileSlug given a puplic group – "yoga-practice" given a curre
                 class=""
                 placement="top-start"
               >
-                <div
-                  class="user-teaser"
-                >
-                  <nuxt-link-stub
-                    data-test="avatarUserLink"
-                    to="[object Object]"
+                <client-only-stub>
+                  <v-popover-stub
+                    autohide="true"
+                    class="user-teaser"
+                    container="body"
+                    delay="0"
+                    handleresize="true"
+                    offset="16"
+                    openclass="open"
+                    opengroup="0"
+                    placement="bottom-end"
+                    popoverarrowclass="tooltip-arrow popover-arrow"
+                    popoverbaseclass="tooltip popover"
+                    popoverclass="vue-popover-theme"
+                    popoverinnerclass="tooltip-inner popover-inner"
+                    popoverwrapperclass="wrapper"
+                    popperoptions="[object Object]"
+                    trigger="manual"
                   >
-                    <div
-                      class="profile-avatar --small --no-image"
+                    <nuxt-link-stub
+                      data-test="avatarUserLink"
+                      to="[object Object]"
                     >
-                      <span
-                        class="initials"
-                      >
-                        H
-                      </span>
-                       
-                      <!---->
-                       
-                      <!---->
-                    </div>
-                  </nuxt-link-stub>
-                   
-                  <div
-                    class="info flex-direction-column"
-                  >
-                    <div
-                      class="flex-direction-column"
-                    >
-                      <nuxt-link-stub
-                        to="[object Object]"
+                      <div
+                        class="profile-avatar --small --no-image"
                       >
                         <span
-                          class="text"
+                          class="initials"
+                        >
+                          H
+                        </span>
+                         
+                        <!---->
+                         
+                        <!---->
+                      </div>
+                    </nuxt-link-stub>
+                     
+                    <div
+                      class="info flex-direction-column"
+                    >
+                      <div
+                        class="flex-direction-column"
+                      >
+                        <nuxt-link-stub
+                          to="[object Object]"
                         >
                           <span
                             class="slug"
@@ -3437,17 +3615,19 @@ exports[`GroupProfileSlug given a puplic group – "yoga-practice" given a curre
                           >
                             Huey
                           </span>
-                        </span>
-                      </nuxt-link-stub>
-                       
-                      <!---->
+                        </nuxt-link-stub>
+                         
+                        <!---->
+                         
+                        <!---->
+                      </div>
                        
                       <!---->
                     </div>
                      
-                    <!---->
-                  </div>
-                </div>
+                    <div />
+                  </v-popover-stub>
+                </client-only-stub>
               </div>
             </li>
           </ul>
@@ -3956,39 +4136,52 @@ exports[`GroupProfileSlug given a puplic group – "yoga-practice" given a curre
                 class=""
                 placement="top-start"
               >
-                <div
-                  class="user-teaser"
-                >
-                  <nuxt-link-stub
-                    data-test="avatarUserLink"
-                    to="[object Object]"
+                <client-only-stub>
+                  <v-popover-stub
+                    autohide="true"
+                    class="user-teaser"
+                    container="body"
+                    delay="0"
+                    handleresize="true"
+                    offset="16"
+                    openclass="open"
+                    opengroup="0"
+                    placement="bottom-end"
+                    popoverarrowclass="tooltip-arrow popover-arrow"
+                    popoverbaseclass="tooltip popover"
+                    popoverclass="vue-popover-theme"
+                    popoverinnerclass="tooltip-inner popover-inner"
+                    popoverwrapperclass="wrapper"
+                    popperoptions="[object Object]"
+                    trigger="manual"
                   >
-                    <div
-                      class="profile-avatar --small --no-image"
+                    <nuxt-link-stub
+                      data-test="avatarUserLink"
+                      to="[object Object]"
                     >
-                      <span
-                        class="initials"
-                      >
-                        PL
-                      </span>
-                       
-                      <!---->
-                       
-                      <!---->
-                    </div>
-                  </nuxt-link-stub>
-                   
-                  <div
-                    class="info flex-direction-column"
-                  >
-                    <div
-                      class="flex-direction-column"
-                    >
-                      <nuxt-link-stub
-                        to="[object Object]"
+                      <div
+                        class="profile-avatar --small --no-image"
                       >
                         <span
-                          class="text"
+                          class="initials"
+                        >
+                          PL
+                        </span>
+                         
+                        <!---->
+                         
+                        <!---->
+                      </div>
+                    </nuxt-link-stub>
+                     
+                    <div
+                      class="info flex-direction-column"
+                    >
+                      <div
+                        class="flex-direction-column"
+                      >
+                        <nuxt-link-stub
+                          to="[object Object]"
                         >
                           <span
                             class="slug"
@@ -4001,17 +4194,19 @@ exports[`GroupProfileSlug given a puplic group – "yoga-practice" given a curre
                           >
                             Peter Lustig
                           </span>
-                        </span>
-                      </nuxt-link-stub>
-                       
-                      <!---->
+                        </nuxt-link-stub>
+                         
+                        <!---->
+                         
+                        <!---->
+                      </div>
                        
                       <!---->
                     </div>
                      
-                    <!---->
-                  </div>
-                </div>
+                    <div />
+                  </v-popover-stub>
+                </client-only-stub>
               </div>
             </li>
             <li
@@ -4021,39 +4216,52 @@ exports[`GroupProfileSlug given a puplic group – "yoga-practice" given a curre
                 class=""
                 placement="top-start"
               >
-                <div
-                  class="user-teaser"
-                >
-                  <nuxt-link-stub
-                    data-test="avatarUserLink"
-                    to="[object Object]"
+                <client-only-stub>
+                  <v-popover-stub
+                    autohide="true"
+                    class="user-teaser"
+                    container="body"
+                    delay="0"
+                    handleresize="true"
+                    offset="16"
+                    openclass="open"
+                    opengroup="0"
+                    placement="bottom-end"
+                    popoverarrowclass="tooltip-arrow popover-arrow"
+                    popoverbaseclass="tooltip popover"
+                    popoverclass="vue-popover-theme"
+                    popoverinnerclass="tooltip-inner popover-inner"
+                    popoverwrapperclass="wrapper"
+                    popperoptions="[object Object]"
+                    trigger="manual"
                   >
-                    <div
-                      class="profile-avatar --small --no-image"
+                    <nuxt-link-stub
+                      data-test="avatarUserLink"
+                      to="[object Object]"
                     >
-                      <span
-                        class="initials"
-                      >
-                        JR
-                      </span>
-                       
-                      <!---->
-                       
-                      <!---->
-                    </div>
-                  </nuxt-link-stub>
-                   
-                  <div
-                    class="info flex-direction-column"
-                  >
-                    <div
-                      class="flex-direction-column"
-                    >
-                      <nuxt-link-stub
-                        to="[object Object]"
+                      <div
+                        class="profile-avatar --small --no-image"
                       >
                         <span
-                          class="text"
+                          class="initials"
+                        >
+                          JR
+                        </span>
+                         
+                        <!---->
+                         
+                        <!---->
+                      </div>
+                    </nuxt-link-stub>
+                     
+                    <div
+                      class="info flex-direction-column"
+                    >
+                      <div
+                        class="flex-direction-column"
+                      >
+                        <nuxt-link-stub
+                          to="[object Object]"
                         >
                           <span
                             class="slug"
@@ -4066,17 +4274,19 @@ exports[`GroupProfileSlug given a puplic group – "yoga-practice" given a curre
                           >
                             Jenny Rostock
                           </span>
-                        </span>
-                      </nuxt-link-stub>
-                       
-                      <!---->
+                        </nuxt-link-stub>
+                         
+                        <!---->
+                         
+                        <!---->
+                      </div>
                        
                       <!---->
                     </div>
                      
-                    <!---->
-                  </div>
-                </div>
+                    <div />
+                  </v-popover-stub>
+                </client-only-stub>
               </div>
             </li>
             <li
@@ -4086,39 +4296,52 @@ exports[`GroupProfileSlug given a puplic group – "yoga-practice" given a curre
                 class=""
                 placement="top-start"
               >
-                <div
-                  class="user-teaser"
-                >
-                  <nuxt-link-stub
-                    data-test="avatarUserLink"
-                    to="[object Object]"
+                <client-only-stub>
+                  <v-popover-stub
+                    autohide="true"
+                    class="user-teaser"
+                    container="body"
+                    delay="0"
+                    handleresize="true"
+                    offset="16"
+                    openclass="open"
+                    opengroup="0"
+                    placement="bottom-end"
+                    popoverarrowclass="tooltip-arrow popover-arrow"
+                    popoverbaseclass="tooltip popover"
+                    popoverclass="vue-popover-theme"
+                    popoverinnerclass="tooltip-inner popover-inner"
+                    popoverwrapperclass="wrapper"
+                    popperoptions="[object Object]"
+                    trigger="manual"
                   >
-                    <div
-                      class="profile-avatar --small --no-image"
+                    <nuxt-link-stub
+                      data-test="avatarUserLink"
+                      to="[object Object]"
                     >
-                      <span
-                        class="initials"
-                      >
-                        BDB
-                      </span>
-                       
-                      <!---->
-                       
-                      <!---->
-                    </div>
-                  </nuxt-link-stub>
-                   
-                  <div
-                    class="info flex-direction-column"
-                  >
-                    <div
-                      class="flex-direction-column"
-                    >
-                      <nuxt-link-stub
-                        to="[object Object]"
+                      <div
+                        class="profile-avatar --small --no-image"
                       >
                         <span
-                          class="text"
+                          class="initials"
+                        >
+                          BDB
+                        </span>
+                         
+                        <!---->
+                         
+                        <!---->
+                      </div>
+                    </nuxt-link-stub>
+                     
+                    <div
+                      class="info flex-direction-column"
+                    >
+                      <div
+                        class="flex-direction-column"
+                      >
+                        <nuxt-link-stub
+                          to="[object Object]"
                         >
                           <span
                             class="slug"
@@ -4131,17 +4354,19 @@ exports[`GroupProfileSlug given a puplic group – "yoga-practice" given a curre
                           >
                             Bob der Baumeister
                           </span>
-                        </span>
-                      </nuxt-link-stub>
-                       
-                      <!---->
+                        </nuxt-link-stub>
+                         
+                        <!---->
+                         
+                        <!---->
+                      </div>
                        
                       <!---->
                     </div>
                      
-                    <!---->
-                  </div>
-                </div>
+                    <div />
+                  </v-popover-stub>
+                </client-only-stub>
               </div>
             </li>
             <li
@@ -4151,39 +4376,52 @@ exports[`GroupProfileSlug given a puplic group – "yoga-practice" given a curre
                 class=""
                 placement="top-start"
               >
-                <div
-                  class="user-teaser"
-                >
-                  <nuxt-link-stub
-                    data-test="avatarUserLink"
-                    to="[object Object]"
+                <client-only-stub>
+                  <v-popover-stub
+                    autohide="true"
+                    class="user-teaser"
+                    container="body"
+                    delay="0"
+                    handleresize="true"
+                    offset="16"
+                    openclass="open"
+                    opengroup="0"
+                    placement="bottom-end"
+                    popoverarrowclass="tooltip-arrow popover-arrow"
+                    popoverbaseclass="tooltip popover"
+                    popoverclass="vue-popover-theme"
+                    popoverinnerclass="tooltip-inner popover-inner"
+                    popoverwrapperclass="wrapper"
+                    popperoptions="[object Object]"
+                    trigger="manual"
                   >
-                    <div
-                      class="profile-avatar --small --no-image"
+                    <nuxt-link-stub
+                      data-test="avatarUserLink"
+                      to="[object Object]"
                     >
-                      <span
-                        class="initials"
-                      >
-                        H
-                      </span>
-                       
-                      <!---->
-                       
-                      <!---->
-                    </div>
-                  </nuxt-link-stub>
-                   
-                  <div
-                    class="info flex-direction-column"
-                  >
-                    <div
-                      class="flex-direction-column"
-                    >
-                      <nuxt-link-stub
-                        to="[object Object]"
+                      <div
+                        class="profile-avatar --small --no-image"
                       >
                         <span
-                          class="text"
+                          class="initials"
+                        >
+                          H
+                        </span>
+                         
+                        <!---->
+                         
+                        <!---->
+                      </div>
+                    </nuxt-link-stub>
+                     
+                    <div
+                      class="info flex-direction-column"
+                    >
+                      <div
+                        class="flex-direction-column"
+                      >
+                        <nuxt-link-stub
+                          to="[object Object]"
                         >
                           <span
                             class="slug"
@@ -4196,17 +4434,19 @@ exports[`GroupProfileSlug given a puplic group – "yoga-practice" given a curre
                           >
                             Huey
                           </span>
-                        </span>
-                      </nuxt-link-stub>
-                       
-                      <!---->
+                        </nuxt-link-stub>
+                         
+                        <!---->
+                         
+                        <!---->
+                      </div>
                        
                       <!---->
                     </div>
                      
-                    <!---->
-                  </div>
-                </div>
+                    <div />
+                  </v-popover-stub>
+                </client-only-stub>
               </div>
             </li>
           </ul>
@@ -4713,39 +4953,52 @@ exports[`GroupProfileSlug given a puplic group – "yoga-practice" given a curre
                 class=""
                 placement="top-start"
               >
-                <div
-                  class="user-teaser"
-                >
-                  <nuxt-link-stub
-                    data-test="avatarUserLink"
-                    to="[object Object]"
+                <client-only-stub>
+                  <v-popover-stub
+                    autohide="true"
+                    class="user-teaser"
+                    container="body"
+                    delay="0"
+                    handleresize="true"
+                    offset="16"
+                    openclass="open"
+                    opengroup="0"
+                    placement="bottom-end"
+                    popoverarrowclass="tooltip-arrow popover-arrow"
+                    popoverbaseclass="tooltip popover"
+                    popoverclass="vue-popover-theme"
+                    popoverinnerclass="tooltip-inner popover-inner"
+                    popoverwrapperclass="wrapper"
+                    popperoptions="[object Object]"
+                    trigger="manual"
                   >
-                    <div
-                      class="profile-avatar --small --no-image"
+                    <nuxt-link-stub
+                      data-test="avatarUserLink"
+                      to="[object Object]"
                     >
-                      <span
-                        class="initials"
-                      >
-                        PL
-                      </span>
-                       
-                      <!---->
-                       
-                      <!---->
-                    </div>
-                  </nuxt-link-stub>
-                   
-                  <div
-                    class="info flex-direction-column"
-                  >
-                    <div
-                      class="flex-direction-column"
-                    >
-                      <nuxt-link-stub
-                        to="[object Object]"
+                      <div
+                        class="profile-avatar --small --no-image"
                       >
                         <span
-                          class="text"
+                          class="initials"
+                        >
+                          PL
+                        </span>
+                         
+                        <!---->
+                         
+                        <!---->
+                      </div>
+                    </nuxt-link-stub>
+                     
+                    <div
+                      class="info flex-direction-column"
+                    >
+                      <div
+                        class="flex-direction-column"
+                      >
+                        <nuxt-link-stub
+                          to="[object Object]"
                         >
                           <span
                             class="slug"
@@ -4758,17 +5011,19 @@ exports[`GroupProfileSlug given a puplic group – "yoga-practice" given a curre
                           >
                             Peter Lustig
                           </span>
-                        </span>
-                      </nuxt-link-stub>
-                       
-                      <!---->
+                        </nuxt-link-stub>
+                         
+                        <!---->
+                         
+                        <!---->
+                      </div>
                        
                       <!---->
                     </div>
                      
-                    <!---->
-                  </div>
-                </div>
+                    <div />
+                  </v-popover-stub>
+                </client-only-stub>
               </div>
             </li>
             <li
@@ -4778,39 +5033,52 @@ exports[`GroupProfileSlug given a puplic group – "yoga-practice" given a curre
                 class=""
                 placement="top-start"
               >
-                <div
-                  class="user-teaser"
-                >
-                  <nuxt-link-stub
-                    data-test="avatarUserLink"
-                    to="[object Object]"
+                <client-only-stub>
+                  <v-popover-stub
+                    autohide="true"
+                    class="user-teaser"
+                    container="body"
+                    delay="0"
+                    handleresize="true"
+                    offset="16"
+                    openclass="open"
+                    opengroup="0"
+                    placement="bottom-end"
+                    popoverarrowclass="tooltip-arrow popover-arrow"
+                    popoverbaseclass="tooltip popover"
+                    popoverclass="vue-popover-theme"
+                    popoverinnerclass="tooltip-inner popover-inner"
+                    popoverwrapperclass="wrapper"
+                    popperoptions="[object Object]"
+                    trigger="manual"
                   >
-                    <div
-                      class="profile-avatar --small --no-image"
+                    <nuxt-link-stub
+                      data-test="avatarUserLink"
+                      to="[object Object]"
                     >
-                      <span
-                        class="initials"
-                      >
-                        JR
-                      </span>
-                       
-                      <!---->
-                       
-                      <!---->
-                    </div>
-                  </nuxt-link-stub>
-                   
-                  <div
-                    class="info flex-direction-column"
-                  >
-                    <div
-                      class="flex-direction-column"
-                    >
-                      <nuxt-link-stub
-                        to="[object Object]"
+                      <div
+                        class="profile-avatar --small --no-image"
                       >
                         <span
-                          class="text"
+                          class="initials"
+                        >
+                          JR
+                        </span>
+                         
+                        <!---->
+                         
+                        <!---->
+                      </div>
+                    </nuxt-link-stub>
+                     
+                    <div
+                      class="info flex-direction-column"
+                    >
+                      <div
+                        class="flex-direction-column"
+                      >
+                        <nuxt-link-stub
+                          to="[object Object]"
                         >
                           <span
                             class="slug"
@@ -4823,17 +5091,19 @@ exports[`GroupProfileSlug given a puplic group – "yoga-practice" given a curre
                           >
                             Jenny Rostock
                           </span>
-                        </span>
-                      </nuxt-link-stub>
-                       
-                      <!---->
+                        </nuxt-link-stub>
+                         
+                        <!---->
+                         
+                        <!---->
+                      </div>
                        
                       <!---->
                     </div>
                      
-                    <!---->
-                  </div>
-                </div>
+                    <div />
+                  </v-popover-stub>
+                </client-only-stub>
               </div>
             </li>
             <li
@@ -4843,39 +5113,52 @@ exports[`GroupProfileSlug given a puplic group – "yoga-practice" given a curre
                 class=""
                 placement="top-start"
               >
-                <div
-                  class="user-teaser"
-                >
-                  <nuxt-link-stub
-                    data-test="avatarUserLink"
-                    to="[object Object]"
+                <client-only-stub>
+                  <v-popover-stub
+                    autohide="true"
+                    class="user-teaser"
+                    container="body"
+                    delay="0"
+                    handleresize="true"
+                    offset="16"
+                    openclass="open"
+                    opengroup="0"
+                    placement="bottom-end"
+                    popoverarrowclass="tooltip-arrow popover-arrow"
+                    popoverbaseclass="tooltip popover"
+                    popoverclass="vue-popover-theme"
+                    popoverinnerclass="tooltip-inner popover-inner"
+                    popoverwrapperclass="wrapper"
+                    popperoptions="[object Object]"
+                    trigger="manual"
                   >
-                    <div
-                      class="profile-avatar --small --no-image"
+                    <nuxt-link-stub
+                      data-test="avatarUserLink"
+                      to="[object Object]"
                     >
-                      <span
-                        class="initials"
-                      >
-                        BDB
-                      </span>
-                       
-                      <!---->
-                       
-                      <!---->
-                    </div>
-                  </nuxt-link-stub>
-                   
-                  <div
-                    class="info flex-direction-column"
-                  >
-                    <div
-                      class="flex-direction-column"
-                    >
-                      <nuxt-link-stub
-                        to="[object Object]"
+                      <div
+                        class="profile-avatar --small --no-image"
                       >
                         <span
-                          class="text"
+                          class="initials"
+                        >
+                          BDB
+                        </span>
+                         
+                        <!---->
+                         
+                        <!---->
+                      </div>
+                    </nuxt-link-stub>
+                     
+                    <div
+                      class="info flex-direction-column"
+                    >
+                      <div
+                        class="flex-direction-column"
+                      >
+                        <nuxt-link-stub
+                          to="[object Object]"
                         >
                           <span
                             class="slug"
@@ -4888,17 +5171,19 @@ exports[`GroupProfileSlug given a puplic group – "yoga-practice" given a curre
                           >
                             Bob der Baumeister
                           </span>
-                        </span>
-                      </nuxt-link-stub>
-                       
-                      <!---->
+                        </nuxt-link-stub>
+                         
+                        <!---->
+                         
+                        <!---->
+                      </div>
                        
                       <!---->
                     </div>
                      
-                    <!---->
-                  </div>
-                </div>
+                    <div />
+                  </v-popover-stub>
+                </client-only-stub>
               </div>
             </li>
             <li
@@ -4908,39 +5193,52 @@ exports[`GroupProfileSlug given a puplic group – "yoga-practice" given a curre
                 class=""
                 placement="top-start"
               >
-                <div
-                  class="user-teaser"
-                >
-                  <nuxt-link-stub
-                    data-test="avatarUserLink"
-                    to="[object Object]"
+                <client-only-stub>
+                  <v-popover-stub
+                    autohide="true"
+                    class="user-teaser"
+                    container="body"
+                    delay="0"
+                    handleresize="true"
+                    offset="16"
+                    openclass="open"
+                    opengroup="0"
+                    placement="bottom-end"
+                    popoverarrowclass="tooltip-arrow popover-arrow"
+                    popoverbaseclass="tooltip popover"
+                    popoverclass="vue-popover-theme"
+                    popoverinnerclass="tooltip-inner popover-inner"
+                    popoverwrapperclass="wrapper"
+                    popperoptions="[object Object]"
+                    trigger="manual"
                   >
-                    <div
-                      class="profile-avatar --small --no-image"
+                    <nuxt-link-stub
+                      data-test="avatarUserLink"
+                      to="[object Object]"
                     >
-                      <span
-                        class="initials"
-                      >
-                        H
-                      </span>
-                       
-                      <!---->
-                       
-                      <!---->
-                    </div>
-                  </nuxt-link-stub>
-                   
-                  <div
-                    class="info flex-direction-column"
-                  >
-                    <div
-                      class="flex-direction-column"
-                    >
-                      <nuxt-link-stub
-                        to="[object Object]"
+                      <div
+                        class="profile-avatar --small --no-image"
                       >
                         <span
-                          class="text"
+                          class="initials"
+                        >
+                          H
+                        </span>
+                         
+                        <!---->
+                         
+                        <!---->
+                      </div>
+                    </nuxt-link-stub>
+                     
+                    <div
+                      class="info flex-direction-column"
+                    >
+                      <div
+                        class="flex-direction-column"
+                      >
+                        <nuxt-link-stub
+                          to="[object Object]"
                         >
                           <span
                             class="slug"
@@ -4953,17 +5251,19 @@ exports[`GroupProfileSlug given a puplic group – "yoga-practice" given a curre
                           >
                             Huey
                           </span>
-                        </span>
-                      </nuxt-link-stub>
-                       
-                      <!---->
+                        </nuxt-link-stub>
+                         
+                        <!---->
+                         
+                        <!---->
+                      </div>
                        
                       <!---->
                     </div>
                      
-                    <!---->
-                  </div>
-                </div>
+                    <div />
+                  </v-popover-stub>
+                </client-only-stub>
               </div>
             </li>
           </ul>
@@ -5539,39 +5839,52 @@ exports[`GroupProfileSlug given a puplic group – "yoga-practice" given a curre
                 class=""
                 placement="top-start"
               >
-                <div
-                  class="user-teaser"
-                >
-                  <nuxt-link-stub
-                    data-test="avatarUserLink"
-                    to="[object Object]"
+                <client-only-stub>
+                  <v-popover-stub
+                    autohide="true"
+                    class="user-teaser"
+                    container="body"
+                    delay="0"
+                    handleresize="true"
+                    offset="16"
+                    openclass="open"
+                    opengroup="0"
+                    placement="bottom-end"
+                    popoverarrowclass="tooltip-arrow popover-arrow"
+                    popoverbaseclass="tooltip popover"
+                    popoverclass="vue-popover-theme"
+                    popoverinnerclass="tooltip-inner popover-inner"
+                    popoverwrapperclass="wrapper"
+                    popperoptions="[object Object]"
+                    trigger="manual"
                   >
-                    <div
-                      class="profile-avatar --small --no-image"
+                    <nuxt-link-stub
+                      data-test="avatarUserLink"
+                      to="[object Object]"
                     >
-                      <span
-                        class="initials"
-                      >
-                        PL
-                      </span>
-                       
-                      <!---->
-                       
-                      <!---->
-                    </div>
-                  </nuxt-link-stub>
-                   
-                  <div
-                    class="info flex-direction-column"
-                  >
-                    <div
-                      class="flex-direction-column"
-                    >
-                      <nuxt-link-stub
-                        to="[object Object]"
+                      <div
+                        class="profile-avatar --small --no-image"
                       >
                         <span
-                          class="text"
+                          class="initials"
+                        >
+                          PL
+                        </span>
+                         
+                        <!---->
+                         
+                        <!---->
+                      </div>
+                    </nuxt-link-stub>
+                     
+                    <div
+                      class="info flex-direction-column"
+                    >
+                      <div
+                        class="flex-direction-column"
+                      >
+                        <nuxt-link-stub
+                          to="[object Object]"
                         >
                           <span
                             class="slug"
@@ -5584,17 +5897,19 @@ exports[`GroupProfileSlug given a puplic group – "yoga-practice" given a curre
                           >
                             Peter Lustig
                           </span>
-                        </span>
-                      </nuxt-link-stub>
-                       
-                      <!---->
+                        </nuxt-link-stub>
+                         
+                        <!---->
+                         
+                        <!---->
+                      </div>
                        
                       <!---->
                     </div>
                      
-                    <!---->
-                  </div>
-                </div>
+                    <div />
+                  </v-popover-stub>
+                </client-only-stub>
               </div>
             </li>
             <li
@@ -5604,39 +5919,52 @@ exports[`GroupProfileSlug given a puplic group – "yoga-practice" given a curre
                 class=""
                 placement="top-start"
               >
-                <div
-                  class="user-teaser"
-                >
-                  <nuxt-link-stub
-                    data-test="avatarUserLink"
-                    to="[object Object]"
+                <client-only-stub>
+                  <v-popover-stub
+                    autohide="true"
+                    class="user-teaser"
+                    container="body"
+                    delay="0"
+                    handleresize="true"
+                    offset="16"
+                    openclass="open"
+                    opengroup="0"
+                    placement="bottom-end"
+                    popoverarrowclass="tooltip-arrow popover-arrow"
+                    popoverbaseclass="tooltip popover"
+                    popoverclass="vue-popover-theme"
+                    popoverinnerclass="tooltip-inner popover-inner"
+                    popoverwrapperclass="wrapper"
+                    popperoptions="[object Object]"
+                    trigger="manual"
                   >
-                    <div
-                      class="profile-avatar --small --no-image"
+                    <nuxt-link-stub
+                      data-test="avatarUserLink"
+                      to="[object Object]"
                     >
-                      <span
-                        class="initials"
-                      >
-                        JR
-                      </span>
-                       
-                      <!---->
-                       
-                      <!---->
-                    </div>
-                  </nuxt-link-stub>
-                   
-                  <div
-                    class="info flex-direction-column"
-                  >
-                    <div
-                      class="flex-direction-column"
-                    >
-                      <nuxt-link-stub
-                        to="[object Object]"
+                      <div
+                        class="profile-avatar --small --no-image"
                       >
                         <span
-                          class="text"
+                          class="initials"
+                        >
+                          JR
+                        </span>
+                         
+                        <!---->
+                         
+                        <!---->
+                      </div>
+                    </nuxt-link-stub>
+                     
+                    <div
+                      class="info flex-direction-column"
+                    >
+                      <div
+                        class="flex-direction-column"
+                      >
+                        <nuxt-link-stub
+                          to="[object Object]"
                         >
                           <span
                             class="slug"
@@ -5649,17 +5977,19 @@ exports[`GroupProfileSlug given a puplic group – "yoga-practice" given a curre
                           >
                             Jenny Rostock
                           </span>
-                        </span>
-                      </nuxt-link-stub>
-                       
-                      <!---->
+                        </nuxt-link-stub>
+                         
+                        <!---->
+                         
+                        <!---->
+                      </div>
                        
                       <!---->
                     </div>
                      
-                    <!---->
-                  </div>
-                </div>
+                    <div />
+                  </v-popover-stub>
+                </client-only-stub>
               </div>
             </li>
             <li
@@ -5669,39 +5999,52 @@ exports[`GroupProfileSlug given a puplic group – "yoga-practice" given a curre
                 class=""
                 placement="top-start"
               >
-                <div
-                  class="user-teaser"
-                >
-                  <nuxt-link-stub
-                    data-test="avatarUserLink"
-                    to="[object Object]"
+                <client-only-stub>
+                  <v-popover-stub
+                    autohide="true"
+                    class="user-teaser"
+                    container="body"
+                    delay="0"
+                    handleresize="true"
+                    offset="16"
+                    openclass="open"
+                    opengroup="0"
+                    placement="bottom-end"
+                    popoverarrowclass="tooltip-arrow popover-arrow"
+                    popoverbaseclass="tooltip popover"
+                    popoverclass="vue-popover-theme"
+                    popoverinnerclass="tooltip-inner popover-inner"
+                    popoverwrapperclass="wrapper"
+                    popperoptions="[object Object]"
+                    trigger="manual"
                   >
-                    <div
-                      class="profile-avatar --small --no-image"
+                    <nuxt-link-stub
+                      data-test="avatarUserLink"
+                      to="[object Object]"
                     >
-                      <span
-                        class="initials"
-                      >
-                        BDB
-                      </span>
-                       
-                      <!---->
-                       
-                      <!---->
-                    </div>
-                  </nuxt-link-stub>
-                   
-                  <div
-                    class="info flex-direction-column"
-                  >
-                    <div
-                      class="flex-direction-column"
-                    >
-                      <nuxt-link-stub
-                        to="[object Object]"
+                      <div
+                        class="profile-avatar --small --no-image"
                       >
                         <span
-                          class="text"
+                          class="initials"
+                        >
+                          BDB
+                        </span>
+                         
+                        <!---->
+                         
+                        <!---->
+                      </div>
+                    </nuxt-link-stub>
+                     
+                    <div
+                      class="info flex-direction-column"
+                    >
+                      <div
+                        class="flex-direction-column"
+                      >
+                        <nuxt-link-stub
+                          to="[object Object]"
                         >
                           <span
                             class="slug"
@@ -5714,17 +6057,19 @@ exports[`GroupProfileSlug given a puplic group – "yoga-practice" given a curre
                           >
                             Bob der Baumeister
                           </span>
-                        </span>
-                      </nuxt-link-stub>
-                       
-                      <!---->
+                        </nuxt-link-stub>
+                         
+                        <!---->
+                         
+                        <!---->
+                      </div>
                        
                       <!---->
                     </div>
                      
-                    <!---->
-                  </div>
-                </div>
+                    <div />
+                  </v-popover-stub>
+                </client-only-stub>
               </div>
             </li>
             <li
@@ -5734,39 +6079,52 @@ exports[`GroupProfileSlug given a puplic group – "yoga-practice" given a curre
                 class=""
                 placement="top-start"
               >
-                <div
-                  class="user-teaser"
-                >
-                  <nuxt-link-stub
-                    data-test="avatarUserLink"
-                    to="[object Object]"
+                <client-only-stub>
+                  <v-popover-stub
+                    autohide="true"
+                    class="user-teaser"
+                    container="body"
+                    delay="0"
+                    handleresize="true"
+                    offset="16"
+                    openclass="open"
+                    opengroup="0"
+                    placement="bottom-end"
+                    popoverarrowclass="tooltip-arrow popover-arrow"
+                    popoverbaseclass="tooltip popover"
+                    popoverclass="vue-popover-theme"
+                    popoverinnerclass="tooltip-inner popover-inner"
+                    popoverwrapperclass="wrapper"
+                    popperoptions="[object Object]"
+                    trigger="manual"
                   >
-                    <div
-                      class="profile-avatar --small --no-image"
+                    <nuxt-link-stub
+                      data-test="avatarUserLink"
+                      to="[object Object]"
                     >
-                      <span
-                        class="initials"
-                      >
-                        H
-                      </span>
-                       
-                      <!---->
-                       
-                      <!---->
-                    </div>
-                  </nuxt-link-stub>
-                   
-                  <div
-                    class="info flex-direction-column"
-                  >
-                    <div
-                      class="flex-direction-column"
-                    >
-                      <nuxt-link-stub
-                        to="[object Object]"
+                      <div
+                        class="profile-avatar --small --no-image"
                       >
                         <span
-                          class="text"
+                          class="initials"
+                        >
+                          H
+                        </span>
+                         
+                        <!---->
+                         
+                        <!---->
+                      </div>
+                    </nuxt-link-stub>
+                     
+                    <div
+                      class="info flex-direction-column"
+                    >
+                      <div
+                        class="flex-direction-column"
+                      >
+                        <nuxt-link-stub
+                          to="[object Object]"
                         >
                           <span
                             class="slug"
@@ -5779,17 +6137,19 @@ exports[`GroupProfileSlug given a puplic group – "yoga-practice" given a curre
                           >
                             Huey
                           </span>
-                        </span>
-                      </nuxt-link-stub>
-                       
-                      <!---->
+                        </nuxt-link-stub>
+                         
+                        <!---->
+                         
+                        <!---->
+                      </div>
                        
                       <!---->
                     </div>
                      
-                    <!---->
-                  </div>
-                </div>
+                    <div />
+                  </v-popover-stub>
+                </client-only-stub>
               </div>
             </li>
           </ul>
@@ -6479,39 +6839,52 @@ exports[`GroupProfileSlug given a puplic group – "yoga-practice" given a hidde
                 class=""
                 placement="top-start"
               >
-                <div
-                  class="user-teaser"
-                >
-                  <nuxt-link-stub
-                    data-test="avatarUserLink"
-                    to="[object Object]"
+                <client-only-stub>
+                  <v-popover-stub
+                    autohide="true"
+                    class="user-teaser"
+                    container="body"
+                    delay="0"
+                    handleresize="true"
+                    offset="16"
+                    openclass="open"
+                    opengroup="0"
+                    placement="bottom-end"
+                    popoverarrowclass="tooltip-arrow popover-arrow"
+                    popoverbaseclass="tooltip popover"
+                    popoverclass="vue-popover-theme"
+                    popoverinnerclass="tooltip-inner popover-inner"
+                    popoverwrapperclass="wrapper"
+                    popperoptions="[object Object]"
+                    trigger="manual"
                   >
-                    <div
-                      class="profile-avatar --small --no-image"
+                    <nuxt-link-stub
+                      data-test="avatarUserLink"
+                      to="[object Object]"
                     >
-                      <span
-                        class="initials"
-                      >
-                        PL
-                      </span>
-                       
-                      <!---->
-                       
-                      <!---->
-                    </div>
-                  </nuxt-link-stub>
-                   
-                  <div
-                    class="info flex-direction-column"
-                  >
-                    <div
-                      class="flex-direction-column"
-                    >
-                      <nuxt-link-stub
-                        to="[object Object]"
+                      <div
+                        class="profile-avatar --small --no-image"
                       >
                         <span
-                          class="text"
+                          class="initials"
+                        >
+                          PL
+                        </span>
+                         
+                        <!---->
+                         
+                        <!---->
+                      </div>
+                    </nuxt-link-stub>
+                     
+                    <div
+                      class="info flex-direction-column"
+                    >
+                      <div
+                        class="flex-direction-column"
+                      >
+                        <nuxt-link-stub
+                          to="[object Object]"
                         >
                           <span
                             class="slug"
@@ -6524,17 +6897,19 @@ exports[`GroupProfileSlug given a puplic group – "yoga-practice" given a hidde
                           >
                             Peter Lustig
                           </span>
-                        </span>
-                      </nuxt-link-stub>
-                       
-                      <!---->
+                        </nuxt-link-stub>
+                         
+                        <!---->
+                         
+                        <!---->
+                      </div>
                        
                       <!---->
                     </div>
                      
-                    <!---->
-                  </div>
-                </div>
+                    <div />
+                  </v-popover-stub>
+                </client-only-stub>
               </div>
             </li>
             <li
@@ -6544,39 +6919,52 @@ exports[`GroupProfileSlug given a puplic group – "yoga-practice" given a hidde
                 class=""
                 placement="top-start"
               >
-                <div
-                  class="user-teaser"
-                >
-                  <nuxt-link-stub
-                    data-test="avatarUserLink"
-                    to="[object Object]"
+                <client-only-stub>
+                  <v-popover-stub
+                    autohide="true"
+                    class="user-teaser"
+                    container="body"
+                    delay="0"
+                    handleresize="true"
+                    offset="16"
+                    openclass="open"
+                    opengroup="0"
+                    placement="bottom-end"
+                    popoverarrowclass="tooltip-arrow popover-arrow"
+                    popoverbaseclass="tooltip popover"
+                    popoverclass="vue-popover-theme"
+                    popoverinnerclass="tooltip-inner popover-inner"
+                    popoverwrapperclass="wrapper"
+                    popperoptions="[object Object]"
+                    trigger="manual"
                   >
-                    <div
-                      class="profile-avatar --small --no-image"
+                    <nuxt-link-stub
+                      data-test="avatarUserLink"
+                      to="[object Object]"
                     >
-                      <span
-                        class="initials"
-                      >
-                        JR
-                      </span>
-                       
-                      <!---->
-                       
-                      <!---->
-                    </div>
-                  </nuxt-link-stub>
-                   
-                  <div
-                    class="info flex-direction-column"
-                  >
-                    <div
-                      class="flex-direction-column"
-                    >
-                      <nuxt-link-stub
-                        to="[object Object]"
+                      <div
+                        class="profile-avatar --small --no-image"
                       >
                         <span
-                          class="text"
+                          class="initials"
+                        >
+                          JR
+                        </span>
+                         
+                        <!---->
+                         
+                        <!---->
+                      </div>
+                    </nuxt-link-stub>
+                     
+                    <div
+                      class="info flex-direction-column"
+                    >
+                      <div
+                        class="flex-direction-column"
+                      >
+                        <nuxt-link-stub
+                          to="[object Object]"
                         >
                           <span
                             class="slug"
@@ -6589,17 +6977,19 @@ exports[`GroupProfileSlug given a puplic group – "yoga-practice" given a hidde
                           >
                             Jenny Rostock
                           </span>
-                        </span>
-                      </nuxt-link-stub>
-                       
-                      <!---->
+                        </nuxt-link-stub>
+                         
+                        <!---->
+                         
+                        <!---->
+                      </div>
                        
                       <!---->
                     </div>
                      
-                    <!---->
-                  </div>
-                </div>
+                    <div />
+                  </v-popover-stub>
+                </client-only-stub>
               </div>
             </li>
             <li
@@ -6609,39 +6999,52 @@ exports[`GroupProfileSlug given a puplic group – "yoga-practice" given a hidde
                 class=""
                 placement="top-start"
               >
-                <div
-                  class="user-teaser"
-                >
-                  <nuxt-link-stub
-                    data-test="avatarUserLink"
-                    to="[object Object]"
+                <client-only-stub>
+                  <v-popover-stub
+                    autohide="true"
+                    class="user-teaser"
+                    container="body"
+                    delay="0"
+                    handleresize="true"
+                    offset="16"
+                    openclass="open"
+                    opengroup="0"
+                    placement="bottom-end"
+                    popoverarrowclass="tooltip-arrow popover-arrow"
+                    popoverbaseclass="tooltip popover"
+                    popoverclass="vue-popover-theme"
+                    popoverinnerclass="tooltip-inner popover-inner"
+                    popoverwrapperclass="wrapper"
+                    popperoptions="[object Object]"
+                    trigger="manual"
                   >
-                    <div
-                      class="profile-avatar --small --no-image"
+                    <nuxt-link-stub
+                      data-test="avatarUserLink"
+                      to="[object Object]"
                     >
-                      <span
-                        class="initials"
-                      >
-                        BDB
-                      </span>
-                       
-                      <!---->
-                       
-                      <!---->
-                    </div>
-                  </nuxt-link-stub>
-                   
-                  <div
-                    class="info flex-direction-column"
-                  >
-                    <div
-                      class="flex-direction-column"
-                    >
-                      <nuxt-link-stub
-                        to="[object Object]"
+                      <div
+                        class="profile-avatar --small --no-image"
                       >
                         <span
-                          class="text"
+                          class="initials"
+                        >
+                          BDB
+                        </span>
+                         
+                        <!---->
+                         
+                        <!---->
+                      </div>
+                    </nuxt-link-stub>
+                     
+                    <div
+                      class="info flex-direction-column"
+                    >
+                      <div
+                        class="flex-direction-column"
+                      >
+                        <nuxt-link-stub
+                          to="[object Object]"
                         >
                           <span
                             class="slug"
@@ -6654,17 +7057,19 @@ exports[`GroupProfileSlug given a puplic group – "yoga-practice" given a hidde
                           >
                             Bob der Baumeister
                           </span>
-                        </span>
-                      </nuxt-link-stub>
-                       
-                      <!---->
+                        </nuxt-link-stub>
+                         
+                        <!---->
+                         
+                        <!---->
+                      </div>
                        
                       <!---->
                     </div>
                      
-                    <!---->
-                  </div>
-                </div>
+                    <div />
+                  </v-popover-stub>
+                </client-only-stub>
               </div>
             </li>
             <li
@@ -6674,39 +7079,52 @@ exports[`GroupProfileSlug given a puplic group – "yoga-practice" given a hidde
                 class=""
                 placement="top-start"
               >
-                <div
-                  class="user-teaser"
-                >
-                  <nuxt-link-stub
-                    data-test="avatarUserLink"
-                    to="[object Object]"
+                <client-only-stub>
+                  <v-popover-stub
+                    autohide="true"
+                    class="user-teaser"
+                    container="body"
+                    delay="0"
+                    handleresize="true"
+                    offset="16"
+                    openclass="open"
+                    opengroup="0"
+                    placement="bottom-end"
+                    popoverarrowclass="tooltip-arrow popover-arrow"
+                    popoverbaseclass="tooltip popover"
+                    popoverclass="vue-popover-theme"
+                    popoverinnerclass="tooltip-inner popover-inner"
+                    popoverwrapperclass="wrapper"
+                    popperoptions="[object Object]"
+                    trigger="manual"
                   >
-                    <div
-                      class="profile-avatar --small --no-image"
+                    <nuxt-link-stub
+                      data-test="avatarUserLink"
+                      to="[object Object]"
                     >
-                      <span
-                        class="initials"
-                      >
-                        H
-                      </span>
-                       
-                      <!---->
-                       
-                      <!---->
-                    </div>
-                  </nuxt-link-stub>
-                   
-                  <div
-                    class="info flex-direction-column"
-                  >
-                    <div
-                      class="flex-direction-column"
-                    >
-                      <nuxt-link-stub
-                        to="[object Object]"
+                      <div
+                        class="profile-avatar --small --no-image"
                       >
                         <span
-                          class="text"
+                          class="initials"
+                        >
+                          H
+                        </span>
+                         
+                        <!---->
+                         
+                        <!---->
+                      </div>
+                    </nuxt-link-stub>
+                     
+                    <div
+                      class="info flex-direction-column"
+                    >
+                      <div
+                        class="flex-direction-column"
+                      >
+                        <nuxt-link-stub
+                          to="[object Object]"
                         >
                           <span
                             class="slug"
@@ -6719,17 +7137,19 @@ exports[`GroupProfileSlug given a puplic group – "yoga-practice" given a hidde
                           >
                             Huey
                           </span>
-                        </span>
-                      </nuxt-link-stub>
-                       
-                      <!---->
+                        </nuxt-link-stub>
+                         
+                        <!---->
+                         
+                        <!---->
+                      </div>
                        
                       <!---->
                     </div>
                      
-                    <!---->
-                  </div>
-                </div>
+                    <div />
+                  </v-popover-stub>
+                </client-only-stub>
               </div>
             </li>
           </ul>
@@ -7393,39 +7813,52 @@ exports[`GroupProfileSlug given a puplic group – "yoga-practice" given a hidde
                 class=""
                 placement="top-start"
               >
-                <div
-                  class="user-teaser"
-                >
-                  <nuxt-link-stub
-                    data-test="avatarUserLink"
-                    to="[object Object]"
+                <client-only-stub>
+                  <v-popover-stub
+                    autohide="true"
+                    class="user-teaser"
+                    container="body"
+                    delay="0"
+                    handleresize="true"
+                    offset="16"
+                    openclass="open"
+                    opengroup="0"
+                    placement="bottom-end"
+                    popoverarrowclass="tooltip-arrow popover-arrow"
+                    popoverbaseclass="tooltip popover"
+                    popoverclass="vue-popover-theme"
+                    popoverinnerclass="tooltip-inner popover-inner"
+                    popoverwrapperclass="wrapper"
+                    popperoptions="[object Object]"
+                    trigger="manual"
                   >
-                    <div
-                      class="profile-avatar --small --no-image"
+                    <nuxt-link-stub
+                      data-test="avatarUserLink"
+                      to="[object Object]"
                     >
-                      <span
-                        class="initials"
-                      >
-                        PL
-                      </span>
-                       
-                      <!---->
-                       
-                      <!---->
-                    </div>
-                  </nuxt-link-stub>
-                   
-                  <div
-                    class="info flex-direction-column"
-                  >
-                    <div
-                      class="flex-direction-column"
-                    >
-                      <nuxt-link-stub
-                        to="[object Object]"
+                      <div
+                        class="profile-avatar --small --no-image"
                       >
                         <span
-                          class="text"
+                          class="initials"
+                        >
+                          PL
+                        </span>
+                         
+                        <!---->
+                         
+                        <!---->
+                      </div>
+                    </nuxt-link-stub>
+                     
+                    <div
+                      class="info flex-direction-column"
+                    >
+                      <div
+                        class="flex-direction-column"
+                      >
+                        <nuxt-link-stub
+                          to="[object Object]"
                         >
                           <span
                             class="slug"
@@ -7438,17 +7871,19 @@ exports[`GroupProfileSlug given a puplic group – "yoga-practice" given a hidde
                           >
                             Peter Lustig
                           </span>
-                        </span>
-                      </nuxt-link-stub>
-                       
-                      <!---->
+                        </nuxt-link-stub>
+                         
+                        <!---->
+                         
+                        <!---->
+                      </div>
                        
                       <!---->
                     </div>
                      
-                    <!---->
-                  </div>
-                </div>
+                    <div />
+                  </v-popover-stub>
+                </client-only-stub>
               </div>
             </li>
             <li
@@ -7458,39 +7893,52 @@ exports[`GroupProfileSlug given a puplic group – "yoga-practice" given a hidde
                 class=""
                 placement="top-start"
               >
-                <div
-                  class="user-teaser"
-                >
-                  <nuxt-link-stub
-                    data-test="avatarUserLink"
-                    to="[object Object]"
+                <client-only-stub>
+                  <v-popover-stub
+                    autohide="true"
+                    class="user-teaser"
+                    container="body"
+                    delay="0"
+                    handleresize="true"
+                    offset="16"
+                    openclass="open"
+                    opengroup="0"
+                    placement="bottom-end"
+                    popoverarrowclass="tooltip-arrow popover-arrow"
+                    popoverbaseclass="tooltip popover"
+                    popoverclass="vue-popover-theme"
+                    popoverinnerclass="tooltip-inner popover-inner"
+                    popoverwrapperclass="wrapper"
+                    popperoptions="[object Object]"
+                    trigger="manual"
                   >
-                    <div
-                      class="profile-avatar --small --no-image"
+                    <nuxt-link-stub
+                      data-test="avatarUserLink"
+                      to="[object Object]"
                     >
-                      <span
-                        class="initials"
-                      >
-                        JR
-                      </span>
-                       
-                      <!---->
-                       
-                      <!---->
-                    </div>
-                  </nuxt-link-stub>
-                   
-                  <div
-                    class="info flex-direction-column"
-                  >
-                    <div
-                      class="flex-direction-column"
-                    >
-                      <nuxt-link-stub
-                        to="[object Object]"
+                      <div
+                        class="profile-avatar --small --no-image"
                       >
                         <span
-                          class="text"
+                          class="initials"
+                        >
+                          JR
+                        </span>
+                         
+                        <!---->
+                         
+                        <!---->
+                      </div>
+                    </nuxt-link-stub>
+                     
+                    <div
+                      class="info flex-direction-column"
+                    >
+                      <div
+                        class="flex-direction-column"
+                      >
+                        <nuxt-link-stub
+                          to="[object Object]"
                         >
                           <span
                             class="slug"
@@ -7503,17 +7951,19 @@ exports[`GroupProfileSlug given a puplic group – "yoga-practice" given a hidde
                           >
                             Jenny Rostock
                           </span>
-                        </span>
-                      </nuxt-link-stub>
-                       
-                      <!---->
+                        </nuxt-link-stub>
+                         
+                        <!---->
+                         
+                        <!---->
+                      </div>
                        
                       <!---->
                     </div>
                      
-                    <!---->
-                  </div>
-                </div>
+                    <div />
+                  </v-popover-stub>
+                </client-only-stub>
               </div>
             </li>
             <li
@@ -7523,39 +7973,52 @@ exports[`GroupProfileSlug given a puplic group – "yoga-practice" given a hidde
                 class=""
                 placement="top-start"
               >
-                <div
-                  class="user-teaser"
-                >
-                  <nuxt-link-stub
-                    data-test="avatarUserLink"
-                    to="[object Object]"
+                <client-only-stub>
+                  <v-popover-stub
+                    autohide="true"
+                    class="user-teaser"
+                    container="body"
+                    delay="0"
+                    handleresize="true"
+                    offset="16"
+                    openclass="open"
+                    opengroup="0"
+                    placement="bottom-end"
+                    popoverarrowclass="tooltip-arrow popover-arrow"
+                    popoverbaseclass="tooltip popover"
+                    popoverclass="vue-popover-theme"
+                    popoverinnerclass="tooltip-inner popover-inner"
+                    popoverwrapperclass="wrapper"
+                    popperoptions="[object Object]"
+                    trigger="manual"
                   >
-                    <div
-                      class="profile-avatar --small --no-image"
+                    <nuxt-link-stub
+                      data-test="avatarUserLink"
+                      to="[object Object]"
                     >
-                      <span
-                        class="initials"
-                      >
-                        BDB
-                      </span>
-                       
-                      <!---->
-                       
-                      <!---->
-                    </div>
-                  </nuxt-link-stub>
-                   
-                  <div
-                    class="info flex-direction-column"
-                  >
-                    <div
-                      class="flex-direction-column"
-                    >
-                      <nuxt-link-stub
-                        to="[object Object]"
+                      <div
+                        class="profile-avatar --small --no-image"
                       >
                         <span
-                          class="text"
+                          class="initials"
+                        >
+                          BDB
+                        </span>
+                         
+                        <!---->
+                         
+                        <!---->
+                      </div>
+                    </nuxt-link-stub>
+                     
+                    <div
+                      class="info flex-direction-column"
+                    >
+                      <div
+                        class="flex-direction-column"
+                      >
+                        <nuxt-link-stub
+                          to="[object Object]"
                         >
                           <span
                             class="slug"
@@ -7568,17 +8031,19 @@ exports[`GroupProfileSlug given a puplic group – "yoga-practice" given a hidde
                           >
                             Bob der Baumeister
                           </span>
-                        </span>
-                      </nuxt-link-stub>
-                       
-                      <!---->
+                        </nuxt-link-stub>
+                         
+                        <!---->
+                         
+                        <!---->
+                      </div>
                        
                       <!---->
                     </div>
                      
-                    <!---->
-                  </div>
-                </div>
+                    <div />
+                  </v-popover-stub>
+                </client-only-stub>
               </div>
             </li>
             <li
@@ -7588,39 +8053,52 @@ exports[`GroupProfileSlug given a puplic group – "yoga-practice" given a hidde
                 class=""
                 placement="top-start"
               >
-                <div
-                  class="user-teaser"
-                >
-                  <nuxt-link-stub
-                    data-test="avatarUserLink"
-                    to="[object Object]"
+                <client-only-stub>
+                  <v-popover-stub
+                    autohide="true"
+                    class="user-teaser"
+                    container="body"
+                    delay="0"
+                    handleresize="true"
+                    offset="16"
+                    openclass="open"
+                    opengroup="0"
+                    placement="bottom-end"
+                    popoverarrowclass="tooltip-arrow popover-arrow"
+                    popoverbaseclass="tooltip popover"
+                    popoverclass="vue-popover-theme"
+                    popoverinnerclass="tooltip-inner popover-inner"
+                    popoverwrapperclass="wrapper"
+                    popperoptions="[object Object]"
+                    trigger="manual"
                   >
-                    <div
-                      class="profile-avatar --small --no-image"
+                    <nuxt-link-stub
+                      data-test="avatarUserLink"
+                      to="[object Object]"
                     >
-                      <span
-                        class="initials"
-                      >
-                        H
-                      </span>
-                       
-                      <!---->
-                       
-                      <!---->
-                    </div>
-                  </nuxt-link-stub>
-                   
-                  <div
-                    class="info flex-direction-column"
-                  >
-                    <div
-                      class="flex-direction-column"
-                    >
-                      <nuxt-link-stub
-                        to="[object Object]"
+                      <div
+                        class="profile-avatar --small --no-image"
                       >
                         <span
-                          class="text"
+                          class="initials"
+                        >
+                          H
+                        </span>
+                         
+                        <!---->
+                         
+                        <!---->
+                      </div>
+                    </nuxt-link-stub>
+                     
+                    <div
+                      class="info flex-direction-column"
+                    >
+                      <div
+                        class="flex-direction-column"
+                      >
+                        <nuxt-link-stub
+                          to="[object Object]"
                         >
                           <span
                             class="slug"
@@ -7633,17 +8111,19 @@ exports[`GroupProfileSlug given a puplic group – "yoga-practice" given a hidde
                           >
                             Huey
                           </span>
-                        </span>
-                      </nuxt-link-stub>
-                       
-                      <!---->
+                        </nuxt-link-stub>
+                         
+                        <!---->
+                         
+                        <!---->
+                      </div>
                        
                       <!---->
                     </div>
                      
-                    <!---->
-                  </div>
-                </div>
+                    <div />
+                  </v-popover-stub>
+                </client-only-stub>
               </div>
             </li>
           </ul>