Enhance iframe styling and prevent scrollbars in interactive HTML plot

e-kotov · e-kotov · commit 91473eae46c5 · 2026-05-26T15:33:26.000+02:00
diff --git a/.github/workflows/data-availability-plot.yaml b/.github/workflows/data-availability-plot.yaml
@@ -89,7 +89,7 @@ jobs:
               '<iframe class="data-availability-plot" ',
               'src="data-availability/data_availability.html" ',
               'title="Dates for which origin-destination data is available" ',
-              'loading="lazy" style="width:100%;height:520px;border:0;"></iframe>'
+              'loading="lazy" scrolling="no" style="width:100%;aspect-ratio:10/6.2;border:0;overflow:hidden;"></iframe>'
             )
             patched <- sub(pattern, iframe, html, perl = TRUE)
             if (!identical(patched, html)) {
diff --git a/tools/generate_data_availability_plot.R b/tools/generate_data_availability_plot.R
@@ -414,5 +414,31 @@ if (requireNamespace("ggiraph", quietly = TRUE) && requireNamespace("htmlwidgets
   # Save to standalone interactive HTML
   html_output_path <- file.path(output_dir, "data_availability.html")
   htmlwidgets::saveWidget(x, html_output_path, selfcontained = TRUE)
+  
+  # Prevent scrollbars in iframes by forcing absolute responsive sizing on html, body, and svg
+  if (file.exists(html_output_path)) {
+    html_content <- readLines(html_output_path, warn = FALSE)
+    
+    # Inject CSS styles in head
+    css_styles <- paste0(
+      "<head>\n<style>\n",
+      "  html, body {\n",
+      "    margin: 0 !important;\n",
+      "    padding: 0 !important;\n",
+      "    width: 100% !important;\n",
+      "    height: 100% !important;\n",
+      "    overflow: hidden !important;\n",
+      "  }\n",
+      "  svg {\n",
+      "    width: 100% !important;\n",
+      "    height: 100% !important;\n",
+      "  }\n",
+      "</style>"
+    )
+    
+    html_content <- gsub("<head>", css_styles, html_content, fixed = TRUE)
+    writeLines(html_content, html_output_path, useBytes = TRUE)
+  }
+  
   cat("Interactive plot saved to:", html_output_path, "\n")
 }

Original file line number	Diff line number	Diff line change
`@@ -89,7 +89,7 @@ jobs:`
`89`	`89`	`'<iframe class="data-availability-plot" ',`
`90`	`90`	`'src="data-availability/data_availability.html" ',`
`91`	`91`	`'title="Dates for which origin-destination data is available" ',`
`92`		`- 'loading="lazy" style="width:100%;height:520px;border:0;"></iframe>'`
	`92`	`+ 'loading="lazy" scrolling="no" style="width:100%;aspect-ratio:10/6.2;border:0;overflow:hidden;"></iframe>'`
`93`	`93`	`)`
`94`	`94`	`patched <- sub(pattern, iframe, html, perl = TRUE)`
`95`	`95`	`if (!identical(patched, html)) {`