Contrib.social

The title of a dialog modal is getting truncated in Umami

Open on Drupal.org →
Created on 14 June 2025, about 1 month ago

Problem/Motivation

During the review of ✨ Open the "discard changes" dialog in the off-canvas tray Active (in #40 ✨ Open the "discard changes" dialog in the off-canvas tray Active ) we've noticed that the title of dialog modals in Umami are getting truncated due to the styling:

If you replace the h1 wrapping the title of the dialog modal with a span with devtools, the title becomes fully legible:

Some context, until a few weeks ago, a span element was used for wrapping the title of dialog (modals) in jQuery UI in Drupal, which was semantically wrong and a problem for screenreader users. 📌 Update to jQuery 1.14.1 and use the newly added option for dialog modal headings Active solved that problem, for dialogs the span got replaced by h2s, and for dialog modals by h1s. In Claro that change caused no visual changes, but I was unaware that dialogs and dialog modals would be available for frontend themes like olivero and umami as well, and therefore have not tested for that detail, which lead to results seen in the screenshots. :/

Steps to reproduce

- apply MR11723 (#3223022] to a site using demo_umami
- create a layout in layout builder that is using demo_umami and click the discard button.

Proposed resolution

Adjust the styling for h1 and h2 in dialog titles so that the titles are don't get truncated

Remaining tasks

User interface changes

Introduced terminology

API changes

Data model changes

Release notes snippet

📌 Task
Status

Active

Version

11.0 🔥

Component

Umami demo

Created by

🇩🇪Germany rkoller Nürnberg, Germany

Live updates comments and jobs are added and updated live.
Sign in to follow issues

Merge Requests

Comments & Activities

contrib.social Blog FAQ Discussions
Production build 0.71.5 2024