fix modal backdrop buttons fixed

[jonasdekeukelaere]

While a modal is open, the fixed button bar (.buttons-fixed, z-index 2000) stayed above the modal backdrop (z-index 1040), so it wasn't dimmed and stayed clickable.

• Under .modal-open, .buttons-fixed drops to $zindex-modal-backdrop - 1 (1039), so the backdrop covers it.
• Removes the dead .modal-backdrop.in { z-index: 9999999 } rule: .in is a Bootstrap 3 class and never matches in Bootstrap 5. Switching it to .show would have put the backdrop above the modal itself.
• DESIGN.md z-index section updated.

Summary by Sourcery

Prevent fixed button bars from appearing above or remaining clickable through modal backdrops.

Bug Fixes:

• Ensure fixed button bars are covered and non-interactive while a modal is open by placing them below the modal backdrop.

Documentation:

• Update the z-index design documentation to describe the modal-open layering behavior for fixed buttons.

[sourcery-ai]

Reviewer's guide (collapsed on small PRs)

Reviewer's Guide

Fixes modal backdrop behavior by lowering .buttons-fixed below the backdrop during modal display, removes an ineffective Bootstrap 3 selector, and documents the updated z-index rules.

Flow diagram for modal backdrop stacking behavior

flowchart TD
    A[Modal opens] --> B[.modal-open applies]
    B --> C[.buttons-fixed z-index becomes 1039]
    C --> D[Modal backdrop z-index 1040]
    D --> E[Backdrop covers fixed buttons]

Loading

File-Level Changes

Change	Details	Files
Lower the fixed button bar beneath the modal backdrop while a modal is open.	Add a .modal-open .buttons-fixed override using $zindex-modal-backdrop - 1 (1039), preventing the bar from remaining visible and clickable above the backdrop. Remove the obsolete Bootstrap 3 .modal-backdrop.in z-index override.	assets/scss/components/_modal.scss
Document the modal-state stacking behavior in the design system.	Clarify that .buttons-fixed normally uses z-index 2000 but is lowered while .modal-open so the backdrop covers it.	DESIGN.md

---

Tips and commands

Interacting with Sourcery

• Trigger a new review: Comment @sourcery-ai review on the pull request.
• Continue discussions: Reply directly to Sourcery's review comments.
• Generate a GitHub issue from a review comment: Ask Sourcery to create an
  issue from a review comment by replying to it. You can also reply to a
  review comment with @sourcery-ai issue to create an issue from it.
• Generate a pull request title: Write @sourcery-ai anywhere in the pull
  request title to generate a title at any time. You can also comment
  @sourcery-ai title on the pull request to (re-)generate the title at any time.
• Generate a pull request summary: Write @sourcery-ai summary anywhere in
  the pull request body to generate a PR summary at any time exactly where you
  want it. You can also comment @sourcery-ai summary on the pull request to
  (re-)generate the summary at any time.
• Generate reviewer's guide: Comment @sourcery-ai guide on the pull
  request to (re-)generate the reviewer's guide at any time.
• Resolve all Sourcery comments: Comment @sourcery-ai resolve on the
  pull request to resolve all Sourcery comments. Useful if you've already
  addressed all the comments and don't want to see them anymore.
• Dismiss all Sourcery reviews: Comment @sourcery-ai dismiss on the pull
  request to dismiss all existing Sourcery reviews. Especially useful if you
  want to start fresh with a new review - don't forget to comment
  @sourcery-ai review to trigger a new review!

Customizing Your Experience

Access your dashboard to:

• Enable or disable review features such as the Sourcery-generated pull request
  summary, the reviewer's guide, and others.
• Change the review language.
• Add, remove or edit custom review instructions.
• Adjust other review settings.

Getting Help

• Contact our support team for questions or feedback.
• Visit our documentation for detailed guides and information.
• Keep in touch with the Sourcery team by following us on X/Twitter, LinkedIn or GitHub.

[sourcery-ai]

Hey - I've found 1 issue

Prompt for AI Agents

Please address the comments from this code review:

## Individual Comments

### Comment 1
<location path="assets/scss/components/_modal.scss" line_range="3-4" />
<code_context>
-  z-index: 9999999;
+// .buttons-fixed sits at z-index 2000, above the modal backdrop; drop it below the backdrop while a modal is open.
+.modal-open .buttons-fixed {
+  z-index: $zindex-modal-backdrop - 1;
 }

 .modal-content {
</code_context>
<issue_to_address>
**Buttons reappear over remaining modal**

When a second modal is opened before the first has finished closing, and the first hides while the second remains visible, bootstrap removes `modal-open` when either modal finishes hiding, even if another modal is still visible, so this selector stops lowering `.buttons-fixed` and the bar sits above the remaining backdrop, clickable through it.

Keep the fixed bar below the backdrop for as long as any modal remains visible, or prevent overlapping modals.
</issue_to_address>

Sourcery assessment

Approval pending. 1 finding to address first.

Blocking findings: assets/scss/components/_modal.scss:4

---

Sourcery is free for open source - if you like our reviews please consider sharing them ✨

• X
• Mastodon
• LinkedIn
• Facebook