better style for tabcard title when ribbon is present.

R/cards.R

@@ -1069,6 +1069,9 @@ bs4InfoBox <- function(title, value = NULL, subtitle = NULL, icon = shiny::icon(
 #'
 #' @note User will access the \link{tabBox} input with input$<id>_box. This allows
 #' to get the state of the box and update it on the server with \link{updateBox}.
+#' Don't forget that the title should not be too long, especially
+#' if you have more than 3 tabs and want the box to be collapsible,
+#' closable and maximizable, as these elements take extra horizontal space.
 #'
 #' @examples
 #' if (interactive()) {
@@ -1142,6 +1145,14 @@ bs4TabCard <- function(..., id = NULL, selected = NULL, title = NULL, width = 6,
                        sidebar = NULL, .list = NULL) {
   side <- match.arg(side)
   if (is.null(type)) type <- "pills"
+
+  # If the card has ribbon, we must apply more margin to the
+  # title when the tabs position is left (title right side).
+  body_items <- list(...)
+  has_ribbon <- unlist(lapply(body_items, function(item) {
+    if (item$attribs$class == "ribbon-wrapper") TRUE
+  }))
+  if (is.null(has_ribbon)) has_ribbon <- FALSE 
 
   # Build tabs
   content <- tabsetPanel(
@@ -1210,7 +1221,11 @@ bs4TabCard <- function(..., id = NULL, selected = NULL, title = NULL, width = 6,
   }
   boxTag$children[[1]]$children[[1]]$children[[1]] <- NULL
   titleNavTag <- shiny::tags$li(
-    class = if (side == "left") "pt-2 px-3 ml-auto" else "pt-2 px-3",
+    class = if (side == "left") {
+      if (has_ribbon) "pt-2 px-5 ml-auto" else "pt-2 px-3 ml-auto"
+    } else {
+      "pt-2 px-3"
+    },
     titleTag
   )