`sidebar()` in `page_navbar()` adds gaps/padding

[jmbarbone]

Describe the problem

Adding a sidebar() to page_navbar() seems to add back (? or ignore?) the gap removals. In comparison, this seems to work (or work as I expect it) with layout_sidebar().

library(bslib)
make_page <- function(sidebar = NULL) {
  page_navbar(
    title = "navbar title",
    sidebar = sidebar,
    gap = 0,
    padding = 0,
    nav_panel(
      title = "panel title", 
      navset_card_tab(
        title = "title", 
        nav_panel("title", card("hello"))
      )
    )
  )
}

make_page()
make_page(sidebar(open = FALSE))

# compared to...
layout_sidebar(
  title = "title",
  sidebar = sidebar(),
  card(card_header("header"), "body"),
  gap = 0,
  padding = 0
)

make_page()

make_page(sidebar(open = FALSE))

compared to ...


Session Info

─ Session info ─────────────────────────────────────────────────────────────
 setting  value
 version  R version 4.3.1 (2023-06-16)
 os       Ubuntu 22.04.3 LTS
 system   x86_64, linux-gnu
 ui       X11
 language (EN)
 collate  en_US.UTF-8
 ctype    en_US.UTF-8
 tz       America/New_York
 date     2023-08-23
 pandoc   2.9.2.1 @ /usr/bin/pandoc

─ Packages ─────────────────────────────────────────────────────────────────
 package     * version    date (UTC) lib source
 bsicons       0.1.1      2023-08-11 [1] CRAN (R 4.3.1)
 bslib       * 0.5.1.9000 2023-08-23 [1] Github (rstudio/bslib@a4e487c)
 cachem        1.0.8      2023-05-01 [1] CRAN (R 4.3.1)
 callr         3.7.3      2022-11-02 [1] CRAN (R 4.3.1)
 cli           3.6.1      2023-03-23 [1] CRAN (R 4.3.1)
 crayon        1.5.2      2022-09-29 [1] CRAN (R 4.3.1)
 devtools      2.4.5      2022-10-11 [1] CRAN (R 4.3.1)
 digest        0.6.33     2023-07-07 [1] CRAN (R 4.3.1)
 ellipsis      0.3.2      2021-04-29 [1] CRAN (R 4.3.1)
 fastmap       1.1.1      2023-02-24 [1] CRAN (R 4.3.1)
 fs            1.6.3      2023-07-20 [1] CRAN (R 4.3.1)
 glue          1.6.2      2022-02-24 [1] CRAN (R 4.3.1)
 htmltools     0.5.6      2023-08-10 [1] CRAN (R 4.3.1)
 htmlwidgets   1.6.2      2023-03-17 [1] CRAN (R 4.3.1)
 httpuv        1.6.11     2023-05-11 [1] CRAN (R 4.3.1)
 jquerylib     0.1.4      2021-04-26 [1] CRAN (R 4.3.1)
 jsonlite      1.8.7      2023-06-29 [1] CRAN (R 4.3.1)
 later         1.3.1      2023-05-02 [1] CRAN (R 4.3.1)
 lifecycle     1.0.3      2022-10-07 [1] CRAN (R 4.3.1)
 magrittr      2.0.3      2022-03-30 [1] CRAN (R 4.3.1)
 memoise       2.0.1      2021-11-26 [1] CRAN (R 4.3.1)
 mime          0.12       2021-09-28 [1] CRAN (R 4.3.1)
 miniUI        0.1.1.1    2018-05-18 [1] CRAN (R 4.3.1)
 pkgbuild      1.4.2      2023-06-26 [1] CRAN (R 4.3.1)
 pkgload       1.3.2.1    2023-07-08 [1] CRAN (R 4.3.1)
 prettyunits   1.1.1      2020-01-24 [1] CRAN (R 4.3.1)
 processx      3.8.2      2023-06-30 [1] CRAN (R 4.3.1)
 profvis       0.3.8      2023-05-02 [1] CRAN (R 4.3.1)
 promises      1.2.1      2023-08-10 [1] CRAN (R 4.3.1)
 ps            1.7.5      2023-04-18 [1] CRAN (R 4.3.1)
 purrr         1.0.2      2023-08-10 [1] CRAN (R 4.3.1)
 R6            2.5.1      2021-08-19 [1] CRAN (R 4.3.1)
 Rcpp          1.0.11     2023-07-06 [1] CRAN (R 4.3.1)
 remotes       2.4.2.1    2023-07-18 [1] CRAN (R 4.3.1)
 rlang         1.1.1      2023-04-28 [1] CRAN (R 4.3.1)
 sass          0.4.7      2023-07-15 [1] CRAN (R 4.3.1)
 sessioninfo   1.2.2      2021-12-06 [1] CRAN (R 4.3.1)
 shiny         1.7.5      2023-08-12 [1] CRAN (R 4.3.1)
 stringi       1.7.12     2023-01-11 [1] CRAN (R 4.3.1)
 stringr       1.5.0      2022-12-02 [1] CRAN (R 4.3.1)
 urlchecker    1.0.1      2021-11-30 [1] CRAN (R 4.3.1)
 usethis       2.2.2      2023-07-06 [1] CRAN (R 4.3.1)
 vctrs         0.6.3      2023-06-14 [1] CRAN (R 4.3.1)
 xtable        1.8-4      2019-04-21 [1] CRAN (R 4.3.1)

 [1] /home/jordan/R/x86_64-pc-linux-gnu-library/4.3
 [2] /usr/local/lib/R/site-library
 [3] /usr/lib/R/site-library
 [4] /usr/lib/R/library

────────────────────────────────────────────────────────────────────────────

[davos-i]

I'm also having this problem. This is an example on shinylive

If sidebar = is commented out, the 3px padding is applied. When there is a sidebar it looks like padding is added back, but it seems that the 3px padding is still added to the div style, but there is another div that it sits in that adds a different padding. For example, this is the html from the 2 different scenarios - in both the style="--bslib-navbar-margin:0;padding:3px;" is added:

# This works (when no sidebar)        
<div class="container-fluid html-fill-item html-fill-container">
      <div class="tab-content html-fill-item html-fill-container" data-tabsetid="7391">
        <div class="tab-pane active html-fill-item html-fill-container bslib-gap-spacing" data-value="Page1" id="tab-7391-1" style="--bslib-navbar-margin:0;padding:3px;" role="tabpanel">
          <div class="card bslib-card bslib-mb-spacing html-fill-item html-fill-container" data-require-bs-caller="card()" data-require-bs-version="5">

# This adds space around the tab-pane that is not controlled by padding argument in page_navbar()      
<div class="html-fill-item html-fill-container">
      <div class="bslib-sidebar-layout bslib-mb-spacing html-fill-item" data-bslib-sidebar-border="false" data-bslib-sidebar-border-radius="false" data-bslib-sidebar-open="desktop" data-require-bs-caller="layout_sidebar()" data-require-bs-version="5" style="--_sidebar-width: 250px; --_mobile-max-height: 250px; --_js-toggle-count-this-side: 0; --_js-toggle-count-max-side: 1;">
        <div class="main bslib-gap-spacing html-fill-container">
          <div class="tab-content html-fill-item html-fill-container" data-tabsetid="8075">
            <div class="tab-pane active html-fill-item html-fill-container bslib-gap-spacing" data-value="Page1" id="tab-8075-1" style="--bslib-navbar-margin:0;padding:3px;" role="tabpanel">
              <div class="card bslib-card bslib-mb-spacing html-fill-item html-fill-container" data-require-bs-caller="card()" data-require-bs-version="5">

Adding the padding style to this line makes it look correct in browser developer tools:

<div class="main bslib-gap-spacing html-fill-container" style="    padding: 3px;   ">

Another related issue, it seems that using padding = 3 will fail in this example, but padding = '3px' works - I don't think this is expected behaviour, as both work in layout_sidebar().

[gadenbuie]

Thanks @davos-i, I just submitted a PR to fix the difference between page_navbar(padding=3) and layout_sidebar(padding=3) in #991.

We'll have to think about the best way to handle padding from page_navbar(). To summarize and provide a bit of context, in the following example, padding is applied to the .tab-content container holding the nav_panel() contents:

ui <- page_navbar(
  padding = '48px',
  nav_panel("Page1",card("text"))
)

When a global sidebar is included, we insert a layout_sidebar() and put the tab contents in the main area of the sidebar. The padding goes to the same place but the tab contents are now inside the layout_sidebar().

ui <- page_navbar(
  padding = '48px',
  sidebar = sidebar('sidebar text'),
  nav_panel("Page1",card("text"))
)

You're right that there's an extra element adding its own padding, which is the layout_sidebar(). One possible solution would be to pass padding to layout_sidebar() when a global sidebar is added. I think this would solve your problem and keep the behavior most people expect. I'm not sure how difficult that would be, though, but we'll look into it.