Graticule labels malformed - using with React-leaflet

[rm-hull]

I've got this react code to wrap the grid lines

import { useEffect } from "react";
import { useMap } from "react-leaflet";
import AutoGraticule from "leaflet-auto-graticule";

export function GridlinesLayer() {
  const map = useMap();

  useEffect(() => {
    const graticule = new AutoGraticule({
      redraw: "moveend",
    }).addTo(map);

    return () => {
      map.removeLayer(graticule)
    };
  }, [map]);

  return null;
}

it results in labels that are not formatted correctly:

Any ideas? I'd be happy to take a look if you have any pointers?

Versions

package	version
leaflet	^1.9.4
leaflet-auto-graticule	^2.0.0
react	^19.2.4
react-leaflet	^5.0.0

Latest Chrome browser on MacOS Tahoe 26.3

[rm-hull]

Update: I've added the following CSS to my app:

.leaflet-grid-label .gridlabel-vert,
.leaflet-grid-label .gridlabel-horiz {
  width: 55px;
  background-color: greenyellow;
}

Setting the width fixes it (55px seems to be enough width to accommodate UK lat/lngs, but I doubt that would solve it for other parts of the world - my map is constrained to the UK only so this solves it for me). The green background was just a debug thing to show the extent of the divIcon.