make prompt modal draggable in Boilerplate #10972

Author: msynk

src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Common/Prompt.razor

@@ -1,8 +1,8 @@
 @inherits AppComponentBase
 
 <section>
-    <BitStack Class="stack">
-        <BitStack Horizontal AutoHeight>
+    <BitStack Gap="0">
+        <BitStack Horizontal AutoHeight Class="header-stack">
             <BitText Typography="BitTypography.H5" Color="BitColor.Tertiary">
                 @Title
             </BitText>
@@ -15,35 +15,33 @@
                        IconName="@BitIconName.ChromeClose" />
         </BitStack>
 
-        <div class="body">
-            <BitStack HorizontalAlign="BitAlignment.Center">
-                <BitText Color="BitColor.Tertiary" Style="white-space:break-spaces;max-width:500px;">
-                    @Body
-                </BitText>
-                @if (OtpInput)
-                {
-                    <BitOtpInput @bind-Value="value"
-                                 AutoFocus
-                                 Length="6"
-                                 Size="BitSize.Large"
-                                 Type="BitInputType.Number"
-                                 Style="justify-content:center"
-                                 OnFill="WrapHandled(async (string? otp) => OnOk?.Invoke(value))" />
-                }
-                else
-                {
-                    <BitTextField @bind-Value="value"
-                                  AutoFocus
-                                  Immediate
-                                  OnEnter="WrapHandled(async (KeyboardEventArgs args) => OnOk?.Invoke(value))" />
-                }
-            </BitStack>
-        </div>
+        <BitStack HorizontalAlign="BitAlignment.Center" Class="stack">
+            <BitText Color="BitColor.Tertiary" Style="white-space:break-spaces;max-width:500px;">
+                @Body
+            </BitText>
+            @if (OtpInput)
+            {
+                <BitOtpInput @bind-Value="value"
+                             AutoFocus
+                             Length="6"
+                             Size="BitSize.Large"
+                             Type="BitInputType.Number"
+                             Style="justify-content:center"
+                             OnFill="WrapHandled(async (string? otp) => OnOk?.Invoke(value))" />
+            }
+            else
+            {
+                <BitTextField @bind-Value="value"
+                              AutoFocus
+                              Immediate
+                              OnEnter="WrapHandled(async (KeyboardEventArgs args) => OnOk?.Invoke(value))" />
+            }
 
-        <BitStack Alignment="BitAlignment.Center" AutoHeight>
-            <BitButton OnClick="OnOkClick" Color="BitColor.Tertiary">
-                @Localizer[nameof(AppStrings.Ok)]
-            </BitButton>
+            <BitStack Alignment="BitAlignment.Center" AutoHeight>
+                <BitButton OnClick="OnOkClick" Color="BitColor.Tertiary">
+                    @Localizer[nameof(AppStrings.Ok)]
+                </BitButton>
+            </BitStack>
         </BitStack>
     </BitStack>
 </section>

src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Common/Prompt.razor.scss

@@ -2,25 +2,21 @@
 @import '../../Styles/abstracts/_bit-css-variables.scss';
 
 section {
-    padding: 1rem;
     min-width: 20rem;
     max-height: $bit-env-height-available;
 
-    @include lt-md {
+    @include lt-sm {
         min-width: unset;
     }
 }
 
-.body {
-    width: 100%;
-    flex-grow: 1;
-    display: flex;
-    overflow: auto;
-    white-space: pre;
-}
-
 ::deep {
+    .header-stack {
+        padding: 1rem;
+    }
+
     .stack {
-        max-height: calc(#{$bit-env-height-available} - 3rem);
+        padding: 1rem;
+        padding-top: 0;
     }
 }

src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Services/PromptService.cs

@@ -20,6 +20,8 @@ public partial class PromptService
         };
         var modalParameters = new BitModalParameters()
         {
+            Draggable = true,
+            DragElementSelector = ".header-stack",
             OnOverlayClick = EventCallback.Factory.Create<MouseEventArgs>(this, () => tcs.SetResult(null))
         };
         modalReference = await modalService.Show<Prompt>(promptParameters, modalParameters);