dne/stammtisch-hersbruck
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

fix: Einladungslinks brechen um statt zu scrollen

Browse source 
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
This commit is contained in:
Daniel Michelberger 2026-09-07 22:38:07 +02:00
parent 6ff37ef1f6
commit ea4e0bd80a
1 changed files with 41 additions and 32 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

73
frontend/src/routes/dashboard/team/+page.svelte
View file

@ -815,41 +815,50 @@
{#if invites.scoped.length > 0} {#if invites.scoped.length > 0}
<div class="space-y-2"> <div class="space-y-2">
{#each invites.scoped as invite (invite.id)} {#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 <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)} class:opacity-60={!invites.isValid(invite)}
> >
<input <p class="font-mono text-xs leading-relaxed break-all">
readonly {invites.url(invite)}
value={invites.url(invite)} </p>
class="min-w-0 flex-1 bg-transparent px-1 font-mono text-xs outline-none" <div class="flex items-center gap-2">
onfocus={(e) => e.currentTarget.select()} <span class="flex-1 text-xs text-muted-foreground">
/> {inviteHint(invite)}
<span class="text-xs text-muted-foreground whitespace-nowrap"> </span>
{inviteHint(invite)} <Button
</span> variant="ghost"
<Button size="icon"
variant="ghost" class="size-8 shrink-0"
size="icon" tooltip="Link kopieren"
class="size-8" onclick={() => copyLink(invite)}
tooltip="Link kopieren" >
onclick={() => copyLink(invite)} {#if copied === invite.id}
> <Check class="size-4 text-primary" />
{#if copied === invite.id} {:else}
<Check class="size-4 text-primary" /> <Copy class="size-4" />
{:else} {/if}
<Copy class="size-4" /> </Button>
{/if} <Button
</Button> variant="ghost"
<Button size="icon"
variant="ghost" class="size-8 shrink-0"
size="icon" tooltip="Link zurückziehen"
class="size-8" onclick={() => removeInvite(invite)}
tooltip="Link zurückziehen" >
onclick={() => removeInvite(invite)} <Trash2 class="size-4 text-destructive" />
> </Button>
<Trash2 class="size-4 text-destructive" /> </div>
</Button>
</div> </div>
{/each} {/each}
</div> </div>