The scanner's close glyph finds the center of its circle: the base button padding (11px/16px, asymmetric in a fixed 42px round) was shoving the ✕ off-center — flex-centered with the padding dropped

Co-Authored-By: Claude Fable 5 <[email protected]>
Claude-Session: https://claude.ai/code/session_01MrkLsNScXe9b6BviUSdmMr

1 files changed, 8 insertions, 1 deletions

diff --git a/src/style.css b/src/style.css
index bb0951b..1ed2195 100644
--- a/src/style.css
+++ b/src/style.css
@@ -282,7 +282,14 @@ textarea { resize: vertical; min-height: 84px; font-family: var(--mono); font-si
 .scan-overlay video { width: 100%; height: 100%; object-fit: cover; }
 .scan-frame { position: absolute; width: min(70vw, 260px); height: min(70vw, 260px); border: 3px solid #fff; border-radius: 18px; box-shadow: 0 0 0 9999px rgba(0,0,0,0.45); }
 .scan-hint { position: absolute; bottom: 70px; left: 0; right: 0; text-align: center; color: #fff; font-size: 14px; padding: 0 24px; text-shadow: 0 1px 3px rgba(0,0,0,0.7); }
-.scan-close { position: absolute; top: 16px; right: 16px; width: 42px; height: 42px; border-radius: 50%; background: rgba(0,0,0,0.5); color: #fff; border: 1px solid rgba(255,255,255,0.4); font-size: 18px; line-height: 1; cursor: pointer; }
+.scan-close {
+  position: absolute; top: 16px; right: 16px; width: 42px; height: 42px; border-radius: 50%;
+  background: rgba(0,0,0,0.5); color: #fff; border: 1px solid rgba(255,255,255,0.4);
+  font-size: 18px; line-height: 1; cursor: pointer;
+  /* the base button rule's 11px/16px padding shoved the glyph off-center
+     inside this fixed circle — center it properly and drop the padding */
+  display: flex; align-items: center; justify-content: center; padding: 0;
+}
 @keyframes spin { to { transform: rotate(360deg); } }
 .toast {
   position: fixed; left: 50%; bottom: 26px; transform: translateX(-50%);