status component: Fix repeater name overflowing
All checks were successful
ci/woodpecker/pr/woodpecker Pipeline was successful

If someone repeating a post had a long username, their username would
overflow beyond the bounds of the post.

This fixes this isse by turning the bar displaying the username and
repeat icon into a flexbox.
This commit is contained in:
yuki joou 2024-04-01 16:57:11 +02:00
parent ed0b403c33
commit 8c49474dea
2 changed files with 23 additions and 8 deletions

View file

@ -266,6 +266,16 @@
color: $fallback--cGreen;
color: var(--cGreen, $fallback--cGreen);
}
.right-side {
display: flex;
align-items: center;
gap: 0.3em;
}
.repeat-tooltip {
flex-shrink: 0;
}
}
.repeater-avatar {

View file

@ -83,7 +83,7 @@
:user="statusoid.user"
/>
<div class="right-side faint">
<span
<div
class="status-username repeater-name"
:title="retweeter"
>
@ -100,14 +100,19 @@
v-else
:to="retweeterProfileLink"
>{{ retweeter }}</router-link>
</span>
</div>
{{ ' ' }}
<FAIcon
icon="retweet"
class="repeat-icon"
:title="$t('tool_tip.repeat')"
/>
{{ $t('timeline.repeated') }}
<div
class="repeat-tooltip"
>
<FAIcon
icon="retweet"
class="repeat-icon"
:title="$t('tool_tip.repeat')"
/>
{{ $t('timeline.repeated') }}
</div>
</div>
</div>