From e018ec47b328c61fa8790c2621aefad77ccae1fa Mon Sep 17 00:00:00 2001
From: Doxa Maps <maps@doxa.example>
Date: Tue, 29 Sep 2026 19:56:47 +0000
Subject: [PATCH] A long people-group name is never cut off on a prayer card

The name now sits in a narrow box beside the photo, and the dataset has
16-letter single words (Pagativeshagallu, Liechtensteiners) that would have
overflowed it sideways and been clipped without a sign. The size steps by
the longest word as well as the length, and overflow-wrap:anywhere is the
last resort.
---
 library/packet/card-render.js | 19 ++++++++++++++++---
 1 file changed, 16 insertions(+), 3 deletions(-)

diff --git a/library/packet/card-render.js b/library/packet/card-render.js
index 24d42a3ce..7b16377a2 100644
--- a/library/packet/card-render.js
+++ b/library/packet/card-render.js
@@ -141,9 +141,14 @@ export function createCardRenderer({ strings, lang = 'en', stock = 'poker',
   .nm{position:absolute;display:flex;align-items:center;
     ${SIDE
     ? `left:10px;width:${COL - 20}px;top:${12 + PH + 6}px;bottom:10px;align-items:flex-start;justify-content:center;text-align:center;`
-    : `left:${12 + PW + 12}px;right:12px;top:0;height:${BAND}px;`}
-    font:700 ${SIDE ? 14 : 17}px Georgia,serif;color:#1b1a17;line-height:1.1;overflow:hidden}
+    : `left:${12 + PW + 10}px;right:8px;top:0;height:${BAND}px;`}
+    font:700 ${SIDE ? 14 : 17}px Georgia,serif;color:#1b1a17;line-height:1.1;overflow:hidden;
+    overflow-wrap:anywhere}
+  /* Steps by the LONGEST WORD as well as the length: the name sits in a narrow box beside the photo,
+     and one unbreakable word (the dataset has 16-letter ones, e.g. Pagativeshagallu) would overflow it
+     sideways. overflow-wrap:anywhere is the last resort, so a name is never cut off without a sign. */
   .nm.long{font-size:${SIDE ? 11.5 : 14}px}
+  .nm.xlong{font-size:${SIDE ? 10.5 : 11}px}
 
   .body{position:absolute;right:14px;overflow:hidden;
     left:${SIDE ? COL + 12 : 14}px;
@@ -168,6 +173,14 @@ export function createCardRenderer({ strings, lang = 'en', stock = 'poker',
     font:400 7px Georgia,serif;color:#b9ae99;text-align:right}`;
   }
 
+  // The name's size step, from its length and its longest word (see .nm above).
+  function nameSize(name) {
+    const word = Math.max(0, ...String(name).split(/[\s,()/-]+/).map((w) => w.length));
+    if (word >= 14 || name.length > 28) return ' xlong';
+    if (word >= 11 || name.length > 16) return ' long';
+    return '';
+  }
+
   // One card = one page.
   function card(g) {
     const name = String(g.name || g.slug || '');
@@ -193,7 +206,7 @@ export function createCardRenderer({ strings, lang = 'en', stock = 'poker',
         + `<div class="v">${esc(v)}</div></div>`).join('');
 
     return `<div class="card"><div class="band"></div>${photo}`
-      + `<div class="nm${name.length > 16 ? ' long' : ''}">${esc(name)}</div>`
+      + `<div class="nm${nameSize(name)}">${esc(name)}</div>`
       + `<div class="body">${rows}${relHtml}</div>`
       + `<div class="ft"><div class="qr">${qrSvg(url, { size: 54, margin: 1 })}</div>`
       + `<div class="ftx"><div class="cta">${esc(t('card_cta'))}</div>`