z-index set by Quarto breaks modals when `page-layout: full`

[mcanouil]

Bug description

Quarto sets various SASS variables to redefine z-index of several Bootstrap components

• quarto-cli/src/resources/formats/html/bootstrap/dist/scss/_variables.scss

  Lines 1141 to 1151 in c1c5a43

  	$zindex-dropdown: 1000 !default;
  	$zindex-sticky: 1020 !default;
  	$zindex-fixed: 1030 !default;
  	$zindex-offcanvas-backdrop: 1040 !default;
  	$zindex-offcanvas: 1045 !default;
  	$zindex-modal-backdrop: 1050 !default;
  	$zindex-modal: 1055 !default;
  	$zindex-popover: 1070 !default;
  	$zindex-tooltip: 1080 !default;
  	$zindex-toast: 1090 !default;
  	// scss-docs-end zindex-stack

But either something is wrongly set or is not set for when page-layout: full.

Steps to reproduce

---
title: "Reproducible Quarto Document"
format: html
page-layout: full
engine: markdown
---

Here is a modal:

```{=html}
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">
  Launch demo modal
</button>

<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h1 class="modal-title fs-5" id="exampleModalLabel">Modal title</h1>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>
```

{{< lipsum 1 >}}

Actual behavior

Screen.Recording.2025-03-16.at.20.00.40.mov

Expected behavior

Screen.Recording.2025-03-16.at.20.01.14.mov

Your environment

No response

Quarto check output

Quarto 99.9.9
[✓] Checking environment information...
      Quarto cache location: /Users/mcanouil/Library/Caches/quarto
[✓] Checking versions of quarto binary dependencies...
      Pandoc version 3.4.0: OK
      Dart Sass version 1.85.1: OK
      Deno version 1.46.3: OK
      Typst version 0.11.0: OK
[✓] Checking versions of quarto dependencies......OK
[✓] Checking Quarto installation......OK
      Version: 99.9.9
      commit: c1c5a4308f77fa2674082f41be12446cdcf415fd
      Path: /Users/mcanouil/Projects/quarto/quarto-cli/package/dist/bin

[✓] Checking tools....................OK
      TinyTeX: v2025.03
      Chromium: (not installed)

[✓] Checking LaTeX....................OK
      Using: TinyTex
      Path: /Users/mcanouil/Library/TinyTeX/bin/universal-darwin
      Version: 2024

[✓] Checking Chrome Headless....................OK
      Using: Chrome found on system
      Path: /Applications/Brave Browser.app/Contents/MacOS/Brave Browser
      Source: QUARTO_CHROMIUM

[✓] Checking basic markdown render....OK

[✓] Checking Python 3 installation....OK
      Version: 3.13.1
      Path: /Users/mcanouil/Projects/quarto/quarto-playground/.venv/bin/python3
      Jupyter: 5.7.2
      Kernels: julia-1.11, python3

[✓] Checking Jupyter engine render....OK

(/) Checking R installation...........ℹ R version 4.4.3 (2025-02-28)
! Config '~/.Rprofile' was loaded!
[✓] Checking R installation...........OK
      Version: 4.4.3
      Path: /Library/Frameworks/R.framework/Resources
      LibPaths:
        - /Users/mcanouil/Projects/quarto/quarto-playground/renv/library/macos/R-4.4/aarch64-apple-darwin20
        - /Users/mcanouil/Library/Caches/org.R-project.R/R/renv/sandbox/macos/R-4.4/aarch64-apple-darwin20/f7156815
      knitr: 1.49
      rmarkdown: 2.29

[✓] Checking Knitr engine render......OK

[cderv]

Quarto sets various SASS variables to redefine z-index of several Bootstrap components

The file you show is directly coming from boostrap
https://github.com/twbs/bootstrap/blob/0a56558b5fd34f8e11167202ed7bdca4f6a77d2f/scss/_variables.scss#L1132-L1143
We get it through BSLIB
https://github.com/rstudio/bslib/blob/b7a02e785a12f2d75d3e12113353d8529019ace2/inst/lib/bs5/scss/_variables.scss#L1135-L1151

Those values are not tweaked by Quarto, but it seems quarto adds others

quarto-cli/src/resources/formats/html/_quarto-rules.scss

Lines 28 to 30 in 64e9791

	.zindex-bottom {
	z-index: -1 !important;
	}

and custom ones

quarto-cli/src/resources/formats/html/bootstrap/_bootstrap-variables.scss

Line 188 in 64e9791

$zindex-pagelayout: 998;

used a lot in _boostrap-rules.scss, which is a quarto made file applying when boostrap is used.

So maybe something in there. I am curious if this is a regression 🤔

I'll have a look

[cderv]

The problem seems to be this element

<div class="modal-backdrop fade show"></div>

It gets this CSS

--bs-backdrop-zindex: 1050;
z-index: var(--bs-backdrop-zindex);

but that it still supposed to be below the one from the modal div

--bs-modal-zindex: 1055;
z-index: var(--bs-modal-zindex);

However, the overlay does not have point-events: none, but more importantly the modal with the button is not above the overlay when page-layout: full . 🤔 The problem seems to be regarding layer context.

I still didn't isolate the impact of page-layout