diff --git a/webapp/components/UserTeaser/UserTeaser.vue b/webapp/components/UserTeaser/UserTeaser.vue index 5a4d7c281..1fdacc360 100644 --- a/webapp/components/UserTeaser/UserTeaser.vue +++ b/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; diff --git a/webapp/components/UserTeaser/UserTeaserNonAnonymous.vue b/webapp/components/UserTeaser/UserTeaserNonAnonymous.vue index 25a750ddd..25168491f 100644 --- a/webapp/components/UserTeaser/UserTeaserNonAnonymous.vue +++ b/webapp/components/UserTeaser/UserTeaserNonAnonymous.vue @@ -30,7 +30,7 @@ {{ $t('group.in') }} - {{ groupNameTruncated }} + {{ groupName }} @@ -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({