Пустое пространство в Firefox, но не в Chrome во введенном диапазоне ⇐ CSS

[Anonymous]

В контексте веб-расширения я добавляю кнопку в текстовый узел. Это работает в Chrome, но в Firefox у меня есть какой-то странный длинный пробел во введенном интервале (между кнопкой и следующей запятой).
Чего я ожидаю


все красиво и аккуратно
Что у меня есть на самом деле


длинный пробел после кнопки и перед запятой
Демо

Код: Выделить всё

.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%;
}

Код: Выделить всё

John Doe Pablo Picasso


, Johnny FooBar

Я ищу бесплатное решение на js, насколько это возможно

Подробнее здесь: https://stackoverflow.com/questions/793 ... ected-span