From 4e4eff8dc9705a692fe18f19c0f5652eb1a71d03 Mon Sep 17 00:00:00 2001 From: Max Date: Sat, 10 May 2025 11:22:51 +0200 Subject: [PATCH] fix(webapp): fix layout break and hidden group name appearance (#8538) Fixes long comment overflow. There is some underlying problem with flex box and overflows. A better solution could be to use a grid, but this was the fastest I would come up with. Fixes hidden group name appearance --- webapp/components/InviteButton/InviteButton.vue | 1 + webapp/components/_new/features/Invitations/Invitation.vue | 1 + webapp/pages/groups/edit/_id/invites.vue | 4 ++-- 3 files changed, 4 insertions(+), 2 deletions(-) diff --git a/webapp/components/InviteButton/InviteButton.vue b/webapp/components/InviteButton/InviteButton.vue index 3eea98f74..473116c1b 100644 --- a/webapp/components/InviteButton/InviteButton.vue +++ b/webapp/components/InviteButton/InviteButton.vue @@ -114,5 +114,6 @@ export default { display: flex; flex-flow: column; gap: $space-small; + --invitation-column-max-width: 75%; } diff --git a/webapp/components/_new/features/Invitations/Invitation.vue b/webapp/components/_new/features/Invitations/Invitation.vue index 989af2e57..f34beeb58 100644 --- a/webapp/components/_new/features/Invitations/Invitation.vue +++ b/webapp/components/_new/features/Invitations/Invitation.vue @@ -131,6 +131,7 @@ export default { display: flex; flex-flow: column; gap: $space-xx-small; + max-width: var(--invitation-column-max-width, 100%); } .code { diff --git a/webapp/pages/groups/edit/_id/invites.vue b/webapp/pages/groups/edit/_id/invites.vue index a19cdbf40..5181c21f1 100644 --- a/webapp/pages/groups/edit/_id/invites.vue +++ b/webapp/pages/groups/edit/_id/invites.vue @@ -8,8 +8,8 @@ @invalidate-invite-code="invalidateInviteCode" :inviteCodes="group.inviteCodes" :copy-message=" - group.type === 'hidden' - ? $T('invite-codes.invite-link-message-hidden-group', { + group.groupType === 'hidden' + ? $t('invite-codes.invite-link-message-hidden-group', { network: $env.NETWORK_NAME, }) : $t('invite-codes.invite-link-message-group', {