In read mode, to position the section edit links exactly where we want them to be, the headings are wrapped in another element with display: table.
In edit mode we can't use display: table, because it causes issues with the editable surface in iOS Safari (T202991). We replicate the same effect using other CSS properties, but as you noticed, the effect is not perfectly identical. We discussed this briefly in code review of https://gerrit.wikimedia.org/r/c/mediawiki/extensions/MobileFrontend/+/489379 but at the time decided that it was good enough. We could certainly revisit it, it should not be difficult to fix, just tedious.
Read mode | Edit mode |
---|---|