diff --git a/app/static/css/style.css b/app/static/css/style.css index 9f2a0d4..636336c 100644 --- a/app/static/css/style.css +++ b/app/static/css/style.css @@ -1123,8 +1123,27 @@ main { /* Path info in message meta (incoming messages) */ .path-info { - cursor: help; + cursor: pointer; border-bottom: 1px dotted currentColor; + position: relative; +} + +/* Path popup (mobile-friendly tooltip) */ +.path-popup { + position: absolute; + bottom: 100%; + left: 50%; + transform: translateX(-50%); + background-color: #333; + color: #fff; + padding: 0.35rem 0.6rem; + border-radius: 0.375rem; + font-size: 0.7rem; + white-space: nowrap; + z-index: 1000; + pointer-events: none; + margin-bottom: 4px; + box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25); } /* ============================================================================= diff --git a/app/static/js/app.js b/app/static/js/app.js index 22146b6..28f1be8 100644 --- a/app/static/js/app.js +++ b/app/static/js/app.js @@ -721,7 +721,7 @@ function createMessageElement(msg) { const shortPath = segments.length > 4 ? `${segments[0]}\u2192...\u2192${segments[segments.length - 1]}` : segments.join('\u2192'); - metaInfo += ` | Route: ${shortPath}`; + metaInfo += ` | Route: ${shortPath}`; } if (msg.is_own) { @@ -897,6 +897,31 @@ function resendMessage(content) { input.focus(); } +/** + * Show path popup on tap (mobile-friendly alternative to tooltip) + */ +function showPathPopup(element, fullPath) { + // Remove any existing popup + const existing = document.querySelector('.path-popup'); + if (existing) existing.remove(); + + const popup = document.createElement('div'); + popup.className = 'path-popup'; + popup.textContent = `Path: ${fullPath}`; + element.style.position = 'relative'; + element.appendChild(popup); + + // Auto-dismiss after 4 seconds or on outside tap + const dismiss = () => popup.remove(); + setTimeout(dismiss, 4000); + document.addEventListener('click', function handler(e) { + if (!element.contains(e.target)) { + dismiss(); + document.removeEventListener('click', handler); + } + }); +} + /** * Load connection status */