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:
@@ -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}
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user