Refactor header layout: replace position-absolute approach with CSS Grid for robust text centering

[plansombl]

Description

The current header implementation relies on position: absolute combined with a full-width container as a workaround to centre the header text alongside a button. While functional, this is a fragile approach — it has already surfaced issues (see #994) and is likely to cause similar layout regressions in the future as the UI evolves.

A more robust, semantic, and maintainable solution should be adopted. Two candidate approaches are outlined below.

---

Approach 1 — CSS Grid (Recommended)

Use a CSS Grid layout on the header container with:

• A smaller, auto-sized column for the back/action button
• A wider, flexible column (1fr) for the title text
• A mirror column on the right (same size as the button column) to keep the title truly centred
• The title centred within its column using text-align: center or justify-self: center

[ button col ] [ ——— title col (1fr) ——— ] [ mirror col ]

This means the title is always optically centred in the full header width without any absolute positioning, and the button sits naturally in its own lane.

Approach 2 — Flexbox with a spacer

Use display: flex on the header with:

• The button on the left
• The title with flex: 1 and text-align: center
• An invisible spacer element on the right with the same width as the button to counterbalance it

Both approaches eliminate absolute positioning entirely and scale gracefully if button sizes or text lengths change.

---

Reference

• Existing related issue: eID Wallet: Back button overlaps/collides with page headings on some screens #994

Acceptance Criteria

• The header no longer uses position: absolute or any full-width hacking to centre text
• The header title is visually and optically centred across all screen sizes, with or without a button present
• The chosen layout approach (Grid or Flexbox) is applied consistently to all header instances across the app
• No visual regressions are introduced on screens that currently use the header
• The solution generalises cleanly to similar header patterns throughout the app (e.g. back button + title, close button + title)

Desired Output (may vary)

A header component where:

• The action button (back, close, etc.) occupies a small, natural column/slot on the left
• The title text is centred relative to the full header width — not just the remaining space after the button
• No absolute positioning is involved
• The markup remains clean and the layout is easy to reason about for future contributors