From ea4e0bd80a409f9573a2a3c92c440215e5cd3135 Mon Sep 17 00:00:00 2001
From: Daniel Michelberger <daniel@5t.media>
Date: Mon, 7 Sep 2026 22:38:07 +0200
Subject: [PATCH] fix: Einladungslinks brechen um statt zu scrollen
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Der Link lag in einem einzeiligen Feld. So etwas bricht nicht um, es
scrollt — im Dialog sah man ein Stueck aus der Mitte und musste raten,
ob der richtige Link kopiert wird.

Jetzt steht er in voller Laenge auf einer eigenen Zeile, darunter der
Hinweis und die beiden Knoepfe. break-all statt break-words, weil eine
URL keine Leerzeichen hat, an denen sich trennen liesse.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01P32KoesVtABd6xWsqMKzhr
---
 .../src/routes/dashboard/team/+page.svelte    | 73 +++++++++++--------
 1 file changed, 41 insertions(+), 32 deletions(-)

diff --git a/frontend/src/routes/dashboard/team/+page.svelte b/frontend/src/routes/dashboard/team/+page.svelte
index 01b2292..5ae0e0a 100644
--- a/frontend/src/routes/dashboard/team/+page.svelte
+++ b/frontend/src/routes/dashboard/team/+page.svelte
@@ -815,41 +815,50 @@
             {#if invites.scoped.length > 0}
                 <div class="space-y-2">
                     {#each invites.scoped as invite (invite.id)}
+                        <!--
+                            Der Link steht in voller Laenge auf einer eigenen
+                            Zeile und bricht um. Vorher lag er in einem
+                            einzeiligen Feld, das nicht umbrechen kann, sondern
+                            scrollt — im Dialog sah man davon ein Stueck Mitte
+                            und musste raten, ob der richtige Link kopiert
+                            wird. break-all statt break-words, weil eine URL
+                            keine Leerzeichen hat, an denen sich trennen
+                            liesse.
+                        -->
                         <div
-                            class="flex flex-wrap items-center gap-2 rounded-lg border p-2"
+                            class="space-y-2 rounded-lg border p-2"
                             class:opacity-60={!invites.isValid(invite)}
                         >
-                            <input
-                                readonly
-                                value={invites.url(invite)}
-                                class="min-w-0 flex-1 bg-transparent px-1 font-mono text-xs outline-none"
-                                onfocus={(e) => e.currentTarget.select()}
-                            />
-                            <span class="text-xs text-muted-foreground whitespace-nowrap">
-                                {inviteHint(invite)}
-                            </span>
-                            <Button
-                                variant="ghost"
-                                size="icon"
-                                class="size-8"
-                                tooltip="Link kopieren"
-                                onclick={() => copyLink(invite)}
-                            >
-                                {#if copied === invite.id}
-                                    <Check class="size-4 text-primary" />
-                                {:else}
-                                    <Copy class="size-4" />
-                                {/if}
-                            </Button>
-                            <Button
-                                variant="ghost"
-                                size="icon"
-                                class="size-8"
-                                tooltip="Link zurückziehen"
-                                onclick={() => removeInvite(invite)}
-                            >
-                                <Trash2 class="size-4 text-destructive" />
-                            </Button>
+                            <p class="font-mono text-xs leading-relaxed break-all">
+                                {invites.url(invite)}
+                            </p>
+                            <div class="flex items-center gap-2">
+                                <span class="flex-1 text-xs text-muted-foreground">
+                                    {inviteHint(invite)}
+                                </span>
+                                <Button
+                                    variant="ghost"
+                                    size="icon"
+                                    class="size-8 shrink-0"
+                                    tooltip="Link kopieren"
+                                    onclick={() => copyLink(invite)}
+                                >
+                                    {#if copied === invite.id}
+                                        <Check class="size-4 text-primary" />
+                                    {:else}
+                                        <Copy class="size-4" />
+                                    {/if}
+                                </Button>
+                                <Button
+                                    variant="ghost"
+                                    size="icon"
+                                    class="size-8 shrink-0"
+                                    tooltip="Link zurückziehen"
+                                    onclick={() => removeInvite(invite)}
+                                >
+                                    <Trash2 class="size-4 text-destructive" />
+                                </Button>
+                            </div>
                         </div>
                     {/each}
                 </div>