Modal unreachable behind backdrop

[IzaacJ]

Describe the bug When a component containing a modal is placed inside the top-bar, the modal gets rendered behind the backdrop, making it impossible to interact with.

To Reproduce

Expected behavior A modal displaying above the backdrop.

Screenshots

Versions (please complete the following information):

• .NET Version: .NET 8
• BlazorBootstrap: 2.2.0
• Blazor WebAssembly / Server: Server
• Blazor Interactive Render Mode: Auto
• Blazor Interactivity Location: Global

Sample code

<!-- MainLayout.razor -->
<main>
    <div class="bb-top-row px-4 d-flex justify-content-end">
        <ComponentWithModal />
    </div>
    <article class="content px-4">
        <div class="py-2">@Body</div>
    </article>
</main>

<!--- ComponentWithModal.razor -->
<Modal @ref="ModalExample" Title="Modal Example Behind Backdrop">
    <HeaderTemplate>
        Modal Header
    </HeaderTemplate>
    <BodyTemplate>
        Modal Body
    </BodyTemplate>
</Modal>
<Button @onclick="OnButtonClick"><Icon Name="IconName.BuildingGear" /></Button>

@code {
    private Modal ModalExample { get; set; }

    private async Task OnButtonClick() {
        await ModalExample.ShowAsync();
    }
}

GitHub repo Setup an example here: https://github.com/izaacj/github-issues/tree/bb-modal

Desktop (please complete the following information):

• OS: MacOS 14.5
• Browser Safari
• Version 17.5

[gvreddy04]

Adding z-index: 1 to main area causes an active modal to sit behind its backdrop #39640

[gvreddy04]

@IzaacJ Update the top row div css class as below:

<div class="bb-top-row px-4 d-flex justify-content-end position-static">
    <ComponentWithModal />
</div>

Screenshot:

[IzaacJ]

That is only a partly working resolution, since the top-row stops being a top-row and scrolls with the content. What I decided to do instead is change the bb-top-row z-index to 1055, keeping it sticky, but visually appearing above the backdrop, although not interactable, while the actual modal is interactable.

Just added the css below to the app.css

.bb-top-row {
    z-index: 1055 !important;
}

Not a perfect workaround, but the top-row is kept sticky, which is more important in my case.