From f0cb354ae0c68d8d51ce4064d08a16937bcf37ba Mon Sep 17 00:00:00 2001
From: MarekWo <mwojtaszek@gmail.com>
Date: Fri, 5 Jun 2026 21:20:54 +0200
Subject: [PATCH] fix(analyzer): wrap long URLs in Settings list on narrow
 mobile viewports

Without min-width:0 on the flex-grow column and explicit word-break on
the <code>, a long URL with no spaces would refuse to wrap on real
Samsung S20 / Chrome Mobile, pushing the switch and edit/delete buttons
off-screen. DevTools mobile emulation hid the bug because its <code>
wrapping defaults differ slightly from the real device.

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
---
 app/static/js/app.js | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/app/static/js/app.js b/app/static/js/app.js
index e859283..ee4a045 100644
--- a/app/static/js/app.js
+++ b/app/static/js/app.js
@@ -3066,9 +3066,9 @@ function renderAnalyzersList() {
             <span class="text-muted" title="Built-in default — not configurable">
                 <i class="bi bi-star"></i>
             </span>
-            <div class="flex-grow-1">
+            <div class="flex-grow-1" style="min-width: 0;">
                 <div><strong>Letsmesh Analyzer</strong> <span class="badge bg-light text-muted">built-in</span></div>
-                <code class="small text-muted">${escapeHtml(window.analyzerCache.letsmesh_url_template)}</code>
+                <code class="small text-muted text-break" style="word-break: break-all;">${escapeHtml(window.analyzerCache.letsmesh_url_template)}</code>
             </div>
         </div>
     `;
@@ -3094,9 +3094,9 @@ function renderAnalyzersList() {
                         title="${isDefault ? 'Clear default' : 'Mark as default'}">
                     <i class="bi ${starIcon}"></i>
                 </button>
-                <div class="flex-grow-1">
+                <div class="flex-grow-1" style="min-width: 0;">
                     <div class="${nameClass}"><strong>${safeName}</strong>${disabledBadge}</div>
-                    <code class="small text-muted">${escapeHtml(a.url_template)}</code>
+                    <code class="small text-muted text-break" style="word-break: break-all;">${escapeHtml(a.url_template)}</code>
                 </div>
                 <div class="form-check form-switch mb-0" title="Disabled">
                     <input class="form-check-input" type="checkbox"