just cut group name and save some logic

webapp/components/UserTeaser/UserTeaser.vue

@@ -84,6 +84,8 @@ export default {
   }
 
   .info {
+    flex: 1;
+    min-width: 0;
     padding-left: 10px;
     overflow: hidden;
     text-overflow: ellipsis;
@@ -136,6 +138,7 @@ export default {
 
   .group-info {
     display: flex;
+    align-self: stretch;
     align-items: baseline;
     gap: 4px;
     min-width: 0;

webapp/components/UserTeaser/UserTeaserNonAnonymous.vue

@@ -30,7 +30,7 @@
           <span v-if="group" class="group-info">
             <span class="text">{{ $t('group.in') }}</span>
             <nuxt-link :to="groupLink" class="group-link" :title="groupName">
-              {{ groupNameTruncated }}
+              {{ groupName }}
             </nuxt-link>
           </span>
           <!-- eslint-disable-next-line prettier/prettier -->
@@ -88,11 +88,6 @@ export default {
     injectedDate: { type: Boolean, default: false },
     hoverDelay: { type: Number, default: 500 },
   },
-  data() {
-    return {
-      maxGroupChars: 50,
-    }
-  },
   computed: {
     ...mapGetters({
       isModerator: 'auth/isModerator',
@@ -130,44 +125,11 @@ export default {
       const { name } = this.group || {}
       return name || this.$t('profile.userAnonym')
     },
-    groupNameTruncated() {
-      const name = this.groupName
-      return name.length > this.maxGroupChars ? name.slice(0, this.maxGroupChars) + '...' : name
-    },
   },
   created() {
     this.icons = iconRegistry
   },
-  mounted() {
-    this.calcMaxGroupChars()
-    window.addEventListener('resize', this.calcMaxGroupChars)
-  },
-  beforeDestroy() {
-    window.removeEventListener('resize', this.calcMaxGroupChars)
-  },
   methods: {
-    calcMaxGroupChars() {
-      this.$nextTick(() => {
-        if (!this.group) return
-        const teaserEl = this.$el
-        if (!teaserEl) return
-        // Available width = teaser width - avatar(36px) - padding-left(10px)
-        const availableWidth = teaserEl.clientWidth - 46
-        const style = getComputedStyle(teaserEl)
-        const canvas = document.createElement('canvas')
-        const ctx = canvas.getContext('2d')
-        ctx.font = `${style.fontSize} ${style.fontFamily}`
-        const inTextWidth = ctx.measureText(this.$t('group.in') + ' ').width
-        const dotsWidth = ctx.measureText('...').width
-        const space = availableWidth - inTextWidth - dotsWidth
-        if (space <= 0) {
-          this.maxGroupChars = 3
-          return
-        }
-        const avgCharWidth = ctx.measureText('abcdefghijklmnopqrstuvwxyz').width / 26
-        this.maxGroupChars = Math.max(3, Math.floor(space / avgCharWidth))
-      })
-    },
     async loadPopover(openMenu) {
       // Load user data if not already loaded, to avoid flickering
       await this.$apollo.query({