diff --git a/public/channel-proposals.css b/public/channel-proposals.css
index 53d44cdc3..44535f9a3 100644
--- a/public/channel-proposals.css
+++ b/public/channel-proposals.css
@@ -75,7 +75,7 @@
 .ch-proposals-builtin { font-size: 12px; color: var(--warning); }
 .ch-proposals-actions { display: flex; gap: 6px; align-items: center; }
 .ch-proposals-actions button,
-.ch-proposals-toolbar button { min-height: 44px; }
+.ch-proposals-toolbar button { min-height: 48px; }
 .ch-proposals-state {
   font-size: 12px;
   text-transform: capitalize;
diff --git a/public/live.css b/public/live.css
index 818841b71..d229f7525 100644
--- a/public/live.css
+++ b/public/live.css
@@ -495,8 +495,8 @@
   position: absolute;
   top: 50%;
   left: 50%;
-  width: max(100%, 44px);
-  height: 44px;
+  width: max(100%, 48px);
+  height: 48px;
   transform: translate(-50%, -50%);
 }
 
@@ -762,9 +762,9 @@ body.live-fullscreen:not(.nav-pinned) .live-header {
   /* No absolute positioning needed; they stack normally in leaflet-right */
 }
 .live-leaflet-toggle a {
-  width: 44px !important;
-  height: 44px !important;
-  line-height: 44px !important;
+  width: 48px !important;
+  height: 48px !important;
+  line-height: 48px !important;
   font-size: 20px !important;
   background-color: var(--surface-1) !important;
   color: var(--text) !important;
@@ -994,6 +994,9 @@ body.live-fullscreen #liveFullscreenToggle:hover,
 
 /* #1110 Live page node filter — match toolbar control sizing & theme */
 .live-node-filter-wrap { position: relative; display: inline-flex; align-items: center; }
+/* The label around the compact input is its 48px hit area (#235). Scoped
+   to .live-toggles so it wins over .live-toggles label (cursor: pointer). */
+.live-toggles .live-node-filter-hitarea { display: inline-flex; align-items: center; min-height: 48px; cursor: text; }
 input.live-node-filter-input {
   box-sizing: border-box;
   height: 30px;
diff --git a/public/live.js b/public/live.js
index 382638050..2b5622b7b 100644
--- a/public/live.js
+++ b/public/live.js
@@ -1285,7 +1285,7 @@
             </div>
             <div class="live-toggles">
               <div class="live-node-filter-wrap" style="position:relative">
-                <label class="live-node-filter-hitarea" style="display:inline-flex; align-items:center; min-height:44px; cursor:text;">
+                <label class="live-node-filter-hitarea">
                   <input type="text" id="liveNodeFilterInput" placeholder="Filter by node…" autocomplete="off" class="live-node-filter-input" role="combobox" aria-expanded="false" aria-owns="liveNodeFilterDropdown" aria-autocomplete="list" aria-activedescendant="">
                 </label>
                 <div id="liveNodeFilterDropdown" class="live-node-filter-dropdown hidden" role="listbox"></div>
diff --git a/public/style.css b/public/style.css
index 75b358575..41a4830aa 100644
--- a/public/style.css
+++ b/public/style.css
@@ -897,7 +897,7 @@ img.brand-logo {
 .theme-toggle {
   display: inline-flex; align-items: center; cursor: pointer;
   padding: 0; margin: 0; border: none; background: none;
-  min-width: 44px; min-height: 44px; justify-content: center;
+  min-width: 48px; min-height: 48px; justify-content: center;
 }
 .theme-toggle input[type="checkbox"] {
   position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none;
@@ -1725,13 +1725,13 @@ body.scroll-locked { overflow: hidden; }
 .modal > .modal-close:not(.ch-modal-close):hover { background: var(--row-hover, rgba(0,0,0,0.05)); }
 
 /* #1648 M6 (M5 CDP carry-forward): mobile touch-target. The 4px/10px
-   padding above produces an ~24px hit area, below WCAG's 44×44 minimum.
-   Bump on ≤640px so dismiss is reliably tappable on phones. Applies to
-   both the generic .modal-close and the channel-modal close. */
+   padding above produces an ~24px hit area, below the 48×48 house minimum
+   (#2052, #235). Bump on ≤640px so dismiss is reliably tappable on phones.
+   Applies to both the generic .modal-close and the channel-modal close. */
 @media (max-width: 640px) {
   .modal > .modal-close:not(.ch-modal-close),
   .ch-modal-close {
-    min-width: 44px; min-height: 44px;
+    min-width: 48px; min-height: 48px;
     display: inline-flex; align-items: center; justify-content: center;
     padding: 8px 12px;
   }
@@ -1919,7 +1919,7 @@ button.ch-item:hover .ch-icon-btn { opacity: 1; }
   display: none; background: none; border: none; font-size: 22px; cursor: pointer;
   color: var(--text); padding: 8px 12px; border-radius: 4px;
   align-items: center; justify-content: center;
-  min-width: 44px; min-height: 44px;
+  min-width: 48px; min-height: 48px;
   -webkit-tap-highlight-color: rgba(0,0,0,.08);
   touch-action: manipulation;
 }
@@ -2476,8 +2476,12 @@ button.ch-item:hover .ch-icon-btn { opacity: 1; }
      icon-only row actions, smaller empty state. */
   .ch-sidebar-header {
     padding: 6px 10px; gap: 6px;
-    max-height: 56px;
   }
+  /* #235: with 48px touch targets the region pills cannot share a row with
+     the title and + Add at phone width. Keep title and + Add on the first
+     row and give the pills the second. The old max-height: 56px cap only
+     hid the overflow: the list was drawn over the lower half of the pills. */
+  .ch-sidebar-header .ch-header-region { order: 1; }
   .ch-sidebar-title { font-size: 14px; }
   .ch-sidebar-title .ch-icon { font-size: 16px; }
   .ch-add-channel-btn { padding: 4px 8px; font-size: 12px; }
@@ -2486,6 +2490,9 @@ button.ch-item:hover .ch-icon-btn { opacity: 1; }
   .ch-header-region .region-filter-bar { padding: 0; gap: 4px; }
   .ch-header-region .region-pill { padding: 2px 6px; font-size: 11px; }
   .ch-header-region .region-dropdown-trigger { padding: 3px 6px; font-size: 11px; }
+  /* #239: order: 1 puts the dropdown trigger (more than 4 regions) at the
+     right edge of the strip, so its menu opens leftwards from there. */
+  .ch-header-region .region-dropdown-menu { left: auto; right: 0; }
 
   /* Channel list row: name must dominate. Below 768px channels.js renders
      the flat .ch-row list (#1367), which has no inline share/remove
@@ -2734,9 +2741,9 @@ button.ch-item:hover .ch-icon-btn { opacity: 1; }
   backdrop-filter: blur(12px);
   color: var(--text) !important;
   border-color: var(--border) !important;
-  width: 44px !important;
-  height: 44px !important;
-  line-height: 44px !important;
+  width: 48px !important;
+  height: 48px !important;
+  line-height: 48px !important;
   font-size: 20px !important;
 }
 .leaflet-control-zoom a:hover {
@@ -2838,7 +2845,7 @@ button.ch-item.ch-item-encrypted .ch-badge { filter: grayscale(0.6); }
     min-height: 36px;
     font-size: 14px;
   }
-  .ch-avatar.ch-tappable { min-width: 44px; min-height: 44px; width: 44px; height: 44px; }
+  .ch-avatar.ch-tappable { min-width: 48px; min-height: 48px; width: 48px; height: 48px; }
   /* #1253: trim .badge-iata h-padding + margin-left on narrow viewports so
    * the observer cell + IATA pill fits within a 375px viewport. Without this
    * the badge right edge overflows by ~1.25px at 375px (same class of fix
@@ -3334,8 +3341,8 @@ tr[data-hops]:hover { background: rgba(59,130,246,0.1); }
 .home-footer,
 .home-favorites { max-width: 1200px; }
 
-/* #40 — Increase suggest-claim touch target to ≥44px */
-.suggest-claim { min-height: 44px; min-width: 44px; padding: 10px 14px; display: inline-flex; align-items: center; justify-content: center; }
+/* #40, #235 — suggest-claim touch target at the 48px house minimum */
+.suggest-claim { min-height: 48px; min-width: 48px; padding: 10px 14px; display: inline-flex; align-items: center; justify-content: center; }
 
 /* #41 — Lower My Nodes grid minimum to prevent overflow on 375-640px */
 .my-nodes-grid { max-width: 1200px; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
@@ -3579,7 +3586,7 @@ tr[data-hops]:hover { background: rgba(59,130,246,0.1); }
 .area-dropdown-item.area-item-active { color: var(--accent); font-weight: 600; }
 .region-filter-container { margin: 0; padding: 0; display: inline-flex; align-items: center; }
 .region-pill {
-  display: inline-flex; align-items: center; padding: 4px 12px; border-radius: 16px;
+  display: inline-flex; align-items: center; justify-content: center; padding: 4px 12px; border-radius: 16px;
   font-size: 12px; font-weight: 500; cursor: pointer; border: 1.5px solid var(--border);
   background: transparent; color: var(--text-muted); transition: all 0.15s; white-space: nowrap;
   flex-shrink: 0;
@@ -4464,7 +4471,7 @@ button.region-pill-active:hover { opacity: 0.85; color: var(--text-on-accent); }
 
 /* === #630 — Mobile Accessibility Fixes === */
 
-/* #630-1: Touch targets — minimum 44px on touch devices */
+/* #630-1: Touch targets — 48px house minimum on touch devices (#2052, #235) */
 @media (pointer: coarse) {
   .filter-bar .btn,
   .filter-group .btn,
@@ -4478,16 +4485,16 @@ button.region-pill-active:hover { opacity: 0.85; color: var(--text-on-accent); }
   .analytics-time-range button,
   .detail-back-btn,
   .filter-toggle-btn {
-    min-height: 44px;
-    min-width: 44px;
+    min-height: 48px;
+    min-width: 48px;
   }
   .filter-bar input,
   .filter-bar select {
-    height: 44px;
+    height: 48px;
   }
   .region-dropdown-trigger,
   .multi-select-trigger {
-    height: 44px;
+    height: 48px;
   }
 }
 
@@ -5374,7 +5381,7 @@ body { touch-action: pan-y; }
 .ch-back {
   display: none; background: none; border: 0; cursor: pointer;
   color: var(--text); font-size: 24px; line-height: 1;
-  min-width: 40px; min-height: 40px; padding: 0 8px;
+  min-width: 48px; min-height: 48px; padding: 0 8px;
   border-radius: 6px;
   align-items: center; justify-content: center;
   -webkit-tap-highlight-color: rgba(0,0,0,.08);
diff --git a/test-issue-1224-channels-mobile-ux-e2e.js b/test-issue-1224-channels-mobile-ux-e2e.js
index 777034c61..fac298b5d 100644
--- a/test-issue-1224-channels-mobile-ux-e2e.js
+++ b/test-issue-1224-channels-mobile-ux-e2e.js
@@ -2,14 +2,20 @@
  * E2E (#1224): Channels page mobile UX overhaul.
  *
  * At 375x800 viewport the channels page must:
- *  - Render a header strip above the channel list ≤60px tall (page title +
- *    Add chip + region filter chip + analytics overflow) in ONE row.
+ *  - Render a compact header strip above the channel list: at most two rows
+ *    (title + Add chip, then the region filter; ≤120px since #235 made the
+ *    controls 48px), with every control inside the strip and the list
+ *    starting below it. The strip used to be capped at 56px, which kept it
+ *    under the old ≤60px bound while the list was drawn over the pills.
  *  - Render "+ Add Channel" as a compact chip — NOT a full-width hero (the
  *    add control must be narrower than 65% of the sidebar width).
  *  - Render channel rows where the channel name has computed-width > 150px
  *    (the row must not be clipped by oversized inline action buttons).
  *  - Render the "Select a channel" empty state container occupying < 40% of
  *    the viewport height (no desktop-thinking empty state on mobile).
+ *  - With more than 4 regions (mocked; the fixture has 4), open the region
+ *    dropdown's menu inside the viewport at 320-640px touch, every option
+ *    hit at its centre (#239).
  *
  * Run: BASE_URL=http://localhost:13581 node test-issue-1224-channels-mobile-ux-e2e.js
  */
@@ -25,6 +31,27 @@ async function step(name, fn) {
 }
 function assert(c, m) { if (!c) throw new Error(m || 'assertion failed'); }
 
+// The sidebar header strip: at most two rows (title + Add, then the region
+// filter), every control inside it, and the channel list starting below it.
+async function assertHeaderStrip(page) {
+  const r = await page.evaluate(() => {
+    const sidebar = document.querySelector('.ch-sidebar');
+    const header = sidebar && sidebar.querySelector('.ch-sidebar-header');
+    if (!header) return null;
+    const h = header.getBoundingClientRect();
+    const listTop = document.getElementById('chList').getBoundingClientRect().top;
+    const outside = [...header.querySelectorAll('.ch-sidebar-title, button')]
+      .map((e) => ({ name: e.id || String(e.className).split(' ')[0] || e.tagName, b: e.getBoundingClientRect() }))
+      .filter((c) => c.b.width > 0 && (c.b.top < h.top - 0.5 || c.b.bottom > h.bottom + 0.5 || c.b.left < h.left - 0.5 || c.b.right > h.right + 0.5))
+      .map((c) => c.name + ' ' + Math.round(c.b.top) + '-' + Math.round(c.b.bottom));
+    return { height: Math.round(h.height), top: Math.round(h.top), bottom: Math.round(h.bottom), listTop: Math.round(listTop), outside };
+  });
+  assert(r !== null, 'sidebar header not found');
+  assert(r.height <= 120, 'sidebar header must be \u2264120px on mobile, got ' + r.height + 'px');
+  assert(r.outside.length === 0, 'controls stick out of the header (' + r.top + '-' + r.bottom + '): ' + r.outside.join(', '));
+  assert(r.listTop >= r.bottom - 0.5, 'channel list starts at ' + r.listTop + 'px, above the header bottom ' + r.bottom + 'px');
+}
+
 async function run() {
   const launchOpts = { args: ['--no-sandbox'] };
   if (process.env.CHROMIUM_PATH) launchOpts.executablePath = process.env.CHROMIUM_PATH;
@@ -44,16 +71,7 @@ async function run() {
   }, { timeout: 15000 });
   await page.waitForTimeout(300);
 
-  await step('header strip above channel list is \u226460px tall on mobile', async () => {
-    const headerH = await page.evaluate(() => {
-      const sidebar = document.querySelector('.ch-sidebar');
-      const header = sidebar && sidebar.querySelector('.ch-sidebar-header');
-      if (!header) return null;
-      return Math.round(header.getBoundingClientRect().height);
-    });
-    assert(headerH !== null, 'sidebar header not found');
-    assert(headerH <= 60, 'sidebar header must be \u226460px on mobile, got ' + headerH + 'px');
-  });
+  await step('header strip is \u2264120px, holds all its controls, and the list starts below it', () => assertHeaderStrip(page));
 
   await step('"+ Add Channel" is a compact chip, not full-width hero', async () => {
     const ratio = await page.evaluate(() => {
@@ -98,6 +116,56 @@ async function run() {
       '% of viewport (' + data.vh + 'px) \u2014 must be <40%');
   });
 
+  // #235: on a touch phone the region pills and + Add are 48px tall, so the
+  // strip is two 48px rows; it must still hold them without the list
+  // covering any.
+  const touchCtx = await browser.newContext({ viewport: { width: 390, height: 844 }, hasTouch: true, isMobile: true });
+  const tp = await touchCtx.newPage();
+  await tp.goto(BASE + '/#/channels', { waitUntil: 'domcontentloaded' });
+  await tp.waitForSelector('#chList .ch-row', { timeout: 15000 });
+  await tp.waitForSelector('#chRegionFilter .region-pill, #chRegionFilter .region-dropdown-trigger', { timeout: 15000 });
+  await step('touch 390x844: header strip is \u2264120px, holds all its controls, and the list starts below it', () => assertHeaderStrip(tp));
+  await touchCtx.close();
+
+  // #239 F1: with more than 4 regions RegionFilter renders a dropdown, whose
+  // trigger order: 1 puts at the right edge of the strip. Its menu must open
+  // inside the viewport, with every option hit at its centre. The fixture
+  // has 4 regions (pills), so the regions are mocked.
+  const SIX_REGIONS = {
+    SJC: 'San Jose', SFO: 'San Francisco', OAK: 'Oakland',
+    MRY: 'Monterey', SMF: 'Sacramento', LAX: 'Los Angeles',
+  };
+  for (const width of [320, 360, 390, 430, 640]) {
+    const dctx = await browser.newContext({ viewport: { width, height: 844 }, hasTouch: true, isMobile: true });
+    const dp = await dctx.newPage();
+    await dp.route('**/api/config/regions', (route) => route.fulfill({ contentType: 'application/json', body: JSON.stringify(SIX_REGIONS) }));
+    await dp.goto(BASE + '/#/channels', { waitUntil: 'domcontentloaded' });
+    await dp.waitForSelector('#chList .ch-row', { timeout: 15000 });
+    await dp.waitForSelector('#chRegionFilter .region-dropdown-trigger', { timeout: 15000 });
+    await step('touch ' + width + 'x844, 6 regions: header strip holds its controls', () => assertHeaderStrip(dp));
+    await step('touch ' + width + 'x844, 6 regions: the region menu opens on-screen, every option hit at its centre', async () => {
+      await dp.tap('#chRegionFilter .region-dropdown-trigger');
+      await dp.waitForSelector('#chRegionFilter .region-dropdown-menu:not([hidden])', { timeout: 5000 });
+      const r = await dp.evaluate(() => {
+        const vw = document.documentElement.clientWidth;
+        const menu = document.querySelector('#chRegionFilter .region-dropdown-menu');
+        const m = menu.getBoundingClientRect();
+        const items = [...menu.querySelectorAll('.region-dropdown-item')].map((el) => {
+          const b = el.getBoundingClientRect();
+          const hit = document.elementFromPoint(b.left + b.width / 2, b.top + b.height / 2);
+          return { text: el.textContent.trim(), left: Math.round(b.left), right: Math.round(b.right), hit: !!hit && el.contains(hit) };
+        });
+        return { vw, left: Math.round(m.left), right: Math.round(m.right), items, overflow: document.documentElement.scrollWidth - vw };
+      });
+      assert(r.items.length === 7, 'expected All + 6 options, got ' + r.items.length);
+      assert(r.left >= 0 && r.right <= r.vw, 'menu ' + r.left + '-' + r.right + 'px is outside the ' + r.vw + 'px viewport');
+      const missed = r.items.filter((i) => !i.hit).map((i) => i.text + ' (' + i.left + '-' + i.right + ')');
+      assert(missed.length === 0, missed.length + ' of ' + r.items.length + ' options not hit at their centre: ' + missed.join(', '));
+      assert(r.overflow <= 0, 'horizontal page overflow ' + r.overflow + 'px with the menu open');
+    });
+    await dctx.close();
+  }
+
   // Desktop guard: at 1024x800 the sidebar must remain side-by-side with main
   // (layout flex-direction stays row), not stacked. This protects the desktop
   // experience from a regression introduced by the mobile fix.
diff --git a/test-issue-2052-touch-target-e2e.js b/test-issue-2052-touch-target-e2e.js
index 3f22c2d2d..face2554c 100644
--- a/test-issue-2052-touch-target-e2e.js
+++ b/test-issue-2052-touch-target-e2e.js
@@ -12,9 +12,11 @@
  *    (share opens the modal, remove asks for confirmation, which is dismissed).
  *  - Mobile 390x844 touch (flat .ch-row list, #1367): the list renders no
  *    share/remove actions at all, every visible tap target in the channel
- *    sidebar is at least 44x44 (WCAG_MIN: other sidebar controls, e.g. the
- *    coarse-pointer .region-pill, are outside #2052 and still 44), and
- *    tapping a row opens the channel.
+ *    sidebar is at least 48x48 (the coarse-pointer .region-pill included,
+ *    #235), and tapping a row opens the channel. In the open channel the
+ *    header's back button and every sender avatar, and in the add-channel
+ *    dialog the close button, are at least 48x48 with no horizontal
+ *    overflow (#235).
  *  - 768-1330 px (the narrow sectioned sidebar; 768 with touch): share and
  *    remove are at least 48x48, visible, unclipped, hit at their centre and
  *    do not overlap. Before upstream PR 2078 the remove action was clipped
@@ -40,7 +42,8 @@ const HASH = 'user:' + CHANNEL;
 const SHARE = `#chList [data-share-channel="${HASH}"]`;
 const REMOVE = `#chList [data-remove-channel="${HASH}"]`;
 const MIN = 48;
-const WCAG_MIN = 44;
+// A server channel the E2E fixture has messages in, so sender avatars render.
+const MSG_CHANNEL = '#test';
 
 let passed = 0, failed = 0;
 async function step(name, fn) {
@@ -121,20 +124,26 @@ function overlaps(a, b) {
   return !(a.right <= b.left || b.right <= a.left || a.bottom <= b.top || b.bottom <= a.top);
 }
 
-// Share and remove: at least MIN square, visible, unclipped, hit at their
-// centre, and not on top of each other.
+// One control: at least MIN square, visible, unclipped and hit at its centre.
+async function assertTarget(page, selector, name) {
+  const m = await measure(page, selector);
+  assert(m, name + ' not rendered');
+  assert(m.w >= MIN && m.h >= MIN, `${name} renders ${m.w.toFixed(1)}x${m.h.toFixed(1)}, below ${MIN}x${MIN}`);
+  assert(m.visible, name + ' is not visible');
+  assert(m.clippedBy.length === 0, name + ' is clipped by ' + m.clippedBy.join(', '));
+  assert(m.hit, `${name} centre hits "${m.hitOn}", not the control`);
+  return m;
+}
+
+// Share and remove: each a full target, and not on top of each other.
 async function assertActionTargets(page) {
-  const found = {};
-  for (const [name, sel] of [['share', SHARE], ['remove', REMOVE]]) {
-    const m = await measure(page, sel);
-    assert(m, name + ' action not rendered');
-    assert(m.w >= MIN && m.h >= MIN, `${name} renders ${m.w.toFixed(1)}x${m.h.toFixed(1)}, below ${MIN}x${MIN}`);
-    assert(m.visible, name + ' is not visible');
-    assert(m.clippedBy.length === 0, name + ' is clipped by ' + m.clippedBy.join(', '));
-    assert(m.hit, `${name} centre hits "${m.hitOn}", not the control`);
-    found[name] = m;
-  }
-  assert(!overlaps(found.share, found.remove), 'share and remove overlap');
+  const share = await assertTarget(page, SHARE, 'share');
+  const remove = await assertTarget(page, REMOVE, 'remove');
+  assert(!overlaps(share, remove), 'share and remove overlap');
+}
+
+function horizontalOverflow(page) {
+  return page.evaluate(() => document.documentElement.scrollWidth - document.documentElement.clientWidth);
 }
 
 async function main() {
@@ -229,7 +238,7 @@ async function main() {
     // asserts which layout it is.
     await mp.waitForSelector(`#chList [data-hash="${HASH}"]`, { state: 'visible' });
 
-    await step(`mobile 390x844: the list renders no share/remove actions, and every visible tap target is at least ${WCAG_MIN}x${WCAG_MIN}`, async () => {
+    await step(`mobile 390x844: the list renders no share/remove actions, and every visible tap target is at least ${MIN}x${MIN}`, async () => {
       const r = await mp.evaluate(([hash, min]) => ({
         mobileRow: !!document.querySelector(`#chList .ch-row[data-hash="${hash}"]`),
         actions: document.querySelectorAll('#chList .ch-icon-btn, #chList [data-share-channel], #chList [data-remove-channel]').length,
@@ -239,10 +248,10 @@ async function main() {
           .map((e) => { const b = e.getBoundingClientRect(); return { name: e.id || String(e.className).split(' ')[0] || e.tagName, w: +b.width.toFixed(1), h: +b.height.toFixed(1) }; })
           .filter((t) => t.w < min || t.h < min),
         overflow: document.documentElement.scrollWidth - document.documentElement.clientWidth,
-      }), [HASH, WCAG_MIN]);
+      }), [HASH, MIN]);
       assert(r.mobileRow, 'the channel is not rendered as a mobile .ch-row');
       assert(r.actions === 0 && r.desktopRows === 0, `mobile list renders desktop actions (actions=${r.actions}, .ch-item rows=${r.desktopRows})`);
-      assert(r.small.length === 0, `mobile tap targets below ${WCAG_MIN}x${WCAG_MIN}: ` + JSON.stringify(r.small));
+      assert(r.small.length === 0, `mobile tap targets below ${MIN}x${MIN}: ` + JSON.stringify(r.small));
       assert(r.overflow <= 0, 'mobile page overflows horizontally by ' + r.overflow + 'px');
     });
 
@@ -251,6 +260,45 @@ async function main() {
       await mp.waitForFunction((h) => location.hash.includes('/channels/') &&
         (location.hash.includes(encodeURIComponent(h)) || location.hash.includes(h)), HASH);
     });
+
+    await step(`mobile: the open channel's back button is at least ${MIN}x${MIN}, unclipped and hit at its centre (#235)`, async () => {
+      await mp.waitForSelector('#chHeader .ch-back', { state: 'visible' });
+      await assertTarget(mp, '#chHeader .ch-back', 'back button');
+      const overflow = await horizontalOverflow(mp);
+      assert(overflow <= 0, 'channel view overflows horizontally by ' + overflow + 'px');
+    });
+
+    await step(`mobile: in a channel with messages every sender avatar is at least ${MIN}x${MIN}, and nothing overflows horizontally (#235)`, async () => {
+      await mp.tap('#chHeader .ch-back');
+      await mp.tap(`#chList [data-hash="${MSG_CHANNEL}"]`);
+      await mp.waitForSelector('#chMessages .ch-avatar.ch-tappable', { state: 'visible' });
+      const r = await mp.evaluate((min) => {
+        const msgs = document.getElementById('chMessages');
+        const avatars = [...msgs.querySelectorAll('.ch-avatar.ch-tappable')].map((e) => e.getBoundingClientRect());
+        return {
+          count: avatars.length,
+          small: avatars.filter((b) => b.width < min || b.height < min).map((b) => b.width.toFixed(1) + 'x' + b.height.toFixed(1)),
+          msgsOverflow: msgs.scrollWidth - msgs.clientWidth,
+        };
+      }, MIN);
+      assert(r.count > 0, 'no sender avatars rendered in ' + MSG_CHANNEL);
+      assert(r.small.length === 0, `${r.small.length} of ${r.count} avatars below ${MIN}x${MIN}: ` + r.small.slice(0, 5).join(', '));
+      assert(r.msgsOverflow <= 0, 'message list overflows horizontally by ' + r.msgsOverflow + 'px');
+      await assertTarget(mp, '#chHeader .ch-back', 'back button');
+      const overflow = await horizontalOverflow(mp);
+      assert(overflow <= 0, 'channel view overflows horizontally by ' + overflow + 'px');
+    });
+
+    await step(`mobile: the add-channel dialog's close button is at least ${MIN}x${MIN} and hit at its centre, and the page does not overflow (#235)`, async () => {
+      await mp.tap('#chHeader .ch-back');
+      await mp.tap('#chAddChannelBtn');
+      await mp.waitForSelector('#chModalClose', { state: 'visible' });
+      await assertTarget(mp, '#chModalClose', 'dialog close');
+      const overflow = await horizontalOverflow(mp);
+      assert(overflow <= 0, 'page with the dialog open overflows horizontally by ' + overflow + 'px');
+      await mp.tap('#chModalClose');
+      await mp.waitForFunction(() => document.getElementById('chAddChannelModal').classList.contains('hidden'));
+    });
   } finally {
     await mob.ctx.close();
   }
diff --git a/test-touch-targets.js b/test-touch-targets.js
index da84a0121..b1631ea8e 100644
--- a/test-touch-targets.js
+++ b/test-touch-targets.js
@@ -24,25 +24,31 @@ const assert = require('assert');
 const { chromium, devices } = require('playwright');
 
 const REPO = __dirname;
-const CSS = fs.readFileSync(path.join(REPO, 'public/style.css'), 'utf8');
+// Every local stylesheet, in the order index.html links them, so the
+// cascade matches the app (home.css restyles .suggest-claim, live.css and
+// channel-proposals.css carry their own controls).
+const SHEETS = [...fs.readFileSync(path.join(REPO, 'public/index.html'), 'utf8')
+  .matchAll(/<link rel="stylesheet" href="([\w.-]+\.css)\?v=__BUST__">/g)].map((m) => m[1]);
+const CSS = SHEETS.map((f) => fs.readFileSync(path.join(REPO, 'public', f), 'utf8')).join('\n');
 
 // All listed button surfaces use the shared 48px house minimum (#2052).
 const DEFAULT_MIN = 48;
 
-// Each entry: [selector, tag, classes, optional inner-html].
+// Each entry: [selector, tag, classes, optional wrapper]. The wrapper is
+// markup around the control, with {} where the control goes, for rules that
+// only apply inside a parent (`.modal > .modal-close`, `.filter-bar .btn`).
 // Tag matters because some rules are scoped to `button.ch-item` and some only
 // apply to specific input[type=...].
 //
+// The harness is an iPhone 13 (390 px wide, coarse pointer), so the
+// `@media (max-width: 640px)` and `@media (pointer: coarse)` rules apply.
+//
 // Not listed, and why:
 //   .compare-btn      the Compare CTA was removed in #1646 (see style.css)
-//   .ch-back-btn      display:none outside the mobile channels layout, so a
-//                     standalone element in this harness measures 0x0
-//   .filter-toggle-btn  hidden on mobile since #1461 (`.filter-bar >
-//                     .filter-toggle-btn`, display:none !important); the
-//                     control actually shown is the navbar mirror, which
-//                     mobile-page-actions.js builds with class "nav-btn
-//                     filter-toggle-btn-mirror mpa-btn-pill", so the .nav-btn
-//                     entry below already measures it
+//   .ch-back-btn      no markup renders it since #1367; the channel header's
+//                     back button is .ch-back, listed below
+//   .feed-show-btn, .legend-toggle-btn  live.css hides both at <=640px
+//                     (display:none !important), the width this harness has
 const BUTTON_SELECTORS = [
   ['.btn',                   'button', 'btn'],
   ['.btn-icon',              'button', 'btn-icon'],
@@ -64,10 +70,30 @@ const BUTTON_SELECTORS = [
   ['.copy-link-btn',         'button', 'copy-link-btn'],
   ['.alab-btn',              'button', 'alab-btn'],
   ['.fav-star',              'button', 'fav-star'],
+  // #235: the controls that were still 44 px (40 px for .ch-back).
+  ['.theme-toggle',          'label',  'theme-toggle'],
+  ['.modal > .modal-close',  'button', 'modal-close', '<div class="modal">{}</div>'],
+  ['.ch-modal-close',        'button', 'modal-close ch-modal-close', '<div class="modal ch-modal">{}</div>'],
+  ['.ch-back',               'button', 'ch-back', '<div class="ch-layout ch-detail-open">{}</div>'],
+  ['.ch-avatar.ch-tappable', 'div',    'ch-avatar ch-tappable'],
+  ['.suggest-claim',         'button', 'suggest-claim'],
+  ['.detail-back-btn',       'button', 'detail-back-btn'],
+  ['.filter-toggle-btn',     'button', 'filter-toggle-btn'],
+  ['.filter-bar .btn',       'button', 'btn', '<div class="filter-bar filters-expanded">{}</div>'],
+  ['.filter-group .btn',     'button', 'btn', '<div class="filter-group">{}</div>'],
+  ['.tab-btn',               'button', 'tab-btn'],
+  ['.region-pill',           'button', 'region-pill'],
+  ['.region-dropdown-trigger','button', 'region-dropdown-trigger'],
+  ['.multi-select-trigger',  'button', 'multi-select-trigger'],
+  ['.node-count-pill',       'span',   'node-count-pill'],
+  ['.analytics-time-range button', 'button', '', '<div class="analytics-time-range">{}</div>'],
+  ['.leaflet-control-zoom a','a',      '', '<div class="leaflet-bar leaflet-control leaflet-control-zoom">{}</div>'],
+  ['.live-leaflet-toggle a', 'a',      '', '<div class="leaflet-bar leaflet-control live-leaflet-toggle">{}</div>'],
 ];
 
-// Form controls. min-WIDTH is not enforced on these (text fields legitimately
-// span a wide column); we only require min-height: 48px.
+// Form controls and text buttons that only set a height. min-WIDTH is not
+// enforced on these (text fields legitimately span a wide column); we only
+// require min-height: 48px. Entry: [selector, tag, classes, inner, attrs, wrapper].
 const FIELD_SELECTORS = [
   ['select',                 'select', '',                 '<option>x</option>'],
   ['input[type=text]',       'input',  '', null, { type: 'text' }],
@@ -79,32 +105,54 @@ const FIELD_SELECTORS = [
   ['input[type=url]',        'input',  '', null, { type: 'url' }],
   ['input[type=date]',       'input',  '', null, { type: 'date' }],
   ['input[type=time]',       'input',  '', null, { type: 'time' }],
+  // #235
+  ['.filter-bar input',      'input',  '', null, { type: 'text' }, '<div class="filter-bar filters-expanded">{}</div>'],
+  ['.filter-bar select',     'select', '', '<option>x</option>', null, '<div class="filter-bar filters-expanded">{}</div>'],
+  ['.ch-proposals-toolbar button', 'button', '', 'x', null, '<div class="ch-proposals-toolbar">{}</div>'],
+  ['.ch-proposals-actions button', 'button', '', 'x', null, '<div class="ch-proposals-actions">{}</div>'],
+  // In its real context: .live-toggles label must not override it (#239 F2).
+  ['.live-toggles .live-node-filter-hitarea', 'label', 'live-node-filter-hitarea', 'x', null, '<div class="live-toggles"><div class="live-node-filter-wrap">{}</div></div>'],
+];
+
+// Invisible ::after tap pads that give a compact control its hit area.
+// Entry: [name, control markup with data-pad on the padded element].
+const PAD_SELECTORS = [
+  ['live region dropdown ::after', '<div class="live-controls-body"><div class="live-region-filter-container">' +
+    '<button class="region-dropdown-trigger" data-pad="live-region">x</button></div></div>'],
 ];
 
+function wrap(wrapper, html) {
+  return wrapper ? wrapper.replace('{}', html) : html;
+}
+
 function buildSampleHtml() {
   const buttons = BUTTON_SELECTORS
-    .map(([_, tag, cls]) => `<${tag} class="${cls}" data-sel="${cls}">x</${tag}>`)
+    .map(([_, tag, cls, wrapper], i) => wrap(wrapper, `<${tag} class="${cls}" data-btn="${i}">x</${tag}>`))
     .join('\n      ');
   const fields = FIELD_SELECTORS
-    .map(([sel, tag, cls, inner, attrs]) => {
+    .map(([sel, tag, cls, inner, attrs, wrapper], i) => {
       const attrStr = attrs
         ? Object.entries(attrs).map(([k, v]) => `${k}="${v}"`).join(' ')
         : '';
-      const open = `<${tag} ${attrStr} data-sel="${sel.replace(/[\[\]=]/g, '_')}">`;
+      const open = `<${tag} class="${cls}" ${attrStr} data-field="${i}">`;
       const close = tag === 'input' ? '' : `${inner || ''}</${tag}>`;
-      return open + close;
+      return wrap(wrapper, open + close);
     })
     .join('\n      ');
+  const pads = PAD_SELECTORS.map(([, html]) => html).join('\n      ');
 
   // .sort-help sample mirrors the markup the JS produces (post-fix):
   // tabindex="0" so :focus-within can fire on touch tap.
   return `<!doctype html>
 <html><head><meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
 <style>${CSS}</style>
+<style>/* leaflet.css (CDN, not loaded here) makes the bar links blocks */ .leaflet-bar a { display: block; }</style>
 </head><body>
   <div id="harness" style="padding: 16px; display: flex; flex-direction: column; gap: 8px; align-items: flex-start;">
     ${buttons}
     ${fields}
+    ${pads}
     <span class="sort-help" id="sortHelp" tabindex="0" role="button" aria-label="Sort help">ⓘ
       <span class="sort-help-tip">Tip body</span>
     </span>
@@ -155,8 +203,8 @@ async function run() {
   }
 
   // --- Buttons: rendered hit area must be at least 48x48 CSS px.
-  for (const [selector, , cls] of BUTTON_SELECTORS) {
-    const dim = await page.$eval(`[data-sel="${cls}"]`, (el) => {
+  for (const [i, [selector]] of BUTTON_SELECTORS.entries()) {
+    const dim = await page.$eval(`[data-btn="${i}"]`, (el) => {
       const r = el.getBoundingClientRect();
       const cs = getComputedStyle(el);
       return { w: r.width, h: r.height, mh: cs.minHeight, mw: cs.minWidth };
@@ -170,9 +218,8 @@ async function run() {
   }
 
   // --- Form controls: rendered height must be at least 48 CSS px.
-  for (const [selector, , , , attrs] of FIELD_SELECTORS) {
-    const dataKey = selector.replace(/[\[\]=]/g, '_');
-    const dim = await page.$eval(`[data-sel="${dataKey}"]`, (el) => {
+  for (const [i, [selector]] of FIELD_SELECTORS.entries()) {
+    const dim = await page.$eval(`[data-field="${i}"]`, (el) => {
       const r = el.getBoundingClientRect();
       const cs = getComputedStyle(el);
       return { h: r.height, mh: cs.minHeight };
@@ -182,6 +229,43 @@ async function run() {
            `expected height >=48, got ${dim.h}`);
   }
 
+  // --- Tap pads: the ::after box must be at least 48x48.
+  for (const [name, html] of PAD_SELECTORS) {
+    const key = html.match(/data-pad="([^"]+)"/)[1];
+    const dim = await page.$eval(`[data-pad="${key}"]`, (el) => {
+      const cs = getComputedStyle(el, '::after');
+      return { w: parseFloat(cs.width), h: parseFloat(cs.height) };
+    });
+    record(`${name}: tap pad ${dim.w.toFixed(1)}x${dim.h.toFixed(1)}`,
+           dim.w >= DEFAULT_MIN && dim.h >= DEFAULT_MIN,
+           `expected >=${DEFAULT_MIN}x${DEFAULT_MIN}, got ${dim.w}x${dim.h}`);
+  }
+
+  // #239 F2: the hit area keeps the text cursor it had as an inline style
+  // before #235; .live-toggles label (cursor: pointer) must not win over it.
+  const hitCursor = await page.$eval('.live-toggles .live-node-filter-hitarea', (el) => getComputedStyle(el).cursor);
+  record(`.live-toggles .live-node-filter-hitarea: cursor ${hitCursor}`, hitCursor === 'text',
+         `expected cursor text, got ${hitCursor}`);
+
+  // #239 F3: a 48px region pill centres its label.
+  const pillIdx = BUTTON_SELECTORS.findIndex(([sel]) => sel === '.region-pill');
+  const pill = await page.$eval(`[data-btn="${pillIdx}"]`, (el) => {
+    const range = document.createRange();
+    range.selectNodeContents(el);
+    const t = range.getBoundingClientRect();
+    const b = el.getBoundingClientRect();
+    return { offset: (t.left + t.width / 2) - (b.left + b.width / 2), width: b.width };
+  });
+  record(`.region-pill: label centred (offset ${pill.offset.toFixed(1)}px in a ${pill.width.toFixed(1)}px pill)`,
+         Math.abs(pill.offset) <= 1,
+         `expected the label centred within 1px, got offset ${pill.offset}`);
+
+  // The coarse-pointer and <=640px rules above only apply if the harness
+  // really is a phone.
+  const env = await page.evaluate(() => ({ coarse: matchMedia('(pointer: coarse)').matches, narrow: matchMedia('(max-width: 640px)').matches }));
+  record('iPhone context matches (pointer: coarse) and (max-width: 640px)', env.coarse && env.narrow,
+         `expected both true, got ${JSON.stringify(env)}`);
+
   // --- MAJOR-1 verification: .sort-help is keyboard/tap focusable AND the
   // tooltip becomes visible on focus (tap-to-reveal works without hover).
   const tabIndex = await page.$eval('#sortHelp', (el) => el.getAttribute('tabindex'));