Dialogs close from a button and rise from the bottom on phones

DModal draws a close button (✕, named by CloseText) beside its heading, in a header that stays in view while the box
scrolls; a long list of who liked a post left only the thin margins around the box to tap out of it. A new
ResponsiveBottom placement makes the box a sheet from the bottom below md and keeps it in the middle from md; the
report, liked-by and boosted-by, edit history and public notice dialogs use it. Boxes are at most 100dvh tall, so a
phone's browser bars don't cut them, and a bottom sheet leaves 3rem above itself and clears the home indicator. The
report dialog gets a Cancel button.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01LsXgEaXee4GCU1hwYgPJXw

Components/Daisy/Actions/DModal.razor

@@ -2,13 +2,30 @@
 
 @* daisyUI Modal: https://daisyui.com/components/modal/ . Always rendered; the open state lives in C# (@bind-IsOpen)
    and shows as modal-open. On opening, the box takes the focus (Blazor's FocusAsync) so that Escape, handled on the
-   root, closes it; the backdrop button stretches over the area outside the box and closes it on click. *@
+   root, closes it; the backdrop button stretches over the area outside the box and closes it on click, and a visible
+   close button (ShowClose, named by CloseText) sits beside the heading, which stays in view while the box scrolls. *@
 <div @attributes="AdditionalAttributes" role="dialog" aria-modal="true" aria-labelledby="@(Heading is null ? null : uid)"
 	 class="@CssClass" @onkeydown="OnKeyDown">
 	<div @ref="box" tabindex="-1" class="@Cx("modal-box focus:outline-none", BoxClass)">
-		@if (Heading is not null)
+		@if (Heading is not null || ShowClose)
 		{
-			<h3 id="@uid" class="text-lg font-bold">@Heading</h3>
+			<div class="sticky top-0 z-10 flex items-start gap-3 bg-base-100">
+				@if (Heading is not null)
+				{
+					<h3 id="@uid" class="flex-1 min-w-0 text-lg font-bold">@Heading</h3>
+				}
+				else
+				{
+					<span class="flex-1"></span>
+				}
+				@if (ShowClose)
+				{
+					<button type="button" class="btn btn-sm btn-circle btn-ghost flex-none" aria-label="@CloseText" title="@CloseText"
+							@onclick="Close" data-modal-close>
+						<span aria-hidden="true">✕</span>
+					</button>
+				}
+			</div>
 		}
 		@ChildContent
 		@if (Actions is not null)
@@ -35,8 +52,10 @@
 	[Parameter] public DModalPlacement Placement { get; set; }
 	/// <summary>Close on a click outside the box (renders the modal-backdrop).</summary>
 	[Parameter] public bool CloseOnBackdrop { get; set; } = true;
-	/// <summary>Text of the invisible backdrop button, read by screen readers.</summary>
+	/// <summary>Name of the close button and of the invisible backdrop button, read by screen readers.</summary>
 	[Parameter] public string CloseText { get; set; } = "close";
+	/// <summary>A visible close button beside the heading.</summary>
+	[Parameter] public bool ShowClose { get; set; } = true;
 	[Parameter] public string BoxClass { get; set; }
 
 	readonly string uid = "d" + Guid.NewGuid().ToString("N")[..8];
@@ -52,6 +71,7 @@
 		DModalPlacement.Bottom => "modal-bottom",
 		DModalPlacement.Start => "modal-start",
 		DModalPlacement.End => "modal-end",
+		DModalPlacement.ResponsiveBottom => "modal-bottom md:modal-middle",
 		_ => null
 	};