robin/dttmr-fe
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: ellipse-trim invite codes

Browse Source
This commit is contained in:
robin
2026-08-31 21:56:13 +02:00
parent 5d0a2cfded
commit 564c7c6338
1 changed files with 11 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/InvitesPanel.vue
+11 -2
View File
@@ -218,7 +218,7 @@ function inviteDetail(invite: Invite): string {
:class="`is-${inviteStatus(invite)}`" :class="`is-${inviteStatus(invite)}`"
> >
<div class="invite-ticket-main"> <div class="invite-ticket-main">
<code class="invite-code">{{ invite.code }}</code> <code class="invite-code" :title="invite.code">{{ invite.code }}</code>
<span class="invite-status-pill" :class="`pill-${inviteStatus(invite)}`">{{ <span class="invite-status-pill" :class="`pill-${inviteStatus(invite)}`">{{
statusLabel(invite) statusLabel(invite)
}}</span> }}</span>
@@ -368,6 +368,7 @@ function inviteDetail(invite: Invite): string {
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
gap: 0.5rem; gap: 0.5rem;
flex-wrap: wrap;
} }
.invite-code { .invite-code {
@@ -375,6 +376,11 @@ function inviteDetail(invite: Invite): string {
font-size: 0.95rem; font-size: 0.95rem;
letter-spacing: 0.06em; letter-spacing: 0.06em;
color: var(--c-heading); color: var(--c-heading);
min-width: 0;
flex: 1 1 auto;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
} }
.invite-status-pill { .invite-status-pill {
@@ -406,7 +412,8 @@ function inviteDetail(invite: Invite): string {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
gap: 0.5rem; gap: 0.4rem 0.5rem;
flex-wrap: wrap;
border-top: 1px dashed var(--c-border); border-top: 1px dashed var(--c-border);
margin-top: 0.55rem; margin-top: 0.55rem;
padding-top: 0.5rem; padding-top: 0.5rem;
@@ -415,12 +422,14 @@ function inviteDetail(invite: Invite): string {
.invite-detail { .invite-detail {
font-size: 0.75rem; font-size: 0.75rem;
color: var(--c-text-soft); color: var(--c-text-soft);
min-width: 0;
} }
.invite-actions { .invite-actions {
display: flex; display: flex;
align-items: center; align-items: center;
gap: 0.4rem; gap: 0.4rem;
margin-left: auto;
} }
.confirm-label { .confirm-label {