As to the mock-up, the plan is to have the badges at the end of a line / after the page name input box in order to be able to prevent jitters when toggling edit mode. This, of course, is effective only if the space for the "remove" button is reflected by white space in non-edit mode. However, applying that order involves some technical complexity.

Using CSS flexbox, the mock-up could just be adapted "as is". However, due to the lack of compatibility, this options is disregarded. (Sensible) options from a technical perspective:

• Leave the badges left to the page name: When toggling edit mode, the page name of every link that has no badge yet has to be shifted to the right to allow rendering the badge placeholder. Caveats: Toggling edit mode causes quite some layout movement. When shifting with an animation, there is some (small) performance impact when toggling edit mode. That, however, might have some implications when toggling edit mode for a long list of site links.
• Put the badges to the end of the line: "text-overflow: ellipsis;" may not be used in non-JS as the badges would disappear on long page names. As soon as JavaScript kicks in, long page names are shortened similar to what "text-overflow: ellipsis;" does but badges are left visible. Caveats: Some jitter when JavaScript initializes, some more work than the other option, (small) performance impact when loading (which should be very small as soon as site links are collapsed to preferred ones when loading a page).

The decision should, of course, also depend on where the badges actually make most sense to put. Before the page name, the badges might be easier to scan/read as their offset does not depend on the length of the page name. However, badges are applied TO pages. The flow of specifying the page first and assigning badges afterwards probably feels more natural.

Quickly discussed this. Decision: Let's put badges at the end of the line.