Blank space in Firefox but not in Chrome in injected span

In the context of a web extension, I am injecting a button in a text node. It works on Chrome but on Firefox, I have some weird long blank in the injected span (between the button and the next comma).

What I expect

everything nice and tidy

What I actually have

long blank after button and before the comma

Demo

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

<div>John Doe <span class="inject-span"
  ><span>Pablo Picasso</span
  ><button type="button" title="Open information">
    <svg viewBox="0 0 24 24" width="100%" height="auto">
      <path
        style="fill: currentColor; fill-opacity: 1"
        d="m14.05 13.236 6.498 9.606L18.91 24l-6.905-9.47L5.1 24l-1.637-1.158 6.498-9.606L.553 9.22l.615-1.69 9.596 3.463L11.087 0h1.826l.323 10.993 9.596-3.462.615 1.69-9.387 4.015z"
      ></path>
    </svg></button
></span>, Johnny FooBar</div>

I am looking for a js free solution as much as possible

Solution

aspect-ratio and percentage height don't play well together. If you want to lay the button next to one line of text better use 1lh as a height

.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: 1lh;
  font: inherit; /* to make sure you get the same font properties */
}

<div>John Doe <span class="inject-span"
  ><span>Pablo Picasso</span
  ><button type="button" title="Open information">
    <svg viewBox="0 0 24 24" width="100%" height="auto">
      <path
        style="fill: currentColor; fill-opacity: 1"
        d="m14.05 13.236 6.498 9.606L18.91 24l-6.905-9.47L5.1 24l-1.637-1.158 6.498-9.606L.553 9.22l.615-1.69 9.596 3.463L11.087 0h1.826l.323 10.993 9.596-3.462.615 1.69-9.387 4.015z"
      ></path>
    </svg></button
></span>, Johnny FooBar</div>