fix(topbar): fix overflow pill popup clipped and hidden behind pdf viewer
Remove overflow-hidden from the main flex row — the inner min-w-0 flex-1 overflow-hidden title container already handles truncation. Add relative z-10 to the topbar wrapper so it stacks above the pdf viewer. Pill is now hidden below md (matching the chip row) and shows +N at md, +N weitere at lg+. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
@@ -1,5 +1,6 @@
|
||||
<script lang="ts">
|
||||
import { tick } from 'svelte';
|
||||
import { m } from '$lib/paraglide/messages.js';
|
||||
import { clickOutside } from '$lib/actions/clickOutside';
|
||||
|
||||
type Person = { id: string; firstName: string; lastName: string };
|
||||
@@ -44,12 +45,12 @@ function handleKeydown(e: KeyboardEvent) {
|
||||
type="button"
|
||||
aria-haspopup="true"
|
||||
aria-expanded={open}
|
||||
aria-label="{extraCount} weitere Empfänger anzeigen"
|
||||
aria-label={m.topbar_overflow_show({ count: extraCount })}
|
||||
onclick={toggle}
|
||||
onkeydown={handleKeydown}
|
||||
class="inline-flex shrink-0 items-center rounded-full border border-line bg-muted px-2 py-0.5 text-[14px] font-bold text-ink-2 hover:bg-surface focus-visible:ring-2 focus-visible:ring-primary"
|
||||
>
|
||||
+{extraCount} weitere
|
||||
+{extraCount}<span class="hidden lg:inline"> {m.topbar_overflow_suffix()}</span>
|
||||
</button>
|
||||
|
||||
{#if open}
|
||||
@@ -57,7 +58,9 @@ function handleKeydown(e: KeyboardEvent) {
|
||||
role="list"
|
||||
class="absolute top-full left-0 z-50 mt-1 min-w-[160px] rounded-md border border-line bg-surface p-3 shadow-lg"
|
||||
>
|
||||
<p class="mb-2 text-[14px] font-bold tracking-wide text-ink-2 uppercase">Weitere Empfänger</p>
|
||||
<p class="mb-2 text-[14px] font-bold tracking-wide text-ink-2 uppercase">
|
||||
{m.topbar_overflow_heading()}
|
||||
</p>
|
||||
{#each persons as person (person.id)}
|
||||
<div role="listitem">
|
||||
<a
|
||||
|
||||
Reference in New Issue
Block a user