In common.css the summary marker, used in all the meta boxes, has font size 1.5em.
This is too big, because that only works if the browser zoom level is 100%. Using any zoom level lower than that, results in the marker getting its own line, both in the Dashboard as well as posts and pages.
I tested it by adding custom css to the admin footer and that keeps the triangle neatly inline on every zoom level: summary::marker { font-size: 1.25em !important; }
Took me a while to understand the issue. “summary marker” means: The open/close indicator of the widgets in the sidebar of the editor etc.
In Firefox latest: No (real) issue.
Its slightly misaligned (a few px above the top of the text) if I use the zoom out, but nothing like line breaks happening even when zooming out to the max.
BUT in Vivaldi (both latest and the one from a few months ago): Could replicate the issue!
The suggested CSS code fixes the issue, but as soon as you zoom out to the max, even 1.25em is too big. (!important is not required, there is no difference in max zoom-out with and without it).
Further debugging showed as what I initially thought is correct: An issue with an element taking up too much space (the title text) and thus forcing the indicator element / “summary marker” to a line break.
The issue is being caused by the div inside the element, its set to a static “width: 91%”, and the fix is to change the property to “max-width: 91%”.
That also allows for the original font size of 1.5em on the summary marker element.
I’m still not able to reproduce this locale on MacOS, but have looked at the proposed fix:
#poststuff .postbox-container summary > div {
max-width: 91%;
}
For me, this moves the buttons to move the meta box element up and down closer to the text rather than justified right. Does the fix still work if that CSS is added rather than edited:
I can’t reproduce the reported issue on either Firefox or Chrome on Linux. I suspect that there’s some other CSS at work on the site reported by @StonehengeCreations.
I also can’t replicate the issue on latest Chrome on Win 11.
But I do agree, the summary marker is too big, design wise. Changing it to 1.25em, or even 1em, looks better. I feel like this should be part of a larger change to include the right side padding and the other issues on the Dashboard.
When we were discussing the new widget format, we found that 1em was too small for accessibility purposes, so we won’t do that. But I’m open to going to 1.25em or 1.3em if there’s a consensus on one being better than 1.5em.
The issue noted by @Ciprian is one I’ve noticed myself. It’s trickier to get right because it’s affected by the width of the widget, but I have it on my to-do list.
