amadan
web: use a centered SVG cross for lightbox/attachment close buttons
The '×' text glyph sits high in its line box, so it looked off-centre. Replaced it with an SVG cross (perfectly centered by the flex).
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
2 files changed,
+11
−6
web/static/chat.js+9 −2web/static/style.css+2 −4
diff --git a/web/static/chat.js b/web/static/chat.js| index 1bc3fee..4d7144a 100644 |
| --- a/web/static/chat.js |
| +++ b/web/static/chat.js |
| @@ -21,6 +21,13 @@ const SESSION_KEY = "lchat_session"; |
| // The fixed reaction set, matching the server allowlist (hub.go). |
| const REACTIONS = ["👍", "❤️", "😂", "😮", "😢", "🎉"]; |
| +// A crisp, optically-centered close icon (the "×" text glyph sits high in its box). |
| +const ICON_X = |
| + '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" ' + |
| + 'stroke-linecap="round" aria-hidden="true">' + |
| + '<line x1="6" y1="6" x2="18" y2="18"></line>' + |
| + '<line x1="18" y1="6" x2="6" y2="18"></line></svg>'; |
| + |
| const app = document.getElementById("app"); |
| const session = loadSession(); |
| @@ -232,7 +239,7 @@ function openLightbox(src, alt) { |
| const closeBtn = document.createElement("button"); |
| closeBtn.className = "lightbox-close"; |
| closeBtn.setAttribute("aria-label", "Close"); |
| - closeBtn.textContent = "×"; |
| + closeBtn.innerHTML = ICON_X; |
| backdrop.appendChild(closeBtn); |
| const onKey = (e) => { |
| @@ -825,7 +832,7 @@ async function start(session) { |
| const rm = document.createElement("button"); |
| rm.type = "button"; |
| rm.className = "preview-remove"; |
| - rm.textContent = "×"; |
| + rm.innerHTML = ICON_X; |
| rm.setAttribute("aria-label", "Remove attachment"); |
| rm.onclick = clearPreview; |
| chip.appendChild(rm); |
diff --git a/web/static/style.css b/web/static/style.css| index aebf1ae..289eabf 100644 |
| --- a/web/static/style.css |
| +++ b/web/static/style.css |
| @@ -224,12 +224,11 @@ input:focus, textarea:focus { outline: 2px solid var(--accent); border-color: tr |
| border-radius: 50%; |
| background: rgba(255, 255, 255, 0.16); |
| color: #fff; |
| - font-size: 26px; |
| - line-height: 1; |
| display: inline-flex; |
| align-items: center; |
| justify-content: center; |
| } |
| +.lightbox-close svg { width: 20px; height: 20px; } |
| /* drag-and-drop overlay */ |
| .drop-overlay { |
| @@ -328,12 +327,11 @@ input:focus, textarea:focus { outline: 2px solid var(--accent); border-color: tr |
| height: 22px; |
| padding: 0; |
| border-radius: 50%; |
| - font-size: 16px; |
| - line-height: 1; |
| display: inline-flex; |
| align-items: center; |
| justify-content: center; |
| } |
| +.preview-remove svg { width: 13px; height: 13px; } |
| /* reactions */ |
| .bubble-row { display: flex; align-items: center; gap: 6px; max-width: 100%; min-width: 0; } |