user tags overflow

This commit is contained in:
Henry Jameson 2025-07-30 10:22:37 +03:00
commit eb68857293
2 changed files with 54 additions and 60 deletions

View file

@ -234,29 +234,6 @@
}
}
.bottom-line {
font-weight: lighter;
font-size: 0.9em;
align-items: baseline;
.lock-icon {
margin-left: 0.5em;
}
.user-screen-name {
color: var(--text);
min-width: 1px;
flex: 0 1 auto;
text-overflow: ellipsis;
overflow: hidden;
}
.user-role {
flex: none;
align-self: baseline;
}
}
.user-summary {
display: block;
margin-left: 0.6em;
@ -287,10 +264,28 @@
}
.bottom-line {
display: flex;
white-space: normal;
font-weight: 500;
font-size: 0.9em;
line-height: 1.5;
}
.lock-icon {
margin-left: 0.5em;
}
.user-screen-name {
color: var(--text);
min-width: 5em;
text-overflow: ellipsis;
overflow: hidden;
display: inline-block;
}
.user-role {
display: inline-block;
vertical-align: baseline;
}
}
.user-name {

View file

@ -102,42 +102,41 @@
</router-link>
</div>
<div class="bottom-line">
<user-link
class="user-screen-name"
:user="user"
/>
<div class="tags" v-if="!hideBio">
<span
v-if="user.deactivated"
class="alert neutral user-role"
>
{{ $t('user_card.deactivated') }}
</span>
<span
v-if="!!visibleRole"
class="alert neutral user-role"
>
{{ $t(`general.role.${visibleRole}`) }}
</span>
<span
v-if="user.actor_type === 'Service'"
class="alert neutral user-role"
>
{{ $t('user_card.bot') }}
</span>
<span
v-if="user.actor_type === 'Group'"
class="alert user-role"
>
{{ $t('user_card.group') }}
<div class="user-screen-name">
<user-link
:user="user"
/>
<span v-if="user.locked">
<FAIcon
class="lock-icon"
icon="lock"
size="sm"
/>
</span>
</div>
<span v-if="user.locked">
<FAIcon
class="lock-icon"
icon="lock"
size="sm"
/>
<span
v-if="user.deactivated"
class="alert neutral user-role"
>
{{ $t('user_card.deactivated') }}
</span>
<span
v-if="!!visibleRole"
class="alert neutral user-role"
>
{{ $t(`general.role.${visibleRole}`) }}
</span>
<span
v-if="user.actor_type === 'Service'"
class="alert neutral user-role"
>
{{ $t('user_card.bot') }}
</span>
<span
v-if="user.actor_type === 'Group'"
class="alert user-role"
>
{{ $t('user_card.group') }}
</span>
<span
v-if="relationship.muting && muteExpiryAvailable"
@ -151,12 +150,12 @@
>
{{ blockExpiry }}
</span>
<div
<span
v-if="relationship.followed_by && loggedIn && isOtherUser"
class="alert neutral user-role"
>
{{ $t('user_card.follows_you') }}
</div>
</span>
</div>
</div>
</div>