From 98eeb4183d6f5429c1e12885bfd6ebe008cb7023 Mon Sep 17 00:00:00 2001
From: Doxa Maps <maps@doxa.example>
Date: Thu, 1 Oct 2026 13:01:11 +0000
Subject: [PATCH] UPG-100 batch HUD: the message line sits at the top, where
 nothing covers it

On a phone the first-visit PinHint toast sits over the HUD's bottom edge, and the
message line under the buttons was covered there. A hit-test across the text
found the toast at 30%, and the screenshot read "This needs a" and no more.
The line (Copy's flash, the phone ceiling's notice, failures, the print's
progress) now sits under the hint at the top of the HUD, at 11px instead of 9px.
check:batch-selection-export pins it above the action rows.
---
 internal/check-batch-selection-export.mjs       | 2 ++
 plugin-designs/my-upg-100-list/upg-100-list.vue | 8 ++++++--
 2 files changed, 8 insertions(+), 2 deletions(-)

diff --git a/internal/check-batch-selection-export.mjs b/internal/check-batch-selection-export.mjs
index 55e549b08..a32cd67e4 100644
--- a/internal/check-batch-selection-export.mjs
+++ b/internal/check-batch-selection-export.mjs
@@ -271,6 +271,8 @@ const wired = {
       && actions.every((b) => b && !/flashStatus\(/.test(b))
       && /class="upg-hud-flash" role="status" aria-live="polite">\{\{ copyFlash \|\| hudProgress \}\}/.test(vue)
       && /hudProgress\.value = printStatus;/.test(vue)
+      // …and it sits ABOVE the action rows: on a phone the PinHint toast covers the HUD's bottom edge
+      && vue.indexOf('class="upg-hud-flash"') > 0 && vue.indexOf('class="upg-hud-flash"') < vue.indexOf('class="upg-hud-actions"')
       && !/\.upg-hud-flash\{[^}]*display:\s*none/.test(vue) && !/@media[^{]*\{[^}]*\.upg-hud-flash\{[^}]*display:\s*none/.test(vue)
   })(),
   'the regroup warning on Copy': /const warn = regroupable\(sel\) \? '' : t\('upgMap\.copyNotRegroupable'\)/.test(vue),
diff --git a/plugin-designs/my-upg-100-list/upg-100-list.vue b/plugin-designs/my-upg-100-list/upg-100-list.vue
index c64d9ba64..2c3a6035d 100644
--- a/plugin-designs/my-upg-100-list/upg-100-list.vue
+++ b/plugin-designs/my-upg-100-list/upg-100-list.vue
@@ -632,7 +632,7 @@ useShadowStyles(
   // only renders while batch mode is ON (progressive disclosure).
   '.upg-hud-btn.clear{background:rgba(148,163,184,.12);border-color:rgba(148,163,184,.4);' +
   'color:#cbd5e1}' +
-  '.upg-hud-flash{margin-top:5px;font-size:9px;color:#6ee7b7;min-height:11px}' +
+  '.upg-hud-flash{margin:4px 0 2px;font-size:11px;line-height:1.3;color:#6ee7b7;min-height:14px}' +
   '.upg-hud-hint{margin-top:4px;font-size:9px;color:#64748b}' +
   // R1.1 (g): the color-picker row — 8 preset swatches + a custom hex input.
   // (Still no backticks anywhere in this string — the burned-3x rule.)
@@ -3360,6 +3360,11 @@ onBeforeUnmount(() => {
       <div class="upg-hud-hint">
         {{ t('messages.tapTerritoriesHint') }}
       </div>
+      <!-- ★ THE HUD'S MESSAGE LINE SITS AT THE TOP, not under the buttons: on a phone the first-visit PinHint toast
+           sits over the HUD's bottom edge, and a line down there was covered ("This needs a desktop or laptop
+           computer." read as "This needs a"). Copy's flash, the phone ceiling's notice, failures and the print's
+           progress all appear here (hudSay / hudProgress). -->
+      <div v-if="selCount" class="upg-hud-flash" role="status" aria-live="polite">{{ copyFlash || hudProgress }}</div>
       <div v-if="selCount" class="upg-hud-head">
         <!-- ★ A LABEL FORM ("Territories: {count}"), NOT A PLURAL KEY. This was
              `territor{{ selCount === 1 ? 'y' : 'ies' }}` — English pluralisation welded
@@ -3419,7 +3424,6 @@ onBeforeUnmount(() => {
           @click="exportSelectionCsv">{{ busyAction === 'csv' ? t('buttons.working') : t('upgMap.exportCsv') }}</button>
         <button class="upg-hud-btn clear" @click="clearSelection">{{ t('buttons.clearSelection') }}</button>
       </div>
-      <div v-if="selCount" class="upg-hud-flash" role="status" aria-live="polite">{{ copyFlash || hudProgress }}</div>
     </div>
     <div class="upg-status">{{ status }}</div>
   </div>