How do you adjust the size of the popup when zooming into the map? I would like to have the popups get bigger when zooming in, and smaller when zooming out on a mobile device. Could you provide a sample code that does this? I am using Leaflet JS, not Shinyapp or the r package.

Can you also point out where I should make these adjustments (would it be leaflet.css or another file)?

I tried to adjust the leaflet.css file, like putting touch-action: pinch-zoom, but with no success:

.leaflet-popup {
    position: absolute;
    text-align: center;
    margin-bottom: 20px;
}
.leaflet-popup-content-wrapper {
    padding: 1px;
    text-align: left;
    border-radius: 12px;
}
.leaflet-popup-content {
    margin: 13px 19px;
    line-height: 1.4;
}
.leaflet-popup-content p {
    margin: 18px 0;
}

Thank you.