bug: Nested sidebar collapse toggle position on mobile

[gadenbuie]

In the following app, the second and third nested sidebar toggle buttons have a little too much inline padding on mobile screens:

library(shiny)
library(bslib)

ui <- page_sidebar(
    sidebar = sidebar("Sidebar 1", bg = "#f8f8f8"),
    layout_sidebar(
        sidebar = sidebar("Sidebar 2", bg = "#f8f8f8"),
        class = "p-0",
        layout_sidebar(
            sidebar = sidebar("Sidebar 2", bg = "#f8f8f8"),
            "Main content"
        )
    ),
    padding = 0
  )

server <- function(input, output, session) {
  # Server logic goes here
}

shinyApp(ui, server)

Desktop	Mobile

[gadenbuie]

The problem is that the outer sidebar is a page-level sidebar and we tweak the icon position slightly

bslib/inst/components/scss/page_fillable.scss

Lines 39 to 41 in f90d6b8

	> .collapse-toggle {
	left: calc(var(--_icon-size) / 2);
	}

That was done in #908 and IIRC the intention was for the mobile collapse toggle button to have consistent spacing with the rest of the page:

With adjustment	Without

Example shinylive app