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

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

View File

@@ -58,7 +58,7 @@ const compactMeta = $derived.by(() => {
</script> </script>
<div <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 data-topbar
> >
<!-- Left: back + title --> <!-- Left: back + title -->
@@ -111,13 +111,16 @@ const compactMeta = $derived.by(() => {
aria-hidden="true" aria-hidden="true"
class="h-4 w-4 {annotateMode ? 'invert' : ''}" 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> </button>
{/if} {/if}
{#if canWrite} {#if canWrite}
<a <a
href="/documents/{doc.id}/edit" 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" 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 <img
@@ -126,7 +129,7 @@ const compactMeta = $derived.by(() => {
aria-hidden="true" aria-hidden="true"
class="h-4 w-4" class="h-4 w-4"
/> />
{m.btn_edit()} <span class="hidden sm:inline">{m.btn_edit()}</span>
</a> </a>
{/if} {/if}