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
2026-10-07 00:20:56 +02:00
1 parent b66d7cf545
commit ed3bf57e5b
@@ -69,6 +69,24 @@ tests/e2e/run.sh [--filter ...]   # publishes with WasmApplicationEnvironmentNam
  town's report (`out/client.jsonl`).
 - Cards carry `data-uri` (their ActivityPub id) and the empty feed `data-feed-empty`, for the tests. The feed renders
  only the cards near the view, so a test looks for recent cards, and counts what is loaded by `data-feed-count`.
+- **Phones** (`Mobile/`, `Category=Mobile`): `Browser.Open(state, Phone)` opens Playwright's own device presets
+  (shipped in its package): 360×800, iPhone SE (3rd gen), Pixel 7, and the Pixel 7 held sideways, with touch, a coarse
+  pointer and reduced motion; a phone session fails at once if the page doesn't see a touch screen.
+  `SignIn.As(browser, persona, phone)` reuses the desktop sign-in, and any saved sign-in that has expired is renewed.
+  - `RouteSweepTests` measures every page, one screen at a time down its main scroller (`Mobile/fit.js`). It checks:
+    - sideways scroll, unless the strip is marked `data-scroll-x`;
+    - boxes past the screen's sides;
+    - open menus, sheets and dialogs that are cut or outside the screen;
+    - targets without a 44px hit area: hit-tested at their centre and 21px around it, so a crowding neighbour fails
+      them too. Inline links in post text, native media controls and disabled controls are exempt, a fixed floating
+      control covering a target doesn't count, and `data-touch-exempt` exempts one explicitly;
+    - control text under 12px.
+
+    Screenshots, findings and a contact sheet go to `tests/e2e/out/mobile/<run>/`. Cells are `client.mobile.fit.*` and
+    `client.mobile.touch.*`, with the phone as the ref.
+  - `FlowTests` drives the narrowest phone through the menu, a dialog, a new post, a reply, a reaction, a deletion, the
+    full-screen globe, a phone held sideways, a tap into a thread, a picture and the Back button (`client.mobile.flow.*`).
+  - `DesktopUnchangedTests` holds desktop's control sizes.
 - **Perf** (`Perf/`, `Category=Perf`, left out of the normal runs with `--filter "Category!=Perf"`): `FeedPerfTests`
  scrolls load0's home (thousands of posts from SocialPub's `load.sh`) to 2000 posts and writes, per step, the time,
  DOM nodes, JS and .NET heaps and long tasks to `perf.json`.
@@ -128,6 +146,57 @@ Ionicons 4.5 (`wwwroot/vendor/ionicons.min.css`, `<i class="ion-md-...">`) is lo
 - Never write `@utility collapse`. It brings back Tailwind's own `collapse` utility (`visibility: collapse`), and
  every collapse disappears.

+## Phones
+
+Below `md` the app is laid out for a phone, and a touch screen gets thumb-sized targets. The rules:
+- **Width and pointer are separate.**
+  - Layout differences between a phone and a desktop use the width variants at the call site (`max-md:`, `md:`).
+  - How big a thing is to a finger uses the pointer: `Styles/touch.css` under `@media (pointer: coarse)`, and
+    `pointer-coarse:` at a call site.
+  - A mouse matches none of it, so desktop keeps daisyUI's sizes (`Mobile/DesktopUnchangedTests` holds them).
+  - A window at most 30rem tall (a phone held sideways) is the `short:` variant.
+- **`touch.css`** is plain CSS in Tailwind's utilities layer, so like `neo.css` it beats daisyUI's sublayers. It sets
+  daisyUI's own size variables:
+  - buttons, tabs, inputs and selects are 44px tall;
+  - extra small buttons and the badges that act are 36px, with a transparent `::after` that reaches 44 (5px around
+    the padding box);
+  - checkboxes and radios are 24px, toggles and range thumbs 28;
+  - field text is 16px, so iOS doesn't zoom into a focused field.
+
+  Its `touch-target` utility gives a small link or button a 44px hit area. It can't be used on something that clips
+  its own overflow (a `truncate`d name takes `pointer-coarse:py-3.5` instead), nor on a daisyUI tooltip, which draws
+  its arrow with `::after` (NerdTip takes minimum sizes).
+- **Every target has a 44px hit area on touch,** with 8px between targets in a row (`pointer-coarse:gap-2`). The
+  phone sweep fails anything less.
+- **Overlays on a phone rise from the bottom.**
+  - `DModal Placement="ResponsiveBottom"` is a sheet below md and a centred dialog from md. Every DModal has a visible
+    close button (`ShowClose`, named by `CloseText`).
+  - `DDropdown SheetOnNarrow` turns its content into a bottom sheet.
+  - `Components/PhoneSheet.razor` shows what opens in place on a desktop (the composer, a reply, a quote, an edit) as a
+    sheet on a phone.
+  - All are capped by `dvh`, and the app itself is `h-dvh`.
+- **The Back button closes the newest open overlay** instead of leaving the page.
+  - Overlays register through `IDOverlayHost` (`Components/Daisy`, cascaded from `MainLayout`):
+    - `DModal` and `DDropdown` through the cascade;
+    - the nav menu, `PhoneSheet` and the full-screen globe through `Services/OverlayService.cs`.
+  - `main.js` marks a real Back press (a capture-phase `popstate`), since Blazor can't tell it from the app's own
+    navigation, which closes every overlay and goes on.
+  - No history entries are pushed.
+- **What can't be undone asks first** through `Services/ConfirmService.cs` (`Ask`, shown by `ConfirmHost` in
+  `MainLayout`): deleting a post, taking it off a wall, muting, blocking, leaving a group, dropping a scheduled post and
+  signing out.
+- **On a touch screen:**
+  - a tap on a post opens its thread (`main.js`, `data-thread` on the card, its `data-thread-link`), and cards are
+    pinned to the globe with a mouse only;
+  - a tap on a nerd-stats trigger opens its rows in a sheet (`NerdTip`, `AppStatusService.CanHover`);
+  - pictures open in `Components/MediaViewer.razor`.
+- **The feed on a phone:**
+  - a card's actions are five equal cells (Reply, Boost, Favourite, React, More). Bookmark, the thread and the nerd
+    stats' Details are in More, and the author's picture is in the header;
+  - a new post starts from a floating button;
+  - the globe's banner opens full screen, and a phone held sideways opens it full screen from the tabs;
+  - the feed tabs show their names and fade at the edge where more wait (`edge-fade-x`, `data-scroll-x`).
+
 ## daisyUI Blazor components (`Components/Daisy/`)

 Every daisyUI component has a `D`-prefixed wrapper (`DButton`, `DModal`, `DDropdown`, `DInput`, ...), grouped by
@@ -183,6 +252,7 @@ supplies:
  messages.
 - `Components/ErrorViewer.razor` shows in-page errors: the cascading `EditContext`'s validation messages,
  `AdditionalError` and `AdditionalErrors`.
+- `ConfirmService` asks before what can't be undone (see **Phones**).

 **HTTP (`Services/IHttpService.cs`).**
 - Routes are constants in `Models/APIs.cs` (b2b.next naming: `GET_`/`POST_`/`DELETE_`, `_M_` for routes built from
@@ -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>
@@ -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))
 				{
@@ -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>
 }
@@ -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">