Nerd stats open with a tap

On a touch screen a nerd-stats tooltip showed only through the browser faking hover, unreliably, and couldn't be
scrolled. Where the pointer can't hover (AppStatusService.CanHover), a tap on a NerdTip now opens its rows in a sheet
from the bottom; the trigger is focusable, says it opens a dialog, and is at least 44px on touch. A closed tooltip takes
no room any more (daisyUI only made it transparent, and one past a card's edge made a phone's feed scroll sideways),
and on touch it never shows. The rows are a component of their own (NerdRows), at 12px on phones. A card's More menu
has a Details entry on phones that gathers the post's, its author's, its place's or CDN's and its counts' rows in one
sheet. A picture's tip doesn't open on a tap, the picture does.

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

Components/Nerd/NerdTip.razor

@@ -1,10 +1,32 @@
 @inherits LocalizableComponentBase
 
-@* Nerd stats on hover or focus: a DTooltip whose content is a monospace list of label/value rows. OnOpen runs on the
-   first hover or focus, for stats read on demand (a post's provenance); rows with no value are left out. *@
-<DTooltip Placement="Placement" Align="Align" class="@Class" TipContent="Body" @onmouseenter="Open" @onfocusin="Open">
-	@ChildContent
-</DTooltip>
+@* Nerd stats on hover or focus: a DTooltip whose content is the rows (NerdRows). A touch screen has no hover, so there
+   a tap opens the same rows in a sheet from the bottom (TapOpens; not for a trigger that is a link itself, the
+   pictures). OnOpen runs on the first hover, focus or tap, for stats read on demand (a post's provenance). *@
+@if (TapOpens)
+{
+	@* (on touch the trigger is at least 44px: daisyUI's tooltip draws its arrow with ::after, so padding-free min sizes) *@
+	<DTooltip Placement="Placement" Align="Align" class="@($"{Class} pointer-coarse:inline-flex pointer-coarse:items-center pointer-coarse:min-h-11 pointer-coarse:min-w-11")"
+			  TipContent="Body" @onmouseenter="Open" @onfocusin="Open" @onclick="Tap"
+			  tabindex="0" role="button" aria-haspopup="dialog" aria-label="@Heading">
+		@ChildContent
+	</DTooltip>
+}
+else
+{
+	<DTooltip Placement="Placement" Align="Align" class="@Class" TipContent="Body" @onmouseenter="Open" @onfocusin="Open">
+		@ChildContent
+	</DTooltip>
+}
+@if (isSheetOpen)
+{
+	<DModal Placement="DModalPlacement.ResponsiveBottom" IsOpen="true" IsOpenChanged="open => isSheetOpen = open" CloseText="@Localizer["Close"]" data-nerd-sheet>
+		<Heading>@Heading</Heading>
+		<ChildContent>
+			<NerdRows Rows="Rows" Pending="Pending" />
+		</ChildContent>
+	</DModal>
+}
 
 @code {
 	[Parameter] public RenderFragment ChildContent { get; set; }
@@ -16,8 +38,19 @@
 	[Parameter] public DTooltipPlacement Placement { get; set; }
 	[Parameter] public DTooltipAlign Align { get; set; }
 	[Parameter] public string Class { get; set; }
+	/// <summary>A tap opens the rows in a sheet where the screen has no hover.</summary>
+	[Parameter] public bool TapOpens { get; set; } = true;
 
 	bool opened;
+	bool isSheetOpen;
+
+	async Task Tap()
+	{
+		if (CascadingState.Status.CanHover())
+			return;
+		isSheetOpen = true;
+		await Open();
+	}
 
 	protected override void OnInitialized() => IsLoading = false;
 
@@ -29,21 +62,5 @@
 		await OnOpen.InvokeAsync();
 	}
 
-	RenderFragment Body => @<div class="nerd-stats flex flex-col gap-1 text-left font-mono text-[11px] leading-tight max-w-80">
-		@if (Heading is { Length: > 0 })
-		{
-			<p class="font-bold opacity-80">@Heading</p>
-		}
-		<dl class="grid grid-cols-[auto_minmax(0,1fr)] gap-x-2 gap-y-0.5">
-			@foreach (var row in Rows.Where(row => !string.IsNullOrEmpty(row.Value)))
-			{
-				<dt class="opacity-60 whitespace-nowrap">@row.Label</dt>
-				<dd class="break-all">@row.Value</dd>
-			}
-		</dl>
-		@if (Pending)
-		{
-			<p class="opacity-60">@Localizer["loading"]…</p>
-		}
-	</div>;
+	RenderFragment Body => @<NerdRows Heading="@Heading" Rows="Rows" Pending="Pending" />;
 }