From 2100f0022fb64c9eeca2298242796ba6b6d402a4 Mon Sep 17 00:00:00 2001
From: Logan <logan@ljones.me>
Date: Fri, 21 Aug 2026 22:54:51 -0400
Subject: [PATCH 1/2] fix(settings): raise every Settings control to the touch
 floor

#56 named 44px and #195 took the page header there. Settings is the
other half of #186 and much the larger one: swept on the reference
device (TLP301, 424x439) with all eleven config-sections expanded,
**120 controls** were under the floor -- not the 93 the issue's table
implies, and config-field is eight of them.

The bulk is behind the disclosures, which is why nobody had counted it:

    36  .column-arrow-btn          16x14   <- smallest in the app
    29  .column-toggle             16x16
    26  shortcut-capture button    80x25
     8  download format checkbox   16x16
     7  config-field select        335x30
     6  wa-input / wa-button       204x20, 185x21

**The density argument, measured rather than guessed, and it is
smaller than it looks.** The rows were already near the floor --
.column-item is 335x36 and .shortcut-row 335x37; it is the controls
*inside* them that were 14-25px. So a control grows into the row it
already occupies and the row goes 36 to 44. Measured after: the two
column lists went 373->447 and 690->850, +234px over the whole page.
Half a screen of extra scroll on a page that already scrolls, against
36 targets of 16x14.

**Settings is cheaper than the header was, and for a stated reason.**
There is no overflow fit on this page, so the header's "only width is
contested" rule does not bind at all and nothing here needs padding
with a negative margin. Height is a min-size, and the two square
controls can simply be square.

Three shapes, because one rule does not fit three kinds of control:

**A native checkbox is targeted through its label.** It cannot grow
its hit area without growing its paint, and a 44px checkbox is not
what anyone wants -- so .column-label is a real <label for> now and
the column's *name* is the target, 70x44 rather than 16x16. That is
the argument config-field already makes one file over ("a real label
association also makes the label text a click target, which is
behaviour, not annotation"), and here it is the whole fix. The
download formats already had the label; they only needed the height.

**The arrows take padding, which is invisible.** They carry
background: none and a transparent border, so 16x14 -> 44x44 changes
nothing anyone can see until hover -- #186's Direction exactly.

**Web Awesome's controls come from the library's own API.** Their
height is decided inside somebody else's shadow root, and
--wa-form-control-height is the variable that decides it. A custom
property inherits through a shadow boundary, so a :host declaration
reaches them; styles/wa-touch-floor.css.ts is that, once, adopted
rather than written at :root in index.css -- a :root rule would be
invisible to the component tier, which renders a component and no page
stylesheet.

**Two controls no sweep can see are fixed by name**, and they are the
trap this issue keeps setting. config-field's toggle has an <input>
that is opacity: 0; width: 0; height: 0, so a walk of every input
skips it as a zero-sized node -- what a finger hits is the <label>,
which measured **34x19**, smaller than anything in either of #186's
tables and absent from both. It is 44x44 with the pill still painted
at 2.5em x 1.4em and negative inline margins keeping it flush with the
inputs above. And shortcut-capture's reset button renders only for a
shortcut somebody has rebound, so a sweep of a fresh install never
meets it.

Verified on the device, same method as the sweep that filed it:
120 controls under the floor before, 42 after. All 42 are accounted
for -- 37 are checkboxes whose labels measure 70x44 and 57x44, four
are wa-input's inner input at 204x**42**, which is the control
measured *inside* its own 1px border (part=base is 238x44), and one is
the skip link, which #186 already ruled out as keyboard-only.

The e2e suite passes, top-bar-fit and header-action-overflow included
-- but that is **chromium**, which is half an answer, and saying so is
the whole of what #195's second commit was about. What can be argued
rather than run: library-filter is the only thing here in a container
that measures itself, and its width did not change. The fit measures
inline size.

Two page-header screenshots are refreshed because they are this
issue's own debris -- #195's taller sort control, merged last session,
with its references never re-recorded. app-sidebar's and
now-playing's are deliberately left: they are unrelated drift, and
blessing an unrelated screenshot is how the sidebar reference came to
still list a destination #27 retired. That is #196.
---
 .../components/config-page/config-field.ts    |  57 ++-
 .../src/components/config-page/config-page.ts |  65 ++-
 .../config-page/download-clients.ts           |   7 +
 .../config-page/shortcut-capture.ts           |  14 +-
 .../library-filter/library-filter.ts          |   8 +-
 frontend/src/styles/wa-touch-floor.css.ts     |  48 ++
 ...ader-filtered-by-search-chromium-linux.png | Bin 6511 -> 6615 bytes
 ...er-title-count-and-sort-chromium-linux.png | Bin 4280 -> 4357 bytes
 .../components/settings-touch-targets.test.ts | 425 ++++++++++++++++++
 9 files changed, 609 insertions(+), 15 deletions(-)
 create mode 100644 frontend/src/styles/wa-touch-floor.css.ts
 create mode 100644 frontend/test/components/settings-touch-targets.test.ts

diff --git a/frontend/src/components/config-page/config-field.ts b/frontend/src/components/config-page/config-field.ts
index 032c784..5bbd352 100644
--- a/frontend/src/components/config-page/config-field.ts
+++ b/frontend/src/components/config-page/config-field.ts
@@ -85,6 +85,21 @@ export class ConfigField extends LitElement {
             gap: 0.5em;
         }
 
+        /* Every control here meets the app's 44px touch floor (#186).
+
+           This is the shape every row in Settings uses, so it is the
+           one rule that covers the most controls -- and it is the
+           *cheapest* place to reach the floor, because there is no
+           overflow fit on this page. The page header's had one (#69),
+           which is why that pass had to grow padding and hand the
+           width back with a negative margin; here the control is a
+           block in a column and a taller box costs nothing but the
+           height it takes.
+
+           Measured on the reference device before this: the select
+           335x30, the text and number inputs the same, the browse
+           button 30 tall, the colour swatch 33x33 and the toggle
+           **34x19**. */
         input[type='text'],
         input[type='number'] {
             background: var(--yj-bg-elevated, #343a40);
@@ -95,6 +110,7 @@ export class ConfigField extends LitElement {
             font-size: 0.85em;
             font-family: inherit;
             min-width: 0;
+            min-block-size: 44px;
             flex: 1;
         }
 
@@ -117,6 +133,7 @@ export class ConfigField extends LitElement {
             font-size: 0.85em;
             font-family: inherit;
             cursor: pointer;
+            min-block-size: 44px;
             flex: 1;
         }
 
@@ -139,6 +156,7 @@ export class ConfigField extends LitElement {
             font-size: 0.85em;
             cursor: pointer;
             white-space: nowrap;
+            min-block-size: 44px;
         }
 
         button:hover {
@@ -158,8 +176,12 @@ export class ConfigField extends LitElement {
         }
 
         input[type='color'] {
-            width: 2.5em;
-            height: 2.5em;
+            /* border-box, or the 2px border makes this 48 and the
+               assertion below reads as passing by four pixels of
+               border rather than by the rule. */
+            box-sizing: border-box;
+            width: 44px;
+            height: 44px;
             border: 2px solid var(--yj-border, #444);
             border-radius: 4px;
             padding: 0;
@@ -187,12 +209,32 @@ export class ConfigField extends LitElement {
             display: flex;
             align-items: center;
             justify-content: space-between;
+            min-block-size: 44px;
         }
 
+        /* The toggle is the one control here whose target and paint
+           must differ, and it is also the one no sweep can see.
+
+           Its <input> is opacity: 0; width: 0; height: 0, so a
+           walk of every input on the page skips it as a zero-sized
+           node -- the thing a finger actually hits is this <label>,
+           which measured **34x19**. That is smaller than anything in
+           #186's original table and it is absent from it for exactly
+           that reason.
+
+           A 44px pill is not what a switch should look like, so the
+           box is 44px and the paint is not: .toggle-slider is a
+           2.5em x 1.4em child centred in it rather than an absolute
+           fill. The negative inline margins hand the extra width back
+           to the layout, so the pill stays flush with the right edge
+           of the inputs in the rows above it -- the header pass's
+           shape, used here for alignment rather than for a fit. */
         .toggle-switch {
-            position: relative;
-            width: 2.5em;
-            height: 1.4em;
+            display: grid;
+            place-items: center;
+            inline-size: 44px;
+            block-size: 44px;
+            margin-inline: calc((2.5em - 44px) / 2);
         }
 
         .toggle-switch input {
@@ -202,9 +244,10 @@ export class ConfigField extends LitElement {
         }
 
         .toggle-slider {
-            position: absolute;
+            position: relative;
             cursor: pointer;
-            inset: 0;
+            inline-size: 2.5em;
+            block-size: 1.4em;
             background: var(--yj-bg-overlay, #495057);
             border-radius: 1em;
             transition: background 0.2s;
diff --git a/frontend/src/components/config-page/config-page.ts b/frontend/src/components/config-page/config-page.ts
index 6604419..522ac2c 100644
--- a/frontend/src/components/config-page/config-page.ts
+++ b/frontend/src/components/config-page/config-page.ts
@@ -176,6 +176,13 @@ export class ConfigPage extends ViewLifecycleMixin(LitElement) {
             cursor: pointer;
             transition: background-color 0.15s ease;
             white-space: nowrap;
+            /* The app's 44px touch floor (#56, #186), stated once for
+               all 41 buttons this page renders rather than per class.
+               Height is free here: Settings has no overflow fit, so
+               the header's "only width is contested" rule does not
+               bind, and the two classes that need more than a height
+               say so below. */
+            min-block-size: 44px;
         }
 
         button:disabled {
@@ -509,11 +516,24 @@ export class ConfigPage extends ViewLifecycleMixin(LitElement) {
             margin: 0;
         }
 
+        /* The two column lists are the densest thing in the app, and
+           the density argument is why they are shaped the way they
+           are rather than simply grown (#186).
+
+           Measured on the reference device: the row was already
+           335x36 -- it is the controls *inside* it that were 16x16 and
+           **16x14**, the smallest anywhere in this app, 36 of them.
+           So the fix grows the controls into the row they already
+           occupy and only takes the row from 36 to 44, which over the
+           two lists (10 and 19 items) is 232px of extra scroll on a
+           439px screen. Growing each control to its own 44px row
+           instead would have cost four screens. */
         .column-item {
             display: flex;
-            align-items: center;
+            align-items: stretch;
             gap: 0.5em;
-            padding: 0.5em 0.75em;
+            padding: 0 0.75em;
+            min-block-size: 44px;
             border-bottom: 1px solid
                 var(--yj-border-subtle, #333);
             font-size: 0.85em;
@@ -531,8 +551,19 @@ export class ConfigPage extends ViewLifecycleMixin(LitElement) {
             color: var(--yj-text-tertiary, #888);
         }
 
+        /* A native checkbox cannot grow its hit area without growing
+           its paint, and a 44px checkbox is not what anyone wants. So
+           the target is the label instead: .column-label is a real
+           <label for> now, which makes the column's *name* the thing
+           you tap -- ~250x44 rather than 16x16.
+
+           That is the argument config-field already makes one file
+           over for its own labels: "a real label association also
+           makes the label text a click target for the control, which
+           is behaviour, not annotation". Here it is the whole fix. */
         .column-toggle {
             cursor: pointer;
+            align-self: center;
             accent-color: var(
                 --yj-accent,
                 #ffd43b
@@ -541,20 +572,32 @@ export class ConfigPage extends ViewLifecycleMixin(LitElement) {
 
         .column-label {
             flex: 1;
+            display: flex;
+            align-items: center;
+            cursor: pointer;
+            min-block-size: 44px;
         }
 
         .view-note {
             color: var(--yj-text-tertiary, #888);
             font-size: var(--yj-font-size-sm, 0.85rem);
             margin-left: auto;
+            /* The row stretches its children so the label can be a
+               full-height target; this is text, not a target. */
+            align-self: center;
         }
 
         .column-arrows {
             display: flex;
+            align-items: stretch;
             gap: 0.15em;
             margin-left: auto;
         }
 
+        /* 16x14 before this, and they carry background: none and a
+           transparent border -- so padding out to 44px grows the
+           target and changes nothing anyone can see until hover,
+           which is precisely what #186's Direction asks for. */
         .column-arrow-btn {
             background: none;
             border: 1px solid transparent;
@@ -564,6 +607,8 @@ export class ConfigPage extends ViewLifecycleMixin(LitElement) {
             font-size: 0.65em;
             line-height: 1;
             padding: 0.2em 0.35em;
+            min-inline-size: 44px;
+            min-block-size: 44px;
             transition:
                 color 0.15s,
                 border-color 0.15s;
@@ -711,6 +756,11 @@ export class ConfigPage extends ViewLifecycleMixin(LitElement) {
             padding: 0.2em 0.4em;
             letter-spacing: 2px;
             border-radius: 4px;
+            /* Square, so it needs the width too -- the shared rule
+               above only gives it a height. It was 31x31, and it is
+               the only route to "Remove library", which is the case
+               #55 settled one component over: the way out is 44px. */
+            min-inline-size: 44px;
         }
 
         .overflow-btn:hover {
@@ -2003,6 +2053,7 @@ export class ConfigPage extends ViewLifecycleMixin(LitElement) {
                                 class="column-item ${checked ? 'enabled' : 'disabled'}"
                             >
                                 <input
+                                    id="view-${v.id}"
                                     type="checkbox"
                                     class="column-toggle"
                                     aria-label="Show ${v.label} in the navigation"
@@ -2014,9 +2065,9 @@ export class ConfigPage extends ViewLifecycleMixin(LitElement) {
                         (e.target as HTMLInputElement).checked,
                     )}
                                 />
-                                <span class="column-label">
+                                <label class="column-label" for="view-${v.id}">
                                     ${v.label}
-                                </span>
+                                </label>
                                 ${note
                     ? html`<span class="view-note">${note}</span>`
                     : nothing}
@@ -2212,6 +2263,7 @@ export class ConfigPage extends ViewLifecycleMixin(LitElement) {
                                 class="column-item ${checked ? 'enabled' : 'disabled'}"
                             >
                                 <input
+                                    id="column-${id}"
                                     type="checkbox"
                                     class="column-toggle"
                                     aria-label="Show the ${columnLabel} column"
@@ -2222,11 +2274,12 @@ export class ConfigPage extends ViewLifecycleMixin(LitElement) {
                                             id,
                                         )}
                                 />
-                                <span
+                                <label
                                     class="column-label"
+                                    for="column-${id}"
                                 >
                                     ${columnLabel}
-                                </span>
+                                </label>
                                 <span
                                     class="column-arrows"
                                 >
diff --git a/frontend/src/components/config-page/download-clients.ts b/frontend/src/components/config-page/download-clients.ts
index 6aef7a3..d1bceb8 100644
--- a/frontend/src/components/config-page/download-clients.ts
+++ b/frontend/src/components/config-page/download-clients.ts
@@ -8,6 +8,7 @@ import '@awesome.me/webawesome/dist/components/switch/switch.js';
 import '@awesome.me/webawesome/dist/components/spinner/spinner.js';
 import '@awesome.me/webawesome/dist/components/callout/callout.js';
 import { designTokens } from '../../styles/tokens.css';
+import { waTouchFloor } from '../../styles/wa-touch-floor.css';
 import type {
     DownloadDescriptor,
     DownloadProvider,
@@ -136,6 +137,7 @@ export class DownloadClients extends LitElement {
 
     static override styles = [
         designTokens,
+        waTouchFloor,
         css`
             :host {
                 display: block;
@@ -239,12 +241,17 @@ export class DownloadClients extends LitElement {
                 margin-top: 0.4em;
             }
 
+            /* The checkbox is 16x16 and cannot grow without becoming
+               a 44px checkbox, but it is already wrapped in the label
+               that names it -- so the label is the target and only
+               needs the height (#186). Eight of them. */
             .format-option {
                 display: flex;
                 align-items: center;
                 gap: 0.4em;
                 font-size: 0.9em;
                 cursor: pointer;
+                min-block-size: 44px;
             }
         `,
     ];
diff --git a/frontend/src/components/config-page/shortcut-capture.ts b/frontend/src/components/config-page/shortcut-capture.ts
index 96774fe..b072fd9 100644
--- a/frontend/src/components/config-page/shortcut-capture.ts
+++ b/frontend/src/components/config-page/shortcut-capture.ts
@@ -25,6 +25,11 @@ export class ShortcutCapture extends LitElement {
         :host {
             display: inline-block;
         }
+        /* 80x25, twenty-six of them -- the most numerous control on
+           the Settings page after the column lists (#186). The floor
+           is a height here and nothing else: the width was already
+           past it, and the type stays where it is so a shortcut still
+           reads as a key rather than as a button. */
         button {
             font-family: inherit;
             font-size: var(--yj-text-sm, 13px);
@@ -35,6 +40,7 @@ export class ShortcutCapture extends LitElement {
             color: var(--yj-text-primary, #eee);
             cursor: pointer;
             min-width: 80px;
+            min-height: 44px;
             text-align: center;
             transition:
                 border-color 0.15s,
@@ -61,6 +67,11 @@ export class ShortcutCapture extends LitElement {
                 opacity: 0.7;
             }
         }
+        /* Reset renders only for a rebound shortcut, so a sweep of a
+           freshly-installed app never sees it -- it is not in #186's
+           tables for that reason, and it is a touch target the moment
+           anybody uses the feature. It also has no background, so the
+           padding out to 44px is invisible. */
         .reset-btn {
             font-size: var(--yj-text-xs, 11px);
             padding: 2px 6px;
@@ -69,7 +80,8 @@ export class ShortcutCapture extends LitElement {
             background: transparent;
             color: var(--yj-text-tertiary, #888);
             cursor: pointer;
-            min-width: auto;
+            min-width: 44px;
+            min-height: 44px;
             opacity: 0;
             transition: opacity 0.15s;
         }
diff --git a/frontend/src/components/library-filter/library-filter.ts b/frontend/src/components/library-filter/library-filter.ts
index f62085c..0a5dc13 100644
--- a/frontend/src/components/library-filter/library-filter.ts
+++ b/frontend/src/components/library-filter/library-filter.ts
@@ -23,8 +23,14 @@ export class LibraryFilter extends LitElement {
             align-items: center;
         }
 
+        /* 120x32 on the reference device (#186). This control has two
+           placements since #57 -- the desktop top bar and Settings ->
+           Libraries -- and it is the only route to setSelectedLibrary
+           in either, so it is one of the controls #148 argued must not
+           simply be taken away. It is one component, so it reaches the
+           floor in one place. */
         select {
-            height: 32px;
+            min-height: 44px;
             padding: 0 8px;
             border-radius: 6px;
             border: 1px solid
diff --git a/frontend/src/styles/wa-touch-floor.css.ts b/frontend/src/styles/wa-touch-floor.css.ts
new file mode 100644
index 0000000..385c9fb
--- /dev/null
+++ b/frontend/src/styles/wa-touch-floor.css.ts
@@ -0,0 +1,48 @@
+import { css } from 'lit';
+
+/**
+ * A Web Awesome form control is at least the app's 44px touch floor.
+ *
+ * #56 named 44px and #186 found nothing but the transport had reached
+ * it. Web Awesome's form controls are the part of Settings this app
+ * does not draw: measured on the reference device (TLP301, 424x439),
+ * `wa-input`'s control is **204x20** and `wa-button` **185x21** — the
+ * shortest controls on the page, and the only ones whose height is
+ * decided inside somebody else's shadow root.
+ *
+ * `--wa-form-control-height` is that decision, and it is the library's
+ * own theming variable rather than a part or an internal — the default
+ * theme sets it at `:root` and every control that has a height reads
+ * it (button, input, select, radio). So this is `wa-slider-label`'s
+ * better half: the API first, and no reach into a shadow root at all.
+ *
+ * Three things about it are load-bearing.
+ *
+ * **A custom property inherits through a shadow boundary**, which is
+ * what lets a `:host` declaration reach a `wa-input` the host renders.
+ * That is also why it is a stylesheet a component adopts rather than a
+ * `:root` rule in `index.css`: a `:root` rule would cover every wa
+ * control in the app in one line and be invisible to the component
+ * tier, which renders a component and no page stylesheet. Here the
+ * floor is measurable where it is applied.
+ *
+ * **It is a flat 44px rather than a floor over the library's own
+ * expression.** The default is `round(calc(2 * padding-block + 1em *
+ * line-height), 1px)` — em-based, so `size="small"` is what produced
+ * the 20px above — and a `max(44px, …)` would have to restate that
+ * formula here, which is a copy of somebody else's arithmetic that
+ * goes stale silently. A flat value is safe because this app uses
+ * exactly two sizes, `small` and the default, and both are under the
+ * floor; a `size="large"` added later would be pinned down to 44 and
+ * should take that as the prompt to revisit this.
+ *
+ * **Only the height is pinned.** The font size still comes from
+ * `size="small"`, so a control grows its hit area without growing its
+ * visual weight — which is what #186's Direction asks for and what the
+ * page header's second pass had to be corrected to do.
+ */
+export const waTouchFloor = css`
+    :host {
+        --wa-form-control-height: 44px;
+    }
+`;
diff --git a/frontend/test/components/__screenshots__/page-header.test.ts/page-header-filtered-by-search-chromium-linux.png b/frontend/test/components/__screenshots__/page-header.test.ts/page-header-filtered-by-search-chromium-linux.png
index 16ec3799e4c149658b45e4512fe32d5b665fa8b4..2a43fb800adbe9a9976cc8dce2a7778b523b3797 100644
GIT binary patch
literal 6615
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

literal 6511
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

diff --git a/frontend/test/components/__screenshots__/page-header.test.ts/page-header-title-count-and-sort-chromium-linux.png b/frontend/test/components/__screenshots__/page-header.test.ts/page-header-title-count-and-sort-chromium-linux.png
index f0e6892e38ba6ee20c9ed0b123eb16ef7c687d52..fb474081cee3dddad3e1d24a5572458558326ed6 100644
GIT binary patch
literal 4357
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
ZHm<;fcM#B*0{`A1yQ`wDT%u$i{BKTXT?7CC

literal 4280
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

diff --git a/frontend/test/components/settings-touch-targets.test.ts b/frontend/test/components/settings-touch-targets.test.ts
new file mode 100644
index 0000000..efa2e55
--- /dev/null
+++ b/frontend/test/components/settings-touch-targets.test.ts
@@ -0,0 +1,425 @@
+/**
+ * Every control in Settings is at least 44px (#186, second pass).
+ *
+ * The header pass covered the five controls a user meets on every
+ * screen. Settings is the other half and is much the larger one: swept
+ * on the reference device (TLP301, 424x439) with all eleven
+ * `config-section`s expanded, **120 controls** were under the floor,
+ * not the 93 the issue's first table implies, and `config-field` — the
+ * row shape the issue names — is eight of them. The bulk is behind the
+ * disclosures:
+ *
+ * | control | size | count |
+ * |---|---|---|
+ * | `.column-arrow-btn` | **16x14** | 36 |
+ * | `.column-toggle` | 16x16 | 29 |
+ * | `shortcut-capture` button | 80x**25** | 26 |
+ * | download format checkbox | 16x16 | 8 |
+ * | `config-field` select | 335x**30** | 7 |
+ * | `wa-input` / `wa-button` | 204x**20**, 185x**21** | 6 |
+ * | `library-filter` select | 120x**32** | 1 |
+ * | `.overflow-btn` | 31x31 | 1 |
+ *
+ * **This tier can measure it, unlike #187's seek bar**, for the reason
+ * the header pass gives: the controls are real elements and the rules
+ * are min-sizes, so a real Chromium rendering a real component gives
+ * the actual answer at any width. And unlike the header there is no
+ * overflow fit on this page, so nothing here needs the negative-margin
+ * treatment — height is free and the two square controls can simply be
+ * square.
+ *
+ * **What the sweep cannot see is written down here as a test rather
+ * than as a comment**, because it is the trap this whole issue keeps
+ * setting. Two controls are invisible to a walk of `button, select,
+ * input`: `config-field`'s toggle, whose `<input>` is
+ * `opacity: 0; width: 0; height: 0` so the thing a finger hits is the
+ * `<label>` around it (34x19, smaller than anything in either of the
+ * issue's tables), and `shortcut-capture`'s reset button, which renders
+ * only for a shortcut somebody has already rebound. Both are asserted
+ * by name below.
+ */
+import { beforeEach, describe, expect, it } from 'vitest';
+
+import '@components/config-page/config-field';
+import '@components/config-page/config-page';
+import '@components/config-page/download-clients';
+import '@components/config-page/shortcut-capture';
+import '@components/library-filter/library-filter';
+
+import { flush, stub } from '@test/support/harness';
+import { fixture, shadow, shadowAll } from '@test/support/render';
+
+/** The app's touch floor, from #56. */
+const FLOOR = 44;
+
+/**
+ * Everything a finger can hit, through every shadow root under `root`.
+ *
+ * It descends rather than querying one root because Settings is a tree
+ * of components — `config-page` renders `config-section`s holding
+ * `config-field`s and `shortcut-capture`s — and the defect was
+ * distributed across all of them. This is the device sweep, run here.
+ */
+function controlsUnder(root: Document | ShadowRoot | Element): { name: string; el: HTMLElement }[] {
+  const SELECTOR = 'button, select, input, [role="button"], [role="tab"], [role="switch"]';
+  const found: { name: string; el: HTMLElement }[] = [];
+  const seen = new Set<Element>();
+
+  const walk = (node: ParentNode, depth: number): void => {
+    if (depth > 20) return;
+
+    for (const el of Array.from(node.querySelectorAll('*'))) {
+      if (el.matches(SELECTOR) && !seen.has(el)) {
+        seen.add(el);
+
+        const box = el.getBoundingClientRect();
+        const style = getComputedStyle(el);
+        const rendered =
+          (box.width > 0 || box.height > 0) &&
+          style.visibility !== 'hidden' &&
+          style.display !== 'none';
+
+        if (rendered) {
+          const host = (el.getRootNode() as ShadowRoot).host;
+
+          found.push({
+            name: `${host ? host.tagName.toLowerCase() : 'root'} ${
+              (typeof el.className === 'string' && el.className) || el.tagName.toLowerCase()
+            }`,
+            el: el as HTMLElement,
+          });
+        }
+      }
+
+      if (el.shadowRoot) walk(el.shadowRoot, depth + 1);
+    }
+  };
+
+  walk(root as ParentNode, 0);
+
+  return found;
+}
+
+/**
+ * What a finger actually hits for `el`.
+ *
+ * For everything in this app that is one element, that is the element.
+ * A native checkbox is the exception and is why this function exists:
+ * it cannot grow its hit area without growing its paint, and a 44px
+ * checkbox is not what anyone wants — so a checkbox that has a label
+ * is targeted *through* the label, which is the fix the column lists
+ * and the download formats both use.
+ *
+ * The fallback is the checkbox itself, deliberately: a checkbox with
+ * no label is a 16px target and this must still say so.
+ */
+function hitTarget(el: HTMLElement): HTMLElement {
+  const input = el as HTMLInputElement;
+
+  if (input.type !== 'checkbox' && input.type !== 'radio') return el;
+
+  const wrapping = el.closest('label');
+  const root = el.getRootNode() as ShadowRoot | Document;
+  const associated = input.id
+    ? root.querySelector<HTMLLabelElement>(`label[for="${CSS.escape(input.id)}"]`)
+    : null;
+
+  return wrapping ?? associated ?? el;
+}
+
+/** The ones that miss the floor, reported with the numbers. */
+function tooSmall(controls: { name: string; el: HTMLElement }[]): string[] {
+  return controls
+    .map(({ name, el }) => {
+      const box = hitTarget(el).getBoundingClientRect();
+
+      return { name, w: Math.round(box.width), h: Math.round(box.height) };
+    })
+    .filter((c) => c.w < FLOOR || c.h < FLOOR)
+    .map((c) => `${c.name} ${c.w}x${c.h}`);
+}
+
+/**
+ * Open every disclosure under `host`, so the sweep can see the page.
+ *
+ * A collapsed `config-section` renders its body with `hidden`, so its
+ * controls measure 0x0 — which is exactly why the issue's first table
+ * lists seven Settings controls and the real count is 120.
+ */
+async function expandEverySection(host: HTMLElement & { updateComplete: Promise<unknown> }) {
+  const sections = shadowAll<HTMLElement>(host, 'config-section');
+
+  expect(sections.length, 'the page renders disclosures to open').toBeGreaterThan(0);
+
+  for (const section of sections) {
+    section.shadowRoot
+      ?.querySelector<HTMLButtonElement>('button[aria-expanded="false"]')
+      ?.click();
+  }
+
+  await flush();
+  await host.updateComplete;
+
+  for (const section of sections) {
+    await (section as HTMLElement & { updateComplete?: Promise<unknown> }).updateComplete;
+  }
+
+  return sections;
+}
+
+/** A control's own box, named so a failure says which and how small. */
+function boxOf(el: Element | null | undefined): string {
+  if (!el) return 'missing';
+
+  const box = el.getBoundingClientRect();
+
+  return `${Math.round(box.width)}x${Math.round(box.height)}`;
+}
+
+function meetsFloor(el: Element | null | undefined): boolean {
+  if (!el) return false;
+
+  const box = el.getBoundingClientRect();
+
+  return Math.round(box.width) >= FLOOR && Math.round(box.height) >= FLOOR;
+}
+
+describe('a config field is the shape every Settings row uses', () => {
+  it.each(['text', 'number', 'select', 'directory', 'color'] as const)(
+    'a %s field meets the floor',
+    async (type) => {
+      const el = await fixture('config-field', {
+        schema: {
+          key: 'k',
+          label: 'Music folder',
+          type,
+          options: [{ value: 'dark', label: 'Dark' }],
+        },
+        value: type === 'color' ? '#ffd43b' : '',
+      });
+
+      const controls = controlsUnder(el.shadowRoot!);
+
+      // A sweep that found nothing passes vacuously.
+      expect(controls.length).toBeGreaterThan(0);
+      expect(tooSmall(controls)).toEqual([]);
+    },
+  );
+
+  it('grows the toggle, which no sweep of inputs can see', async () => {
+    // The `<input>` is opacity: 0; width: 0; height: 0, so the walk
+    // above skips it as a zero-sized node -- and the thing a finger
+    // hits is the styling <label> around it, which measured 34x19 on
+    // the device. It is absent from #186's tables for exactly that
+    // reason, and it is smaller than everything in them.
+    const el = await fixture('config-field', {
+      schema: { key: 'x', label: 'Scan on startup', type: 'toggle' },
+      value: true,
+    });
+
+    const target = shadow(el, '.toggle-switch');
+
+    expect(boxOf(target)).toBe('44x44');
+  });
+
+  it('keeps the toggle painted at its old size, in its old place', async () => {
+    // A 44px pill is not what a switch should look like. The box is
+    // 44px and the paint is not: the slider is a child centred in it,
+    // and negative inline margins hand the extra width back so the
+    // pill stays flush with the inputs in the rows above.
+    const el = await fixture('config-field', {
+      schema: { key: 'x', label: 'Scan on startup', type: 'toggle' },
+      value: true,
+    });
+
+    const target = shadow(el, '.toggle-switch') as HTMLElement;
+    const slider = shadow(el, '.toggle-slider');
+
+    expect(slider!.getBoundingClientRect().height).toBeLessThan(FLOOR);
+
+    const style = getComputedStyle(target);
+    const handedBack =
+      parseFloat(style.marginInlineStart) + parseFloat(style.marginInlineEnd);
+
+    expect(handedBack).toBeLessThan(0);
+  });
+});
+
+describe('the shortcut editor', () => {
+  it('meets the floor', async () => {
+    const el = await fixture('shortcut-capture', {
+      action: 'play.toggle',
+      label: 'Play/pause',
+      currentKey: 'Space',
+      defaultKey: 'Space',
+    });
+
+    expect(meetsFloor(shadow(el, 'button'))).toBe(true);
+  });
+
+  it('grows the reset button, which only a rebound shortcut renders', async () => {
+    // Not in either of #186's tables, and it cannot be: a sweep of a
+    // freshly-installed app never sees it. It appears the moment
+    // anybody uses the feature.
+    const el = await fixture('shortcut-capture', {
+      action: 'play.toggle',
+      label: 'Play/pause',
+      currentKey: 'K',
+      defaultKey: 'Space',
+    });
+
+    const reset = shadow(el, '.reset-btn');
+
+    expect(reset, 'a rebound shortcut renders a reset button').toBeTruthy();
+    expect(meetsFloor(reset)).toBe(true);
+  });
+});
+
+describe('the library filter', () => {
+  it('meets the floor in both of its placements', async () => {
+    // One component, two mount points since #57 -- the desktop top bar
+    // and Settings -> Libraries -- so it reaches the floor once.
+    const el = await fixture('library-filter');
+
+    const select = shadow(el, 'select');
+
+    expect(select, 'the filter renders a select').toBeTruthy();
+    expect(Math.round(select!.getBoundingClientRect().height)).toBeGreaterThanOrEqual(FLOOR);
+  });
+});
+
+describe('download clients', () => {
+  beforeEach(() => {
+    stub('download.Service.ListProviders', []);
+    stub('download.Service.ProviderKinds', []);
+    stub('config.Config.GetDownloadPreferences', {});
+  });
+
+  it('gives Web Awesome form controls the floor through the library API', async () => {
+    // wa-input's control is inside somebody else's shadow root, so the
+    // height comes from --wa-form-control-height rather than from a
+    // rule of ours reaching in. A custom property inherits through a
+    // shadow boundary, which is what makes a :host declaration reach
+    // it -- and what makes it measurable here.
+    const el = await fixture('download-clients');
+
+    await flush();
+    await expandEverySection(el);
+
+    expect(getComputedStyle(el).getPropertyValue('--wa-form-control-height').trim()).toBe(
+      '44px',
+    );
+
+    // And the outcome, not only the mechanism. A sweep of `input`
+    // reports a wa-input at 204x**42** even when this is right,
+    // because the inner input sits *inside* the control's own 1px
+    // border -- Web Awesome sizes it
+    // `calc(--wa-form-control-height - border-width * 2)`. What a
+    // finger hits is `part=base`, measured at 238x44 on the device.
+    //
+    // This reaches into another library's shadow root, which
+    // `name-dialog.ts` only permits where the failure is bounded. It
+    // is bounded the other way here: this is a test, so a renamed
+    // part fails loudly rather than silently passing, which is the
+    // direction that costs nobody a device session.
+    const input = shadowAll<HTMLElement>(el, 'wa-input').find(
+      (w) => w.getBoundingClientRect().height > 0,
+    );
+
+    expect(input, 'the add form renders a wa-input').toBeTruthy();
+
+    const base = input!.shadowRoot?.querySelector('[part~="base"]');
+
+    expect(base, 'wa-input still calls its control box "base"').toBeTruthy();
+    expect(Math.round(base!.getBoundingClientRect().height)).toBeGreaterThanOrEqual(FLOOR);
+  });
+
+  it('makes each allowed-format checkbox label a target', async () => {
+    const el = await fixture('download-clients');
+
+    await flush();
+    await el.updateComplete;
+
+    // Every section starts collapsed, and a collapsed body is `hidden`
+    // — so its controls measure 0x0 and a sweep of an unexpanded page
+    // reports them all as fine. That is how the issue's first table
+    // came to list seven Settings controls when there are 120.
+    await expandEverySection(el);
+
+    const options = shadowAll<HTMLElement>(el, '.format-option');
+
+    expect(options.length).toBeGreaterThan(0);
+
+    const short = options
+      .map((o) => ({ label: o.textContent?.trim(), h: Math.round(o.getBoundingClientRect().height) }))
+      .filter((o) => o.h < FLOOR);
+
+    expect(short).toEqual([]);
+  });
+});
+
+describe('the whole Settings page', () => {
+  beforeEach(() => {
+    for (const path of [
+      'library.Library.GetAllLibrariesWithTrackCounts',
+      'jobs.Service.GetJobs',
+      'download.Service.ListProviders',
+      'download.Service.ProviderKinds',
+    ]) {
+      stub(path, []);
+    }
+
+    stub('config.Config.GetShortcuts', {});
+    stub('config.Config.GetDownloadPreferences', {});
+    stub('config.Config.GetThemeAccentColor', '#ffd43b');
+    stub('config.Config.GetThemeBackgroundShade', 'dark');
+  });
+
+  it('has no control under the floor with every section expanded', async () => {
+    // The device sweep, run here: eleven collapsed sections is what
+    // made the first table look like seven controls. The density is
+    // behind the disclosures.
+    const el = await fixture('config-page');
+
+    await flush();
+    await el.updateComplete;
+    await expandEverySection(el);
+
+    const controls = controlsUnder(el.shadowRoot!);
+
+    expect(controls.length).toBeGreaterThan(0);
+    expect(tooSmall(controls)).toEqual([]);
+  });
+
+  it('makes a column row a target by naming it, not by growing the checkbox', async () => {
+    // A native checkbox cannot grow its hit area without growing its
+    // paint. The label is the target instead -- which is also the
+    // argument config-field already makes for its own labels, and it
+    // is behaviour rather than annotation: the column's name is now a
+    // click target for its checkbox.
+    const el = await fixture('config-page');
+
+    await flush();
+    await el.updateComplete;
+    await expandEverySection(el);
+
+    const labels = shadowAll<HTMLLabelElement>(el, 'label.column-label');
+
+    expect(labels.length).toBeGreaterThan(0);
+
+    for (const label of labels) {
+      const target = label.htmlFor
+        ? el.shadowRoot!.getElementById(label.htmlFor)
+        : null;
+
+      expect(
+        (target as HTMLInputElement | null)?.type,
+        `${label.textContent?.trim()} names its checkbox`,
+      ).toBe('checkbox');
+      expect(
+        Math.round(label.getBoundingClientRect().height),
+        `${label.textContent?.trim()} is a target`,
+      ).toBeGreaterThanOrEqual(FLOOR);
+    }
+  });
+});
-- 
2.54.0


From 4f628b1f5265db7e640f14ee8139964ca9fa49f5 Mon Sep 17 00:00:00 2001
From: Logan <logan@ljones.me>
Date: Fri, 21 Aug 2026 23:03:18 -0400
Subject: [PATCH 2/2] fix(ui): raise the last controls below the touch floor

The rest of #186's second table, and one thing it could not have said.

    .section-toggle          187x15  autotag
    .folders-menu-trigger     32x18  autotag
    .back-button              32x32  artist-details
    Requests / Downloads tabs 85x34, 96x34
    .search-mode-tab          89x26, 79x26  explore
    explore search input     325x18  in a 36px box

**back-button was six controls, not one.** The issue names it in
artist-details because that is the view the sweep opened; the same
declaration is byte-identical in artist-details, genre-details,
playlist-details, smart-playlist-details, explore-artist-details and
explore-album-details, 32px in all six. So it is styles/back-button.
css.ts now, adopted by each, and a source sweep fails on a seventh
copy -- because the failure this invites is not a size changing, it is
somebody adding a detail view and writing `.back-button` out again,
which no device sweep would catch for the same reason this one did
not. That is icon-language.test.ts's shape, and the argument for it
here is the inverse of the column arrows': one declaration covering
36 controls is cheap to fix, and six declarations of one control are
six chances to miss five.

It is a real 44px box rather than padding with the width handed back:
a detail header runs no fit pass, and this button has a visible
background, so a hit area larger than the circle would be a control
bigger than it looks. The size is #55's, reached there for the same
reason -- "the way out is 44px on a phone".

**The explore search box was two faults.** The row was 36px *and* the
input inside it was 18, so eight pixels at each edge were not a target
at all: a tap near the top of the box landed on the container and did
nothing. The container is 44 and the input stretches to it.

**The Downloads tabs take padding rather than a min-size**, because
the mark for the selected tab is its bottom border -- a min-size
centres the label and leaves the underline 10px beneath it.

page-action-check-now (113x29) is in that table and is not here: it is
a PageAction, so #195 raised it with the rest of the header's actions
and touch-targets.test.ts already covers it.

**The Downloads tabs needed a min-size as well as the padding, and CI
is what said so.** Padding alone made them 44px on this machine and
**43px in the container**: the total is 13 + 13 + 2 + whatever line box
the font gives 13px text, and ubuntu:24.04's is a pixel shorter than
Arch's. A height computed from a font's line box is not a height you
control -- which is #195's "stated as a property on the strength of one
engine" one layer down, in the same PR that recorded it. The padding
stays, because it is what keeps the underline against the label; the
min-size is the floor.

Caught by the new test rather than by a person, which is the half of
this that worked.

Verified on the device, sweeping each view the way the issue was
filed: explore, downloads, autotag and artist-details now report
**one** control under the floor apiece, and it is the skip link, which
#186 already ruled out as keyboard-only. .search-mode-tab 89x44 and
79x44, the search input 325x44, the Downloads tabs 85x44 and 96x44,
.section-toggle 174x44, .folders-menu-trigger 44x44, .back-button
44x44.

All 12 new tests fail on main, the source sweep naming all six copies.
make ui-test 1041 pass; make e2e 236 pass on chromium, which is half
an answer -- CI had the other half, and used it.

Closes #186
---
 .../artist-details/artist-details.ts          |  28 +--
 .../components/autotag-view/autotag-view.ts   |  16 +-
 .../downloads-view/downloads-view.ts          |  20 +-
 .../explore-album-details.ts                  |  21 +-
 .../explore-artist-details.ts                 |  21 +-
 .../components/explore-view/explore-view.ts   |  18 +-
 .../components/genre-details/genre-details.ts |  28 +--
 .../playlist-details/playlist-details.ts      |  27 +-
 .../smart-playlist-details.ts                 |  27 +-
 frontend/src/styles/back-button.css.ts        |  54 ++++
 .../components/detail-touch-targets.test.ts   | 230 ++++++++++++++++++
 11 files changed, 347 insertions(+), 143 deletions(-)
 create mode 100644 frontend/src/styles/back-button.css.ts
 create mode 100644 frontend/test/components/detail-touch-targets.test.ts

diff --git a/frontend/src/components/artist-details/artist-details.ts b/frontend/src/components/artist-details/artist-details.ts
index f360224..12e82d2 100644
--- a/frontend/src/components/artist-details/artist-details.ts
+++ b/frontend/src/components/artist-details/artist-details.ts
@@ -14,6 +14,7 @@ import {
 import '@awesome.me/webawesome/dist/components/icon/icon.js';
 import '@components/cover-grid/cover-grid.js';
 import { designTokens } from '../../styles/tokens.css';
+import { backButton } from '../../styles/back-button.css';
 
 @customElement('artist-details')
 export class ArtistDetails extends LitElement {
@@ -40,7 +41,7 @@ export class ArtistDetails extends LitElement {
     /** Tracks the store's cached array reference to detect refreshes. */
     private lastAlbumsRef: library.Album[] | null = null;
 
-    static override styles = [designTokens, css`
+    static override styles = [designTokens, backButton, css`
         :host {
             display: flex;
             flex-direction: column;
@@ -66,31 +67,6 @@ export class ArtistDetails extends LitElement {
                 );
         }
 
-        .back-button {
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            width: 32px;
-            height: 32px;
-            border: none;
-            border-radius: 50%;
-            background: var(
-                --yj-bg-overlay,
-                rgba(255, 255, 255, 0.06)
-            );
-            color: var(--yj-text-primary, #fff);
-            cursor: pointer;
-            flex-shrink: 0;
-            transition: background-color 0.15s ease;
-        }
-
-        .back-button:hover {
-            background: var(
-                --yj-bg-hover,
-                rgba(255, 255, 255, 0.12)
-            );
-        }
-
         .back-button wa-icon {
             font-size: 16px; /* back button — outside type scale */
         }
diff --git a/frontend/src/components/autotag-view/autotag-view.ts b/frontend/src/components/autotag-view/autotag-view.ts
index 56e2fc4..feed404 100644
--- a/frontend/src/components/autotag-view/autotag-view.ts
+++ b/frontend/src/components/autotag-view/autotag-view.ts
@@ -250,13 +250,20 @@ export class AutotagView extends ViewLifecycleMixin(LitElement) {
             }
 
             /* Collapsible-section toggle used in the Pending header —
-               transparent button that inherits the header's type. */
+               transparent button that inherits the header's type.
+
+               187x**15** before this (#186), which was the smallest
+               control measured anywhere in the app until the column
+               arrows were counted. It is transparent and full-width
+               already, so the floor costs it a height and nothing
+               else. */
             .section-toggle {
                 display: flex;
                 align-items: center;
                 gap: 0.35rem;
                 flex: 1;
                 min-width: 0;
+                min-block-size: 44px;
                 padding: 0;
                 background: transparent;
                 border: 0;
@@ -274,6 +281,8 @@ export class AutotagView extends ViewLifecycleMixin(LitElement) {
                 color: var(--yj-text-tertiary, #888);
             }
 
+            /* 32x18, and it has no background until hover -- so the
+               padding out to a square target is invisible (#186). */
             .folders-menu-trigger {
                 background: transparent;
                 border: 0;
@@ -281,6 +290,8 @@ export class AutotagView extends ViewLifecycleMixin(LitElement) {
                 font-size: 1.1rem;
                 line-height: 1;
                 padding: 0.1rem 0.4rem;
+                min-inline-size: 44px;
+                min-block-size: 44px;
                 border-radius: 3px;
                 cursor: pointer;
             }
@@ -293,7 +304,10 @@ export class AutotagView extends ViewLifecycleMixin(LitElement) {
             .folders-refresh-trigger {
                 display: flex;
                 align-items: center;
+                justify-content: center;
                 font-size: 0.95rem;
+                min-inline-size: 44px;
+                min-block-size: 44px;
             }
 
             .folders-refresh-trigger:disabled {
diff --git a/frontend/src/components/downloads-view/downloads-view.ts b/frontend/src/components/downloads-view/downloads-view.ts
index 626e9a0..928a9e7 100644
--- a/frontend/src/components/downloads-view/downloads-view.ts
+++ b/frontend/src/components/downloads-view/downloads-view.ts
@@ -93,8 +93,26 @@ export class DownloadsView extends ViewLifecycleMixin(LitElement) {
                 border-bottom: 1px solid var(--yj-bg-overlay, rgba(255, 255, 255, 0.08));
             }
 
+            /* 85x34 and 96x34 before this (#186). A tab is the only
+               route to the panel it names, so it is the last control
+               that should be hard to hit -- and the underline that
+               marks the active one is drawn on the bottom border,
+               which a taller box moves further from the label. So the
+               height goes on *padding*, keeping the border against
+               the label rather than 10px below a centred one.
+
+               The min-size is the floor and is not redundant: padding
+               alone made this 44px here and **43px in CI**, because
+               the total is 13 + 13 + 2 + whatever line box the font
+               gives 13px text, and ubuntu:24.04's is a pixel shorter
+               than this machine's. A height computed from a font's
+               line box is not a height you control -- the same
+               mistake #195 made about a layout property measured on
+               one engine, one layer down, and caught here by the test
+               rather than by a person. */
             .tab {
-                padding: 8px 14px;
+                min-block-size: 44px;
+                padding: 13px 14px;
                 font-size: 13px;
                 font-weight: 600;
                 color: var(--yj-text-secondary, #b3b3b3);
diff --git a/frontend/src/components/explore-album-details/explore-album-details.ts b/frontend/src/components/explore-album-details/explore-album-details.ts
index e6e3758..15bd242 100644
--- a/frontend/src/components/explore-album-details/explore-album-details.ts
+++ b/frontend/src/components/explore-album-details/explore-album-details.ts
@@ -2,6 +2,7 @@ import { LitElement, html, css, nothing } from 'lit';
 import { customElement, property, state, query } from 'lit/decorators.js';
 import { classMap } from 'lit/directives/class-map.js';
 import { designTokens } from '../../styles/tokens.css';
+import { backButton } from '../../styles/back-button.css';
 import { srOnly } from '../../styles/sr-only.css';
 import { unownedLabel, unownedStyles } from '@utils/ownership';
 import {
@@ -355,6 +356,7 @@ export class ExploreAlbumDetails extends LitElement implements ContextMenuHost {
 
     static override styles = [
         designTokens,
+        backButton,
         exploreLinkStyles,
         contextMenuStyles,
         srOnly,
@@ -379,25 +381,6 @@ export class ExploreAlbumDetails extends LitElement implements ContextMenuHost {
                     var(--yj-border-subtle, rgba(255, 255, 255, 0.06));
             }
 
-            .back-button {
-                display: flex;
-                align-items: center;
-                justify-content: center;
-                width: 32px;
-                height: 32px;
-                border: none;
-                border-radius: 50%;
-                background: var(--yj-bg-overlay, rgba(255, 255, 255, 0.06));
-                color: var(--yj-text-primary, #fff);
-                cursor: pointer;
-                flex-shrink: 0;
-                transition: background-color 0.15s ease;
-            }
-
-            .back-button:hover {
-                background: var(--yj-bg-hover, rgba(255, 255, 255, 0.12));
-            }
-
             .back-button wa-icon {
                 font-size: 16px;
             }
diff --git a/frontend/src/components/explore-artist-details/explore-artist-details.ts b/frontend/src/components/explore-artist-details/explore-artist-details.ts
index 5c42394..b750f67 100644
--- a/frontend/src/components/explore-artist-details/explore-artist-details.ts
+++ b/frontend/src/components/explore-artist-details/explore-artist-details.ts
@@ -3,6 +3,7 @@ import { LitElement, html, css, nothing } from 'lit';
 import { customElement, property, state, query } from 'lit/decorators.js';
 import { classMap } from 'lit/directives/class-map.js';
 import { designTokens } from '../../styles/tokens.css';
+import { backButton } from '../../styles/back-button.css';
 import {
     LookupArtist,
     BrowseReleaseGroups,
@@ -266,6 +267,7 @@ export class ExploreArtistDetails extends LitElement implements ContextMenuHost
 
     static override styles = [
         designTokens,
+        backButton,
         exploreLinkStyles,
         contextMenuStyles,
         unownedStyles,
@@ -289,25 +291,6 @@ export class ExploreArtistDetails extends LitElement implements ContextMenuHost
                     var(--yj-border-subtle, rgba(255, 255, 255, 0.06));
             }
 
-            .back-button {
-                display: flex;
-                align-items: center;
-                justify-content: center;
-                width: 32px;
-                height: 32px;
-                border: none;
-                border-radius: 50%;
-                background: var(--yj-bg-overlay, rgba(255, 255, 255, 0.06));
-                color: var(--yj-text-primary, #fff);
-                cursor: pointer;
-                flex-shrink: 0;
-                transition: background-color 0.15s ease;
-            }
-
-            .back-button:hover {
-                background: var(--yj-bg-hover, rgba(255, 255, 255, 0.12));
-            }
-
             .back-button wa-icon {
                 font-size: 16px;
             }
diff --git a/frontend/src/components/explore-view/explore-view.ts b/frontend/src/components/explore-view/explore-view.ts
index a7bc195..dace829 100644
--- a/frontend/src/components/explore-view/explore-view.ts
+++ b/frontend/src/components/explore-view/explore-view.ts
@@ -256,15 +256,18 @@ export class ExploreView extends ViewLifecycleMixin(LitElement) implements Conte
                 margin-bottom: 10px;
             }
 
+            /* 89x26 and 79x26 before this (#186). */
             .search-mode-tab {
                 display: inline-flex;
                 align-items: center;
+                justify-content: center;
                 gap: 6px;
                 background: none;
                 border: 1px solid transparent;
                 border-radius: 6px;
                 color: var(--yj-text-tertiary, #888);
                 cursor: pointer;
+                min-block-size: 44px;
                 padding: 5px 12px;
                 font-size: var(--yj-text-sm);
                 font-family: inherit;
@@ -289,7 +292,7 @@ export class ExploreView extends ViewLifecycleMixin(LitElement) implements Conte
                 border-radius: 6px;
                 padding: 0 12px;
                 gap: 8px;
-                height: 36px;
+                min-height: 44px;
                 max-width: 520px;
                 transition: border-color 0.15s ease;
             }
@@ -364,8 +367,15 @@ export class ExploreView extends ViewLifecycleMixin(LitElement) implements Conte
                 flex-shrink: 0;
             }
 
+            /* The input measured 325x**18** and the box around it 36,
+               which is two faults rather than one (#186): the row was
+               under the floor, and the input did not fill it, so eight
+               of those pixels were not a target at all. The container
+               is 44 and the input stretches to it -- a tap anywhere in
+               the box now lands on the input rather than beside it. */
             input {
                 flex: 1;
+                align-self: stretch;
                 background: none;
                 border: none;
                 outline: none;
@@ -379,15 +389,21 @@ export class ExploreView extends ViewLifecycleMixin(LitElement) implements Conte
                 color: var(--yj-text-tertiary, #888);
             }
 
+            /* No background until hover, so the target grows and the
+               glyph does not. It is inside a 44px box already, hence
+               the width alone. */
             .clear-button {
                 display: flex;
                 align-items: center;
                 justify-content: center;
+                align-self: stretch;
                 background: none;
                 border: none;
                 color: var(--yj-text-tertiary, #888);
                 cursor: pointer;
                 padding: 0;
+                min-inline-size: 44px;
+                margin-inline-end: -12px;
                 font-size: var(--yj-text-sm);
                 flex-shrink: 0;
             }
diff --git a/frontend/src/components/genre-details/genre-details.ts b/frontend/src/components/genre-details/genre-details.ts
index 389be91..23322fe 100644
--- a/frontend/src/components/genre-details/genre-details.ts
+++ b/frontend/src/components/genre-details/genre-details.ts
@@ -15,6 +15,7 @@ import { describeError } from '@utils/describe-error';
 import '@awesome.me/webawesome/dist/components/icon/icon.js';
 import '@components/track-list/track-list.js';
 import { designTokens } from '../../styles/tokens.css';
+import { backButton } from '../../styles/back-button.css';
 import { list } from '@utils/binding';
 
 @customElement('genre-details')
@@ -37,7 +38,7 @@ export class GenreDetails extends LitElement {
     private scanCompleteCleanup: (() => void) | null =
         null;
 
-    static override styles = [designTokens, css`
+    static override styles = [designTokens, backButton, css`
         :host {
             display: flex;
             flex-direction: column;
@@ -77,31 +78,6 @@ export class GenreDetails extends LitElement {
                 );
         }
 
-        .back-button {
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            width: 32px;
-            height: 32px;
-            border: none;
-            border-radius: 50%;
-            background: var(
-                --yj-bg-overlay,
-                rgba(255, 255, 255, 0.06)
-            );
-            color: var(--yj-text-primary, #fff);
-            cursor: pointer;
-            flex-shrink: 0;
-            transition: background-color 0.15s ease;
-        }
-
-        .back-button:hover {
-            background: var(
-                --yj-bg-hover,
-                rgba(255, 255, 255, 0.12)
-            );
-        }
-
         .back-button wa-icon {
             font-size: 16px; /* back button — outside type scale */
         }
diff --git a/frontend/src/components/playlist-details/playlist-details.ts b/frontend/src/components/playlist-details/playlist-details.ts
index 9db18c4..80c222c 100644
--- a/frontend/src/components/playlist-details/playlist-details.ts
+++ b/frontend/src/components/playlist-details/playlist-details.ts
@@ -71,6 +71,7 @@ import {
     exploreLinkStyles,
 } from '@utils/explore-link';
 import { designTokens } from '../../styles/tokens.css';
+import { backButton } from '../../styles/back-button.css';
 import { list } from '@utils/binding';
 import {
     ICON_PLAYLIST,
@@ -954,6 +955,7 @@ export class PlaylistDetails
 
     static override styles = [
         designTokens,
+        backButton,
         contextMenuStyles,
         exploreLinkStyles,
         css`
@@ -981,31 +983,6 @@ export class PlaylistDetails
                 );
         }
 
-        .back-button {
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            width: 32px;
-            height: 32px;
-            border: none;
-            border-radius: 50%;
-            background: var(
-                --yj-bg-overlay,
-                rgba(255, 255, 255, 0.06)
-            );
-            color: var(--yj-text-primary, #fff);
-            cursor: pointer;
-            flex-shrink: 0;
-            transition: background-color 0.15s ease;
-        }
-
-        .back-button:hover {
-            background: var(
-                --yj-bg-hover,
-                rgba(255, 255, 255, 0.12)
-            );
-        }
-
         .back-button wa-icon {
             font-size: 16px;
         }
diff --git a/frontend/src/components/smart-playlist-details/smart-playlist-details.ts b/frontend/src/components/smart-playlist-details/smart-playlist-details.ts
index 4b9b112..a97f428 100644
--- a/frontend/src/components/smart-playlist-details/smart-playlist-details.ts
+++ b/frontend/src/components/smart-playlist-details/smart-playlist-details.ts
@@ -62,6 +62,7 @@ import {
 } from '@utils/explore-link';
 import '@components/smart-playlist-editor/smart-playlist-editor.js';
 import { designTokens } from '../../styles/tokens.css';
+import { backButton } from '../../styles/back-button.css';
 import { list } from '@utils/binding';
 import {
     ICON_PLAYLIST,
@@ -242,6 +243,7 @@ export class SmartPlaylistDetails
 
     static override styles = [
         designTokens,
+        backButton,
         contextMenuStyles,
         exploreLinkStyles,
         css`
@@ -269,31 +271,6 @@ export class SmartPlaylistDetails
                 );
         }
 
-        .back-button {
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            width: 32px;
-            height: 32px;
-            border: none;
-            border-radius: 50%;
-            background: var(
-                --yj-bg-overlay,
-                rgba(255, 255, 255, 0.06)
-            );
-            color: var(--yj-text-primary, #fff);
-            cursor: pointer;
-            flex-shrink: 0;
-            transition: background-color 0.15s ease;
-        }
-
-        .back-button:hover {
-            background: var(
-                --yj-bg-hover,
-                rgba(255, 255, 255, 0.12)
-            );
-        }
-
         .back-button wa-icon {
             font-size: 16px;
         }
diff --git a/frontend/src/styles/back-button.css.ts b/frontend/src/styles/back-button.css.ts
new file mode 100644
index 0000000..73c11b0
--- /dev/null
+++ b/frontend/src/styles/back-button.css.ts
@@ -0,0 +1,54 @@
+import { css } from 'lit';
+
+/**
+ * The way out of a detail view, at the app's 44px touch floor.
+ *
+ * #186's second table names `artist-details`' back button at
+ * **32x32**. It is the same declaration in **six** components —
+ * `artist-details`, `genre-details`, `playlist-details`,
+ * `smart-playlist-details`, `explore-artist-details` and
+ * `explore-album-details` — byte-identical, 32px in all six, and the
+ * sweep that filed the issue visited one of them.
+ *
+ * That is the argument for this file rather than six edits. A device
+ * sweep walks the views somebody thought to open, so six copies of a
+ * control is six chances for the next pass to miss five; the arrows
+ * and the toggles were each one declaration covering 36 and 29
+ * controls, and this is the same shape stated the other way round.
+ *
+ * **It is a real 44px box, not padding with the width handed back.**
+ * The header pass had to grow a hit area past its own layout box
+ * because `page-header` measures itself for #69's overflow fit; a
+ * detail view's header does not, so the control can simply be the
+ * target. It also *should* be — this button has a visible background,
+ * so a hit area larger than the circle would be a control that is
+ * bigger than it looks, which is the thing #187 accepts only where a
+ * thin painted track is the point.
+ *
+ * The size is #55's, arrived at for the same reason one component
+ * over: "the way out is 44px on a phone", when the queue panel's close
+ * button was 25x21 and, at phone width, the only pointer route off a
+ * full-screen surface. A detail view has the platform's back gesture
+ * as well, so this is less severe than the queue was — it is the same
+ * control wearing the same mistake.
+ */
+export const backButton = css`
+    .back-button {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        width: 44px;
+        height: 44px;
+        border: none;
+        border-radius: 50%;
+        background: var(--yj-bg-overlay, rgba(255, 255, 255, 0.06));
+        color: var(--yj-text-primary, #fff);
+        cursor: pointer;
+        flex-shrink: 0;
+        transition: background-color 0.15s ease;
+    }
+
+    .back-button:hover {
+        background: var(--yj-bg-hover, rgba(255, 255, 255, 0.12));
+    }
+`;
diff --git a/frontend/test/components/detail-touch-targets.test.ts b/frontend/test/components/detail-touch-targets.test.ts
new file mode 100644
index 0000000..9cc5120
--- /dev/null
+++ b/frontend/test/components/detail-touch-targets.test.ts
@@ -0,0 +1,230 @@
+/**
+ * The controls #186's second table found, outside Settings.
+ *
+ * Six one-off controls across four surfaces, and the reason they are a
+ * test rather than six stylesheet edits is `back-button`. The issue
+ * names it in `artist-details` at **32x32**; it is the same
+ * declaration, byte-identical, in *six* components — because a device
+ * sweep walks the views somebody thought to open, and five of them
+ * were not opened.
+ *
+ * So the assertion is over the whole set rather than over the one that
+ * was measured. That is `icon-language.test.ts`'s shape and it is here
+ * for the same reason: checking one call site checks one call site.
+ *
+ * | control | before | where |
+ * |---|---|---|
+ * | `.folders-menu-trigger` | **32x18** | autotag |
+ * | `.section-toggle` | 187x**15** | autotag |
+ * | `.back-button` | 32x32 | six detail views |
+ * | Requests / Downloads tabs | 85x**34**, 96x**34** | downloads |
+ * | `.search-mode-tab` | 89x**26**, 79x**26** | explore |
+ * | explore search input | 325x**18** in a 36px box | explore |
+ *
+ * `page-action-check-now` (113x29) is in that table and is **not**
+ * here: it is a `PageAction`, so #195 raised it with the rest of the
+ * page header's actions, and `touch-targets.test.ts` already covers
+ * it. Re-asserting it here would be a second statement of one rule.
+ */
+import { beforeEach, describe, expect, it } from 'vitest';
+
+import '@components/artist-details/artist-details';
+import '@components/autotag-view/autotag-view';
+import '@components/downloads-view/downloads-view';
+import '@components/explore-album-details/explore-album-details';
+import '@components/explore-artist-details/explore-artist-details';
+import '@components/explore-view/explore-view';
+import '@components/genre-details/genre-details';
+import '@components/playlist-details/playlist-details';
+import '@components/smart-playlist-details/smart-playlist-details';
+
+import { flush, stub } from '@test/support/harness';
+import { fixture, shadow, shadowAll } from '@test/support/render';
+
+/** The app's touch floor, from #56. */
+const FLOOR = 44;
+
+/**
+ * Every component that draws a back button.
+ *
+ * The list is here rather than derived because deriving it means
+ * reading the source, and this tier renders instead — but it is
+ * checked against the source by `the back button is one declaration`
+ * below, so a seventh view cannot join quietly.
+ */
+const BACK_BUTTON_VIEWS = [
+  'artist-details',
+  'genre-details',
+  'playlist-details',
+  'smart-playlist-details',
+  'explore-artist-details',
+  'explore-album-details',
+] as const;
+
+function boxOf(el: Element | null | undefined): { w: number; h: number } {
+  if (!el) return { w: 0, h: 0 };
+
+  const box = el.getBoundingClientRect();
+
+  return { w: Math.round(box.width), h: Math.round(box.height) };
+}
+
+describe('the way out of a detail view', () => {
+  beforeEach(() => {
+    for (const path of [
+      'library.Library.GetTracks',
+      'library.Library.GetAlbums',
+      'library.Library.GetArtists',
+      'library.Library.GetGenres',
+      'playlist.Service.GetAllPlaylists',
+      'playlist.Service.GetAllPlaylistsWithTracks',
+    ]) {
+      stub(path, []);
+    }
+  });
+
+  it.each(BACK_BUTTON_VIEWS)('is 44px in <%s>', async (tag) => {
+    // #55 settled this one component over, when the queue panel's
+    // close button was 25x21 and, at phone width, the only pointer
+    // route off a full-screen surface: "the way out is 44px". A detail
+    // view has the platform's back gesture as well, so it is less
+    // severe -- and it is the same control wearing the same mistake.
+    const el = await fixture(tag);
+
+    await flush();
+
+    const back = shadow(el, '.back-button');
+
+    expect(back, `${tag} draws a back button`).toBeTruthy();
+    expect(boxOf(back)).toEqual({ w: FLOOR, h: FLOOR });
+  });
+
+  it('is one declaration, so a seventh view cannot miss it', async () => {
+    // The regression this exists for is not a size changing -- it is
+    // somebody adding a detail view and writing `.back-button` out
+    // again at 32px, which is exactly how there came to be six copies.
+    // A sweep of the running app would not catch it either, because a
+    // sweep visits the views you think to open.
+    const sources = import.meta.glob('../../src/components/**/*.ts', {
+      query: '?raw',
+      import: 'default',
+      eager: true,
+    }) as Record<string, string>;
+
+    expect(Object.keys(sources).length, 'the glob read something').toBeGreaterThan(0);
+
+    const redeclared = Object.entries(sources)
+      .filter(([, src]) => /^\s*\.back-button\s*(?::[a-z-]+\s*)?\{/m.test(src))
+      .map(([path]) => path);
+
+    expect(redeclared).toEqual([]);
+  });
+});
+
+describe('autotag', () => {
+  it('raises the two smallest controls the sweep found', async () => {
+    // 187x15 and 32x18. The section toggle was the smallest control
+    // measured anywhere in the app until the column arrows were
+    // counted, and autotag is off by default (#25), which is
+    // presumably why nobody had met either.
+    const el = await fixture('autotag-view');
+
+    await flush();
+
+    for (const selector of ['.section-toggle', '.folders-menu-trigger']) {
+      const control = shadowAll<HTMLElement>(el, selector).find(
+        (c) => c.getBoundingClientRect().height > 0,
+      );
+
+      if (!control) continue;
+
+      expect(boxOf(control).h, `${selector} height`).toBeGreaterThanOrEqual(FLOOR);
+    }
+
+    // The stylesheet is the assertion for whichever of the two this
+    // fixture does not render -- both are behind state a bare mount
+    // does not reach, and a test that silently checked nothing is the
+    // trap icon-language.test.ts's first assertion exists for.
+    const sheet = (el.constructor as typeof HTMLElement & { styles?: unknown })
+      .styles;
+
+    expect(String(sheet)).toContain('min-block-size: 44px');
+  });
+});
+
+describe('the Downloads tabs', () => {
+  beforeEach(() => {
+    stub('download.Service.ListDownloads', []);
+    stub('download.Service.ListRequests', []);
+    stub('download.Service.ListProviders', []);
+  });
+
+  it('are the only route to their panels, and are 44px', async () => {
+    const el = await fixture('downloads-view');
+
+    await flush();
+
+    const tabs = shadowAll<HTMLElement>(el, '[role="tab"]');
+
+    expect(tabs).toHaveLength(2);
+
+    for (const tab of tabs) {
+      expect(boxOf(tab).h, tab.textContent?.trim()).toBeGreaterThanOrEqual(FLOOR);
+    }
+  });
+
+  it('keeps the active underline against the label', async () => {
+    // The height is padding rather than a min-size, because the mark
+    // for the selected tab is the bottom border -- a min-size would
+    // centre the label and leave the underline 10px below it.
+    const el = await fixture('downloads-view');
+
+    await flush();
+
+    const tab = shadowAll<HTMLElement>(el, '[role="tab"]')[0]!;
+    const style = getComputedStyle(tab);
+
+    expect(parseFloat(style.paddingBlockStart)).toBeGreaterThan(8);
+    expect(style.paddingBlockStart).toBe(style.paddingBlockEnd);
+  });
+});
+
+describe("Explore's own search row", () => {
+  beforeEach(() => {
+    stub('explore.Service.GetShelves', { State: 'ready', Shelves: [] });
+    stub('explore.Service.GetIndexStatus', {});
+  });
+
+  it('raises the mode tabs', async () => {
+    const el = await fixture('explore-view');
+
+    await flush();
+
+    const tabs = shadowAll<HTMLElement>(el, '.search-mode-tab');
+
+    expect(tabs.length).toBeGreaterThan(0);
+
+    for (const tab of tabs) {
+      expect(boxOf(tab).h, tab.textContent?.trim()).toBeGreaterThanOrEqual(FLOOR);
+    }
+  });
+
+  it('makes the whole search box the input, not the middle 18px of it', async () => {
+    // Two faults, not one: the row was 36px and the input inside it
+    // was **18**, so half the box was not a target at all -- a tap
+    // near the top or bottom edge landed on the container and did
+    // nothing. The container is 44 and the input stretches to fill it.
+    const el = await fixture('explore-view');
+
+    await flush();
+
+    const box = shadow(el, '.search-container');
+    const input = shadow(el, '.search-container input');
+
+    expect(box, 'the search row renders').toBeTruthy();
+    expect(input, 'it holds an input').toBeTruthy();
+
+    expect(boxOf(box).h).toBeGreaterThanOrEqual(FLOOR);
+    expect(boxOf(input).h).toBeGreaterThanOrEqual(FLOOR);
+  });
+});
-- 
2.54.0