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

fix(#100): hide action button labels on mobile to prevent toolbar overflow

Browse Source 
At 320px, showing "Annotieren" + "Bearbeiten" + download pushed the
toolbar past its bounds. Icon-only at mobile, labels revealed at sm:.

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

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

@@ -58,7 +58,7 @@ const compactMeta = $derived.by(() => {
</script>
<div
class="z-20 flex shrink-0 items-center justify-between border-b border-line bg-surface px-6 py-3 shadow-sm"
class="z-20 flex shrink-0 items-center justify-between border-b border-line bg-surface px-3 py-3 shadow-sm sm:px-6"
data-topbar
>
<!-- Left: back + title -->
@@ -111,13 +111,16 @@ const compactMeta = $derived.by(() => {
aria-hidden="true"
class="h-4 w-4 {annotateMode ? 'invert' : ''}"
/>
{annotateMode ? m.doc_panel_annotate_stop() : m.doc_panel_annotate()}
<span class="hidden sm:inline"
>{annotateMode ? m.doc_panel_annotate_stop() : m.doc_panel_annotate()}</span
>
</button>
{/if}
{#if canWrite}
<a
href="/documents/{doc.id}/edit"
aria-label={m.btn_edit()}
class="flex items-center gap-2 rounded border border-primary bg-transparent px-3 py-1.5 text-xs font-medium text-ink transition hover:bg-primary hover:text-primary-fg"
>
<img
@@ -126,7 +129,7 @@ const compactMeta = $derived.by(() => {
aria-hidden="true"
class="h-4 w-4"
/>
{m.btn_edit()}
<span class="hidden sm:inline">{m.btn_edit()}</span>
</a>
{/if}