How to fix distorted interactive popup of ggplot figure in leaflet map

Question

Need help/advice on fixing distortion with the popup plots in html file. Changing the shape/size options within leaflet don't help. I suppose making this a ShinyApp might work better, but I prefer to output as html, with other results.

Good example:

I have made an interactive leaflet map, which looks great within RStudio. I can't generate the interactive feature on SO, but the plot will popup on click for each county of interest.

Problem example

When generated as html output (preferred result) the popup plots are distorted and not useable.

Reproducible code example

Here is sample code to generate a simple example:

# leaflet map exapmple
library(tidyverse)
library(leaflet)
library(leafpop) # provides popup option for leaflet map
library(sf)
library(tigris) # US Census map data
library(lubridate)


TN_data <- tigris::counties(state = "TN", cb = TRUE) # downloads shapes- need internet access 
TN_data_sf <- sf::st_as_sf(TN_data)

class(TN_data_sf)
# generate a random time-series dataset for each county
county_plots <-
  as_tibble(TN_data_sf) %>% 
  mutate(data = map(NAME,
                    ~tibble(date = seq.Date(from = ymd("2020/01/01"), 
                                            to = ymd("2020/05/01"),
                                            by = 7),
                            events = rnorm(18)))) %>% 
  # generate a ggplot time series plot for each county
  mutate(ggp = map2(data, NAME,
                       ~ggplot(data = .x) +
                         geom_col(aes(date, events), fill = "steelblue", alpha = 0.5) + 
                         labs(x=NULL,
                              y="Results by day",
                              title = glue::glue("{.y} County"),
                              subtitle = "New Results by Date Reported") + 
                         # scale_fill_manual(values = c("Cases" = "steelblue"),
                         #                   labels = c(paste0("Latest events: ", .x$events[.x$date == max(.x$date)]))) +
                         scale_y_continuous(expand = c(0,0)) +
                         scale_x_date(date_breaks = "7 days", date_labels = "%m/%d" ) +
                         theme(axis.text.x =  element_text(angle = 45, hjust = 1),
                               legend.position = "bottom")))

leaflet() %>% 
  addPolygons(data = TN_data_sf,
              group = "name",
              weight = 1,
              highlight = highlightOptions(
                weight = 5,
                color = "red",
                bringToFront = TRUE)) %>% 
  leafpop::addPopupGraphs(county_plots$ggp, 
                          group = "name", 
                          width = 600, height = 300)

for the Rmarkdown chunk, I included {r echo=TRUE, message=FALSE, warning=FALSE, out.width = '100%'}

Answer 1

A quick fix is to use the following CSS (e.g. at the beginnng of your RMarkdown):

<style>
.leaflet-popup-content > img {
    max-width: unset;
}
</style>

This property is set to 100% when creating an HTML document. When you run the code inside RStudio it is unset. Why? I am not sure...