How to move expand button in bslib::card() where full_screen = TRUE to the top right?

Question

I have a shiny app where I've placed a table within a bslib::card().

I want this table to be expandable so I've added the parameter full_screen = TRUE.

By default the "expand" button is placed on the bottom right.

How can I edit my code to place this button on the top right (or even top left) of the card instead?

Here is some reproducible code:

library(shiny)
library(bslib)

# Define UI
ui <- fluidPage(
  theme = bs_theme(bootswatch = "minty"),
  titlePanel("Table in a card()"),
  
  sidebarLayout(
    sidebarPanel(
      textInput("filter_name", "Filter by Name", ""),
    ),
    
    mainPanel(
      card(
        title = "Data Table",
        full_screen = TRUE,
        tableOutput("mytable")
      )
    )
  )
)

# Define server logic
server <- function(input, output) {
  # Generate sample data
  data <- data.frame(
    Name = c("John", "Jane", "Alice", "Bob", "Charlie", "David"),
    Age = c(25, 30, 35, 40, 45, 50),
    Score = c(80, 75, 90, 85, 88, 92)
  )
  
  # Render table
  output$mytable <- renderTable({
    filtered_data <- data
    if (!is.null(input$filter_name) && input$filter_name != "") {
      filtered_data <- data[data$Name == input$filter_name, ]
    }
    filtered_data
  })
}

# Run application
shinyApp(ui = ui, server = server)

Answer 1

Insert the following style into your fluidPage:

  tags$head(tags$style(
    HTML(
      "
        .bslib-full-screen-enter {
          bottom: var(--bslib-full-screen-enter-bottom);
        }
      "
    )
  )), 

If you want to have it on the top left, also add

right: var(--bslib-full-screen-enter-right);