Leerzeichen in Firefox, aber nicht in Chrome im injizierten Bereich ⇐ HTML

[Guest]

Im Kontext einer Web-Erweiterung füge ich eine Schaltfläche in einen Textknoten ein. Es funktioniert auf Chrome, aber auf Firefox habe ich ein seltsames langes Leerzeichen im eingefügten Bereich (zwischen der Schaltfläche und dem nächsten Komma).
Was ich erwarte


alles Schön und ordentlich
Was ich eigentlich haben


langes Leerzeichen nach der Schaltfläche und vor dem Komma
Demo

Code: Select all

.inject-span {
display: inline-grid;
grid-template-columns: max-content fit-content(1ch);
gap: 0.5ch;
}

.inject-span button {
padding: 0;
aspect-ratio: 1;
height: 100%;
}

Code: Select all

John Doe Pablo Picasso


, Johnny FooBar

Ich suche nach einer möglichst kostenlosen js-Lösung