src/components/InvitesPanel.vue

@@ -218,7 +218,7 @@ function inviteDetail(invite: Invite): string {
           :class="`is-${inviteStatus(invite)}`"
         >
           <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)}`">{{
               statusLabel(invite)
             }}</span>
@@ -368,6 +368,7 @@ function inviteDetail(invite: Invite): string {
   align-items: center;
   justify-content: space-between;
   gap: 0.5rem;
+  flex-wrap: wrap;
 }
 
 .invite-code {
@@ -375,6 +376,11 @@ function inviteDetail(invite: Invite): string {
   font-size: 0.95rem;
   letter-spacing: 0.06em;
   color: var(--c-heading);
+  min-width: 0;
+  flex: 1 1 auto;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
 }
 
 .invite-status-pill {
@@ -406,7 +412,8 @@ function inviteDetail(invite: Invite): string {
   display: flex;
   align-items: center;
   justify-content: space-between;
-  gap: 0.5rem;
+  gap: 0.4rem 0.5rem;
+  flex-wrap: wrap;
   border-top: 1px dashed var(--c-border);
   margin-top: 0.55rem;
   padding-top: 0.5rem;
@@ -415,12 +422,14 @@ function inviteDetail(invite: Invite): string {
 .invite-detail {
   font-size: 0.75rem;
   color: var(--c-text-soft);
+  min-width: 0;
 }
 
 .invite-actions {
   display: flex;
   align-items: center;
   gap: 0.4rem;
+  margin-left: auto;
 }
 
 .confirm-label {