fix: plot module header height with cards = TRUE

dev/screenshots/header-demo.R

@@ -0,0 +1,66 @@
+## Demo for the plotmodule header height fix.
+## Left: plain PlotModuleUI. Right: PlotModuleUI(cards = TRUE), whose spliced
+## nav bar drags bslib's .card-header min-height: 2.5rem into the header.
+library(shiny)
+devtools::load_all(quiet = TRUE) ## run from the package root
+
+ui <- bigPage(
+  title = "plotmodule header",
+  navbar = navbar(tags$b("plotmodule header height"), center = NULL, left = NULL),
+  sidebar = sidebar("Menu", sidebarItem("Demo", "demo-tab")),
+  settings = settings("Settings"),
+  bigTabs(
+    bigTabItem(
+      "demo-tab",
+      bslib::layout_columns(
+        col_widths = c(6, 6),
+        row_heights = list("400px"),
+        class = "p-3",
+        PlotModuleUI(
+          "plain",
+          title = "Plain header (cards = FALSE)",
+          info.text = "A normal plot module header.",
+          plotlib = "base",
+          download.fmt = c("png", "pdf"),
+          height = c(360, 800)
+        ),
+        PlotModuleUI(
+          "tabbed",
+          title = "Tabbed header (cards = TRUE)",
+          info.text = "Header with the spliced navset_card_pill nav bar.",
+          plotlib = c("base", "base"),
+          cards = TRUE,
+          card_names = c("Histogram", "Density"),
+          download.fmt = c("png", "pdf"),
+          height = c(360, 800)
+        )
+      )
+    )
+  )
+)
+
+server <- function(input, output, session) {
+  PlotModuleServer("plain",
+    plotlib = "base",
+    func = function() {
+      hist(faithful$waiting, breaks = 20, col = "#3181de", border = "white",
+           main = "", xlab = "waiting time (min)")
+    }
+  )
+  PlotModuleServer("tabbed",
+    plotlib = "base", card = 1,
+    func = function() {
+      hist(faithful$eruptions, breaks = 20, col = "#86A563", border = "white",
+           main = "", xlab = "eruption time (min)")
+    }
+  )
+  PlotModuleServer("tabbed",
+    plotlib = "base", card = 2,
+    func = function() {
+      plot(density(faithful$eruptions), col = "#E45C00", lwd = 2, main = "",
+           xlab = "eruption time (min)")
+    }
+  )
+}
+
+shinyApp(ui, server, options = list(port = 8080, launch.browser = FALSE))

scss/modules/_navbar.scss

@@ -50,7 +50,7 @@ html {
   }
 
   ul.nav.navbar-nav > li > a {
-    padding: 0px 6px 1px 6px;
+    padding: 0px 6px 0px 6px;
     color: grey;
     background-color: #e7eaed;
     border-radius: 5px;

scss/modules/_plotmodule.scss

@@ -14,8 +14,15 @@ html {
     // the gsub misses and card-header survives, nesting a full 33px card header
     // inside the header. Neutralise it here: class-order independent, unlike the
     // gsub.
+    //
+    // min-height matters as much as height: bslib's own
+    // `.bslib-card .card-header` sets min-height: 2.5rem, which height:auto does
+    // not defeat. Left in, it floors the spliced nav at 40px around a 24px pill
+    // bar, so any plot module built with cards = TRUE (the dynamic/static
+    // toggles) renders a ~51px header where a plain one is ~32px.
     .plotmodule-header .card-header {
         height: auto;
+        min-height: 0;
         padding: 0;
     }
 

scss/modules/_settings.scss

@@ -4,7 +4,6 @@
   height: auto;
   width: 12rem;
   padding: 0;
-  padding-top: 10px;
   border-left: 1px solid $light-grey;
   background-color: aliceblue;
 }

scss/modules/_sidebar.scss

@@ -9,7 +9,6 @@
   height: auto;
   width: 12rem;
   padding: 0;
-  padding-top: 10px;
   border-right: 1px solid $light-grey;
   background-color: aliceblue;
   position: relative;