Stable Document Heading Layout

Goal

Prevent the document heading from jumping when edit capability resolves and metadata controls become available.

Context

The initial page can render the read-only DocumentHeader while edit permission is unresolved. After permission resolves, the editable header mounts. Its visually hidden metadata affordance row currently remains in normal flex layout, so it adds height and pushes the title down. Private and merged badges also occupy the same above-title region.

Design

Move Private and Merged document-status badges out of DocumentHeader and into a new generic status slot in DocumentTopBar. The slot appears immediately after the breadcrumbs, remains non-shrinking, and leaves the existing right-side action slot unchanged. Document status continues to be derived from visibility and version-head count in the resource page.

Make the editable title/metadata container a positioning context and absolutely position the desktop metadata affordance row immediately above the title. Its visible and hidden states then consume no layout height. Preserve its existing opacity transition, pointer accessibility, keyboard behavior, file inputs, and mobile Add menu.

Responsive Behavior

    Breadcrumbs remain the flexible, truncatable portion of the top bar.

    Status badges remain visible beside the breadcrumbs without joining the right-side action controls.

    Desktop metadata buttons float above the title without shifting it.

    Mobile continues to use the existing compact Add menu rather than the absolute desktop row.

Scope

Included:

    Moving Private and Merged badges to the document top bar.

    Removing document status badges from DocumentHeader.

    Absolutely positioning desktop metadata affordances.

    Regression tests for status placement and stable affordance layout.

Excluded:

    Changing edit-capability loading behavior.

    Redesigning breadcrumbs or top-bar actions.

    Changing metadata upload or edit behavior.

Verification

Automated tests will verify that the top bar renders status beside breadcrumbs, the document header no longer renders status badges, and the desktop affordance row is absolute. Manual verification will compare the heading position before and after edit capability resolves and on hover/focus of the editable heading.

Do you like what you are reading? Subscribe to receive updates.

Unsubscribe anytime