marcel/familienarchiv
1
0
Fork 0
Code Issues 102 Pull Requests Actions Packages Projects Releases Wiki Activity

fix(topbar): fix overflow pill popup clipped and hidden behind pdf viewer

Browse Source 
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:
Marcel
2026-04-02 11:36:41 +02:00
parent e94f43264c
commit 9dd35999e0
2 changed files with 11 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
frontend/src/lib/components/DocumentTopBar.svelte
View File

@@ -109,16 +109,16 @@ let mobileMenuOpen = $state(false);
</a> </a>
{/snippet} {/snippet}
<div data-topbar class="border-b border-line bg-surface shadow-sm"> <div data-topbar class="relative z-10 border-b border-line bg-surface shadow-sm">
<!-- Main row --> <!-- Main row -->
<div class="flex h-[75px] shrink-0 items-center overflow-hidden xs:h-[88px]"> <div class="flex h-[75px] shrink-0 items-center xs:h-[88px]">
<!-- Accent bar --> <!-- Accent bar -->
<div class="h-full w-[3px] shrink-0 bg-primary"></div> <div class="h-full w-[3px] shrink-0 bg-primary"></div>
<!-- Back link — 44×44px touch target --> <!-- Back link — 44×44px touch target -->
<a <a
href="/" href="/"
aria-label="Zurück zur Dokumentenliste" aria-label={m.topbar_back_label()}
class="group -ml-0.5 flex h-11 w-11 shrink-0 items-center justify-center rounded-full transition-colors hover:bg-muted focus-visible:ring-2 focus-visible:ring-primary" class="group -ml-0.5 flex h-11 w-11 shrink-0 items-center justify-center rounded-full transition-colors hover:bg-muted focus-visible:ring-2 focus-visible:ring-primary"
> >
<img <img
@@ -150,12 +150,7 @@ let mobileMenuOpen = $state(false);
<!-- Chip row — desktop only, hidden on small screens to make room for buttons --> <!-- Chip row — desktop only, hidden on small screens to make room for buttons -->
<div class="mx-3 hidden min-w-0 shrink-0 md:block"> <div class="mx-3 hidden min-w-0 shrink-0 md:block">
<PersonChipRow <PersonChipRow sender={doc.sender} receivers={receivers} abbreviated={true} extraCount={0} />
sender={doc.sender}
receivers={receivers}
abbreviated={true}
extraCount={extraCount}
/>
</div> </div>
<!-- Overflow pill button (desktop) + status dot --> <!-- Overflow pill button (desktop) + status dot -->
@@ -206,7 +201,7 @@ let mobileMenuOpen = $state(false);
<button <button
type="button" type="button"
onclick={() => (mobileMenuOpen = !mobileMenuOpen)} onclick={() => (mobileMenuOpen = !mobileMenuOpen)}
aria-label="Weitere Aktionen" aria-label={m.topbar_more_actions()}
aria-haspopup="true" aria-haspopup="true"
aria-expanded={mobileMenuOpen} aria-expanded={mobileMenuOpen}
class="flex h-9 w-9 items-center justify-center rounded border border-line bg-muted transition hover:bg-accent focus-visible:ring-2 focus-visible:ring-primary" class="flex h-9 w-9 items-center justify-center rounded border border-line bg-muted transition hover:bg-accent focus-visible:ring-2 focus-visible:ring-primary"

9
frontend/src/lib/components/OverflowPillButton.svelte
View File

@@ -1,5 +1,6 @@
<script lang="ts"> <script lang="ts">
import { tick } from 'svelte'; import { tick } from 'svelte';
import { m } from '$lib/paraglide/messages.js';
import { clickOutside } from '$lib/actions/clickOutside'; import { clickOutside } from '$lib/actions/clickOutside';
type Person = { id: string; firstName: string; lastName: string }; type Person = { id: string; firstName: string; lastName: string };
@@ -44,12 +45,12 @@ function handleKeydown(e: KeyboardEvent) {
type="button" type="button"
aria-haspopup="true" aria-haspopup="true"
aria-expanded={open} aria-expanded={open}
aria-label="{extraCount} weitere Empfänger anzeigen" aria-label={m.topbar_overflow_show({ count: extraCount })}
onclick={toggle} onclick={toggle}
onkeydown={handleKeydown} 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" 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">&nbsp;{m.topbar_overflow_suffix()}</span>
</button> </button>
{#if open} {#if open}
@@ -57,7 +58,9 @@ function handleKeydown(e: KeyboardEvent) {
role="list" 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" 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)} {#each persons as person (person.id)}
<div role="listitem"> <div role="listitem">
<a <a