diff --git a/app/static/js/repeater-manage.js b/app/static/js/repeater-manage.js index 2c1024f..dcc9e2c 100644 --- a/app/static/js/repeater-manage.js +++ b/app/static/js/repeater-manage.js @@ -157,7 +157,11 @@ function renderHeader() { const r = _repeater; document.getElementById('rptName').textContent = r.name || r.public_key.substring(0, 12); document.getElementById('rptPubkey').textContent = `<${shortPubkey(r.public_key)}>`; - document.getElementById('rptPath').textContent = r.path_or_mode || '—'; + // '→' offers no line-break opportunity, so a multi-hop path would run off + // a narrow screen; a zero-width space after each arrow lets it wrap by hop. + const path = r.path_or_mode || '—'; + const ZWSP = String.fromCharCode(0x200B); + document.getElementById('rptPath').textContent = path.replace(/→/g, '→' + ZWSP); const loc = (r.adv_lat != null && r.adv_lon != null && (r.adv_lat !== 0 || r.adv_lon !== 0)) ? `${r.adv_lat.toFixed(4)}, ${r.adv_lon.toFixed(4)}` diff --git a/app/templates/repeater-manage.html b/app/templates/repeater-manage.html index c3fa9ea..6cf0ab1 100644 --- a/app/templates/repeater-manage.html +++ b/app/templates/repeater-manage.html @@ -97,6 +97,18 @@ color: var(--text-secondary, #6c757d); } + /* Long paths must wrap inside the card instead of overflowing the + screen; breaks are offered after each hop arrow (see renderHeader). */ + #rptPath { + overflow-wrap: anywhere; + } + + /* Pin icon + coordinates move to the next line as one unit. */ + .rpt-header-loc { + display: inline-block; + white-space: nowrap; + } + .rpt-pubkey { font-family: var(--bs-font-monospace, monospace); font-size: 0.8rem; @@ -322,7 +334,7 @@
— - — + —