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

fix(#99): make document detail tab bar scrollable on narrow screens

Browse Source 
Wrap tabs in overflow-x-auto container with hidden scrollbar so all 4
German labels ("Transkription" etc.) are reachable at 320px. Close
button stays pinned outside the scroll area, always visible.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Marcel
2026-03-27 16:33:47 +01:00
parent 93408c5825
commit e1c09ddc7f
1 changed files with 25 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files

48
frontend/src/lib/components/DocumentBottomPanel.svelte
View File

@@ -127,35 +127,37 @@ function handleCountChange(count: number) {
</div> </div>
<!-- Tab bar --> <!-- Tab bar -->
<div class="flex shrink-0 items-center border-b border-line bg-surface px-4"> <div class="flex shrink-0 items-center border-b border-line bg-surface">
{#each tabs as tab (tab.id)} <!-- Scrollable tabs area — hides scrollbar visually -->
<button <div
onclick={() => openTab(tab.id)} class="flex flex-1 items-center overflow-x-auto px-2 [scrollbar-width:none] [&::-webkit-scrollbar]:hidden"
class="mr-1 px-3 py-2.5 font-sans text-xs font-medium transition-colors {activeTab === tab.id && open >
? 'border-b-2 border-primary text-ink' {#each tabs as tab (tab.id)}
: 'text-ink-3 hover:text-ink'}" <button
aria-pressed={activeTab === tab.id && open} onclick={() => openTab(tab.id)}
> class="mr-1 shrink-0 px-3 py-2.5 font-sans text-xs font-medium transition-colors {activeTab === tab.id && open
{tab.label()} ? 'border-b-2 border-primary text-ink'
{#if tab.id === 'discussion'} : 'text-ink-3 hover:text-ink'}"
<span aria-pressed={activeTab === tab.id && open}
data-testid="discussion-count-badge" >
class="ml-1.5 inline-flex h-4 min-w-4 items-center justify-center rounded-full bg-primary px-1 font-sans text-[10px] font-bold text-primary-fg" {tab.label()}
>{discussionCount}</span {#if tab.id === 'discussion'}
> <span
{/if} data-testid="discussion-count-badge"
</button> class="ml-1.5 inline-flex h-4 min-w-4 items-center justify-center rounded-full bg-primary px-1 font-sans text-[10px] font-bold text-primary-fg"
{/each} >{discussionCount}</span
>
<!-- spacer --> {/if}
<div class="flex-1"></div> </button>
{/each}
</div>
{#if open} {#if open}
<button <button
onclick={closePanel} onclick={closePanel}
data-testid="panel-close-btn" data-testid="panel-close-btn"
aria-label="Panel schließen" aria-label="Panel schließen"
class="rounded p-1.5 text-ink-3 transition-colors hover:bg-muted hover:text-ink" class="mr-2 shrink-0 rounded p-1.5 text-ink-3 transition-colors hover:bg-muted hover:text-ink"
> >
<svg class="h-4 w-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> <svg class="h-4 w-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" /> <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />