| Alice.moutinho | |
| Jan 6 2026, 3:38 PM |
| F71510707: image.png | |
| Jan 12 2026, 6:01 PM |
| F71482451: image.png | |
| Jan 9 2026, 5:24 PM |
| F71482349: image.png | |
| Jan 9 2026, 5:24 PM |
| F71482300: image.png | |
| Jan 9 2026, 5:24 PM |
| F71455483: Screenshot 2026-01-06 at 16.33.21.png | |
| Jan 6 2026, 3:38 PM |
Reduce header for "add reference" and "add qualifier", where they still have too much height. Also the font should be bold.
AC
| Subject | Repo | Branch | Lines +/- | |
|---|---|---|---|---|
| Reduce height and font in "minimal" modal headers | mediawiki/extensions/Wikibase | master | +2 -10 |
In investigating this, I found that we have at least 2 ways of creating modal headers. The ones with too much padding ("add qualifier", "add reference", "add statement", "add value") are using the "header" slot in WikibaseWbui2025ModalOverlay.
The padding for these headers are defined as: padding: @spacing-250 @spacing-75 @spacing-150 @spacing-75; (resulting in 40px on top, and 24 px on the bottom)
Here's a screenshot of the "add statement" modal, which is also affected:
Unlike "add qualifier" and "add reference" it does not have an "X" button to close it. Therefore, when the paddings are corrected to be 12px at the top, and 16px at the bottom, it looks like this, which is noticably shorter than the figma design. It's unclear to me whether this is desired.
One more complicating issue is that the "edit statement" modal (which I assume these modals are meant to match) has different paddings. It has 20px on the top and bottom, and 12px on the left and right:
Couple questions for @Alice.moutinho:
Change #1225622 had a related patch set uploaded (by Audrey Penven; author: Audrey Penven):
[mediawiki/extensions/Wikibase@master] Reduce height and font in "minimal" modal headers
On further investigation, I found that add reference and add qualifier are the only modals using the "minimal" style. Since the changes to this style can be easily isolated, I've made a commit that sticks to the original scope of this ticket. The broader question about consistency for all modal headers can be handled later, if necessary.
Here's a screenshot of the current adjustment:
Note that it is still taller than Figma specifies. This is due to Codex's minimum button size being 32px. This means the "X" cancel button is larger than the Figma-specified 20px.
Change #1225622 merged by jenkins-bot:
[mediawiki/extensions/Wikibase@master] Reduce height and font in "minimal" modal headers
Hi @AudreyPenven_WMDE , sorry i didnt see these comments before! The current adjustment looks fine to me :)