Small screens, small things; CLAUDE.md on phones

On touch the "on the wall of" link gets a 44px hit area (it truncates, so padding), an event's venue address wraps,
and on a phone toasts sit above the round New post button. A table's scroll box and the administration's statistics
strip are marked as strips that scroll sideways on purpose (data-scroll-x), which the phone sweep allows. CLAUDE.md gains
a Phones section: width variants for layout and the pointer for hit sizes, touch.css, the 44px rule, the bottom sheets
(ResponsiveBottom, SheetOnNarrow, PhoneSheet), Back closing overlays (IDOverlayHost, OverlayService), ConfirmService,
what a tap does on touch, the feed on a phone; and the phone tests under Testing.

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

Components/Admin/StatisticsPanel.razor

@@ -37,7 +37,7 @@
 	}
 	else
 	{
-		<DStats class="w-full overflow-x-auto neo-raised neo-xs" data-statistics-overview>
+		<DStats class="w-full overflow-x-auto neo-raised neo-xs" data-statistics-overview data-scroll-x>
 			<DStat>
 				<Heading>@Localizer["Deliveries that arrived"]</Heading>
 				<ChildContent>@(overview.DeliverySuccess is { } success ? $"{success * 100:0.#}%" : "—")</ChildContent>

Components/Content.razor

@@ -131,7 +131,7 @@
 				{
 					<p class="inline-flex items-center gap-2 min-w-0 text-xs opacity-80" data-wall="@wall.Acct">
 						<i class="ion-md-clipboard" aria-hidden="true"></i>
-						<a class="truncate" href="@($"account/{Uri.EscapeDataString(wall.Id)}")" title="@wall.Acct">
+						<a class="truncate pointer-coarse:py-3.5" href="@($"account/{Uri.EscapeDataString(wall.Id)}")" title="@wall.Acct">
 							@Localizer["On the wall of {0}", wall.Name]
 						</a>
 					</p>
@@ -697,7 +697,7 @@
 				<span class="inline-flex gap-2 items-center"><i class="ion-md-calendar"></i>@EventTime(happening)</span>
 				@foreach (var venue in happening.Places)
 				{
-					<span class="inline-flex gap-2 items-center"><i class="ion-md-pin"></i>@(venue.Name ?? venue.Address ?? venue.Url)</span>
+					<span class="inline-flex gap-2 items-center min-w-0 break-all"><i class="ion-md-pin flex-none"></i>@(venue.Name ?? venue.Address ?? venue.Url)</span>
 				}
 				@if (IsWebLink(happening.OnlineUrl))
 				{

Components/Daisy/DataDisplay/DTable.razor

@@ -2,10 +2,11 @@
 
 @* daisyUI Table: https://daisyui.com/components/table/ . ChildContent is the <thead>/<tbody>/<tfoot> markup. Class and
    the other attributes go on the <table>; with Scroll (the default) it sits in an overflow-x-auto div, whose classes
-   are WrapperClass (pinned rows need it to have a height, e.g. h-96). *@
+   are WrapperClass (pinned rows need it to have a height, e.g. h-96); it is marked as a strip that scrolls sideways on
+   purpose (data-scroll-x), which the phone tests allow. *@
 @if (Scroll)
 {
-	<div class="@Cx("overflow-x-auto", WrapperClass)">
+	<div class="@Cx("overflow-x-auto", WrapperClass)" data-scroll-x>
 		<table @attributes="AdditionalAttributes" class="@CssClass">@ChildContent</table>
 	</div>
 }

Components/ToastHost.razor

@@ -3,7 +3,8 @@
 @* Shows ToastService's messages at the bottom end of the screen. Placed once, in MainLayout. *@
 @if (Toast.Messages.Count > 0)
 {
-	<DToast class="z-[1000]">
+	@* (on a phone above the round New post button) *@
+	<DToast class="z-[1000] max-md:bottom-20">
 		@foreach (var message in Toast.Messages)
 		{
 			<DAlert @key="message.Id" Color="ColorOf(message.Severity)" class="max-w-sm">