add a CSS fix for leaflet to avoid wider CSS to apply

[cderv]

CSS conflict happened in Quarto context where a rule on .legend was applying to Leaflet own legend box

Context of the issue at

• R Leaflet legends are centered when labelled as fig-s quarto-dev/quarto-cli#7843

When adding figure caption for a leaflet in Quarto, this will add some CSS bootstrap rules to the document. One being:

.quarto-figure-center>figure>p, .quarto-figure-center>figure>div {
    text-align: center;
}

This rules has effect on text inside the leaflet object !

I believe there should be a fix in leaflet CSS so that a default alignment is made on the legend box.

This PR does that.

If this is ok fix with you, question: Should visual test be added ?

If you think this shouldn't be done in leaflet R package, this is also ok. We'll probably add a rule in Quarto to not apply the Figure CSS rules on content under div.html-widget objects

I just figured this could happen in other context without this CSS patch.

[gadenbuie]

Thanks @cderv! I think we'll wait to see how the upstream issue is resolved first. I'm not completely opposed to this change, but it feels like this might be just one of many issues that arise (even just in leaflet) from Quarto setting text-align: center on the .htmlwidget element.

[cderv]

we'll wait to see how the upstream issue is resolved first.

Agree with that. I did try a PR initially there too, but I suggested also in comment there a specific rule for mermaid (as it seems the rule was added for that)