Implemented fix for multiple dialog scrolling issue

Co-authored-by: ArgoZhang <[email protected]>

Author: Copilot

src/BootstrapBlazor.Server/Components/Pages/TestScrollDialog.razor

@@ -0,0 +1,134 @@
+@page "/test-scroll-dialog"
+@using BootstrapBlazor.Server.Components.Components
+@inject DialogService DialogService
+
+<PageTitle>Test Scroll Dialog</PageTitle>
+
+<h1>Test Multiple Dialog Scrolling</h1>
+
+<p>This page tests the multiple dialog scrolling functionality.</p>
+
+<div class="mb-3">
+    <Button Text="Open First Dialog" OnClick="@OpenFirstDialog" />
+</div>
+
+@code {
+    private async Task OpenFirstDialog()
+    {
+        await DialogService.Show(new DialogOption()
+        {
+            Title = "First Dialog - Large Content",
+            IsScrolling = true,
+            Size = Size.Large,
+            BodyTemplate = builder =>
+            {
+                builder.OpenElement(0, "div");
+                builder.AddAttribute(1, "style", "height: 800px; padding: 20px;");
+                
+                builder.OpenElement(2, "h4");
+                builder.AddContent(3, "First Dialog Content");
+                builder.CloseElement();
+                
+                builder.OpenElement(4, "p");
+                builder.AddContent(5, "This is the first dialog with scrollable content. You should be able to scroll this content.");
+                builder.CloseElement();
+
+                // Add lots of content to make it scrollable
+                for (int i = 1; i <= 50; i++)
+                {
+                    builder.OpenElement(6 + i * 3, "p");
+                    builder.AddContent(7 + i * 3, $"Line {i}: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.");
+                    builder.CloseElement();
+                }
+                
+                // Add button to open second dialog
+                builder.OpenElement(200, "div");
+                builder.AddAttribute(201, "class", "mt-4");
+                builder.OpenComponent<Button>(202);
+                builder.AddAttribute(203, "Text", "Open Second Dialog");
+                builder.AddAttribute(204, "OnClick", Microsoft.AspNetCore.Components.EventCallback.Factory.Create(this, OpenSecondDialog));
+                builder.CloseComponent();
+                builder.CloseElement();
+                
+                builder.CloseElement();
+            }
+        });
+    }
+
+    private async Task OpenSecondDialog()
+    {
+        await DialogService.Show(new DialogOption()
+        {
+            Title = "Second Dialog - Also Scrollable",
+            IsScrolling = true,
+            Size = Size.Large,
+            BodyTemplate = builder =>
+            {
+                builder.OpenElement(0, "div");
+                builder.AddAttribute(1, "style", "height: 600px; padding: 20px;");
+                
+                builder.OpenElement(2, "h4");
+                builder.AddContent(3, "Second Dialog Content");
+                builder.CloseElement();
+                
+                builder.OpenElement(4, "p");
+                builder.AddAttribute(5, "style", "color: red; font-weight: bold;");
+                builder.AddContent(6, "THIS IS THE SECOND DIALOG - IT SHOULD BE SCROLLABLE TOO!");
+                builder.CloseElement();
+
+                // Add lots of content to make it scrollable
+                for (int i = 1; i <= 30; i++)
+                {
+                    builder.OpenElement(7 + i * 3, "p");
+                    builder.AddContent(8 + i * 3, $"Second Dialog Line {i}: This content should be scrollable in the second dialog. The bug was that this second dialog couldn't scroll.");
+                    builder.CloseElement();
+                }
+                
+                // Add button to open third dialog
+                builder.OpenElement(200, "div");
+                builder.AddAttribute(201, "class", "mt-4");
+                builder.OpenComponent<Button>(202);
+                builder.AddAttribute(203, "Text", "Open Third Dialog");
+                builder.AddAttribute(204, "OnClick", Microsoft.AspNetCore.Components.EventCallback.Factory.Create(this, OpenThirdDialog));
+                builder.CloseComponent();
+                builder.CloseElement();
+                
+                builder.CloseElement();
+            }
+        });
+    }
+
+    private async Task OpenThirdDialog()
+    {
+        await DialogService.Show(new DialogOption()
+        {
+            Title = "Third Dialog - Testing Deep Nesting",
+            IsScrolling = true,
+            Size = Size.Medium,
+            BodyTemplate = builder =>
+            {
+                builder.OpenElement(0, "div");
+                builder.AddAttribute(1, "style", "height: 400px; padding: 20px;");
+                
+                builder.OpenElement(2, "h4");
+                builder.AddContent(3, "Third Dialog Content");
+                builder.CloseElement();
+                
+                builder.OpenElement(4, "p");
+                builder.AddAttribute(5, "style", "color: green; font-weight: bold;");
+                builder.AddContent(6, "THIRD LEVEL DIALOG - SHOULD ALSO SCROLL!");
+                builder.CloseElement();
+
+                // Add content to make it scrollable
+                for (int i = 1; i <= 20; i++)
+                {
+                    builder.OpenElement(7 + i * 2, "p");
+                    builder.AddContent(8 + i * 2, $"Third Dialog Line {i}: Deep nested scrolling test.");
+                    builder.CloseElement();
+                }
+                
+                builder.CloseElement();
+            }
+        });
+    }
+}

src/BootstrapBlazor/Components/Modal/Modal.razor.scss

@@ -85,6 +85,10 @@
 .modal-multiple .modal-dialog {
     position: fixed;
     inset: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: var(--bs-modal-margin, 0.5rem);
 
     &:last-child:before {
         content: "";
@@ -94,6 +98,19 @@
         opacity: 0.3;
         pointer-events: auto;
     }
+
+    // Ensure scrolling works for multiple dialogs by fixing the modal-content sizing
+    .modal-content {
+        max-height: calc(100vh - var(--bs-modal-margin, 0.5rem) * 2);
+        overflow: hidden;
+        display: flex;
+        flex-direction: column;
+    }
+
+    .modal-body {
+        overflow-y: auto;
+        flex: 1 1 auto;
+    }
 }
 
 .modal-multiple ~ .modal-backdrop {