When hovering the Leaflet attribution link that is shown by default on the bottom right of the map, the underline was extending to the space between the flag and the "Leaflet" text, which does not look very nice (see "before" screenshot below). This is fixed by:
Removing the space between the flag and the "Leaflet" text
Adding a margin-right that corresponds to the width of the removed space to the leaflet-attribution-flag CSS class
The value for the margin-right (0.277em) is based on measuring the width of the space using browser dev tools:
The font size for the attribution is 12px by default, i.e. 1px = 1/12em
The browser dev tools measured 3.333px width for the space
3.333px = 3.333/12em = 0.277em
Screenshots
Showing the bottom right corner of debug/tests/esm.html with Firefox responsive design mode at 820x620px with DPR 3.
When hovering the Leaflet attribution link that is shown by default on the bottom right of the map, the underline was extending to the space between the flag and the "Leaflet" text, which does not look very nice (see "before" screenshot below). This is fixed by:
leaflet-attribution-flagCSS classThe value for the margin-right (0.277em) is based on measuring the width of the space using browser dev tools:
Screenshots
Showing the bottom right corner of
debug/tests/esm.htmlwith Firefox responsive design mode at 820x620px with DPR 3.Before (main branch)
After (this PR)