bug(mobile): document detail viewer takes full height — no space for document title on mobile #101

New Issue

marcel · 2026-03-27T12:21:46+01:00

marcel commented

2026-03-27 12:21:46 +01:00

Severity: Medium — context lost on mobile

On the document detail page at 375px, the document title ("E2E Hash Test — restore") is visible on desktop in the sub-header bar (Back | [title] | Annotate | Edit | ↓). On mobile this sub-header bar exists but it contains only the back/overflow/action buttons — the document title is not shown anywhere in the visible viewport.

The user has no way of confirming which document they are viewing without scrolling down to the Metadata tab and reading there.

Fix

On mobile, display the document title in the toolbar, between the back button and the action group. Truncate with text-ellipsis overflow-hidden if too long:

<!-- mobile toolbar layout -->
<div class="flex items-center gap-2 px-3 py-2">
  <button aria-label="Back">←</button>
  <span class="flex-1 truncate text-sm font-semibold text-brand-navy dark:text-white min-w-0">
    {{ document.title }}
  </span>
  <button aria-label="More actions">⋮</button>
  <button>Edit</button>
</div>

The title truncates cleanly and at least the first ~25 characters are visible, which is enough for identification. The document title is the most important piece of context and should always be visible.

## Severity: Medium — context lost on mobile On the document detail page at 375px, the document title ("E2E Hash Test — restore") is visible on desktop in the sub-header bar (`Back | [title] | Annotate | Edit | ↓`). On mobile this sub-header bar exists but it contains only the back/overflow/action buttons — the document title is not shown anywhere in the visible viewport. The user has no way of confirming which document they are viewing without scrolling down to the Metadata tab and reading there. --- ## Fix On mobile, display the document title in the toolbar, between the back button and the action group. Truncate with `text-ellipsis overflow-hidden` if too long: ```html  <div class="flex items-center gap-2 px-3 py-2"> <button aria-label="Back">←</button> <span class="flex-1 truncate text-sm font-semibold text-brand-navy dark:text-white min-w-0"> {{ document.title }} </span> <button aria-label="More actions">⋮</button> <button>Edit</button> </div> ``` The title truncates cleanly and at least the first ~25 characters are visible, which is enough for identification. The document title is the most important piece of context and should always be visible.

marcel added the ui label 2026-03-27 12:28:19 +01:00

marcel referenced this issue from a commit

2026-03-27 16:42:24 +01:00

fix(#101): stop bottom panel from overlapping document viewer

marcel closed this issue

2026-03-27 16:44:01 +01:00

Sign in to join this conversation.

1 Participants

Notifications

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: marcel/familienarchiv#101