fix(#11242): keep mobile date tooltip on-screen

[binokaryg]

Description

On touch devices the date/time tooltip — the accessible way to reveal a relative date's full value — was clipped off-screen: only the tail of the string was readable (e.g. 5:30 AM instead of Tue, Jul 7th, 2026 at 5:30 AM). Most visible on the report detail "Submitted by …" line. Not language-specific — reproduced in English, Nepali, and Arabic (RTL).

Fixes #11242

Root cause. The touch tooltip was a CSS pseudo-element in webapp/src/css/tooltip.less ([title]:focus::before, with content: attr(title); desktop keeps the native title). It was anchored to a fixed edge (right: -10px, width: max-content), so it grew off the viewport, and it was also cropped by ancestor overflow: hidden scroll containers. No fixed CSS anchor can satisfy every case — the trigger can sit at either edge, the text can be wider than the space beside it, and RTL flips which edge is which. (A series of scoped CSS overrides was prototyped and each broke another context; see the issue thread.)

Fix. Replace the CSS pseudo-element with MobileTooltipDirective, which renders the title in a CDK overlay at the document level:

• positioned with a flexible strategy (withPush) so it stays inside the viewport regardless of the trigger's position, the text length, or the direction;
• rendered above the page, so it escapes ancestor overflow clipping;
• direction resolved from the trigger, so start/end placement and bidirectional text are correct in RTL.

It runs only on touch / no-hover devices (desktop is untouched — native title on hover). It's hosted on the webapp app root and on the cht-form root, and the old CSS mechanism (plus its per-context min-width / overflow: visible / first-row band-aids) is removed.

Why a document-level directive and not matTooltip? The date tooltips aren't real elements a directive can bind to — the date pipes (relativeDate, taskDueDate, …) build an HTML string with the title inside it, injected via [innerHTML] in 9 places, and Angular directives can't attach to innerHTML-injected DOM. Using matTooltip would mean converting that shared date rendering into a component, reworking the interval-based relative-date live-update (RelativeDateService.updateRelativeDates), updating the 9 call sites, and rewriting the pipe tests — a broad, higher-risk refactor of a path used everywhere dates appear. This directive instead reads the title already in the DOM via one listener, leaving the pipes, templates, and live-update untouched. CDK itself is already a first-class dependency (@angular/cdk in webapp/package.json; every modal uses MatDialog, which is CDK Overlay) — this is just the first place we use the Overlay API directly rather than through Material.

Behavior on touch:

• Focusing a date shows the tooltip — so a long-press peeks the full date without navigating.
• It dismisses on blur, on scroll, when the trigger is removed from the DOM (e.g. the sidebar last-sync span re-rendering on a sync), and — via an IntersectionObserver — when the trigger leaves the viewport. On a single-pane layout, opening a report from the list slides the still-focused list off-screen, so the tooltip clears instead of hovering over the report; on a two-pane layout the list (and the tooltip) stay put. Watching visibility rather than router navigation is deliberate: every list-row tap fires a navigation event whether the trigger stays on screen or not, so navigation was the wrong signal.

Code review checklist

• UI/UX backwards compatible: Test it works for the new design (enabled by default). And test it works in the old design, enable can_view_old_navigation permission to see the old design. Test it has appropriate design for RTL languages.
• Readable: Concise, well named, follows the style guide
• Tested: Unit and/or e2e where appropriate
• Backwards compatible: Works with existing data and configuration or includes a migration. Any breaking changes documented in the release notes.
• AI disclosure: Please disclose use of AI per the guidelines.

AI disclosure

Per the AI contribution guidelines:

• Tool: Claude Code (Anthropic).
• How it was used: investigating the clipping and its history, evaluating approaches (a CSS-anchor fix vs. the CDK overlay), implementing the directive and its tests, and iterating on the touch dismissal behavior. A code review of the directive (also AI-assisted) surfaced several issues — zone/CD cost, RTL wiring, dismissal on DOM-detach and scroll, and the cht-form gap — which were addressed. All changes were reviewed and tested by me.

License

The software is provided under AGPL-3.0. Contributions to this project are accepted under the same license.