From c52404fbb9c2e730031688a4567c520a2691eddf Mon Sep 17 00:00:00 2001
From: serversdown <brian@serversdown.net>
Date: Sat, 27 Jun 2026 04:40:32 +0000
Subject: [PATCH] =?UTF-8?q?fix:=20add=20Cancel=20to=20recorder=20+=20safe-?=
 =?UTF-8?q?area=20insets=20(notch=20ate=20the=20=E2=9C=95)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The header ✕ sat under the iPhone status bar/notch (overlay had no safe-area
padding), so there was no reachable way out without saving. Add a labeled Cancel
button next to Save, and pad the header/footer for the notch + home indicator.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 lyra/web/static/recorder.css | 11 +++++++++--
 lyra/web/static/recorder.js  |  1 +
 2 files changed, 10 insertions(+), 2 deletions(-)

diff --git a/lyra/web/static/recorder.css b/lyra/web/static/recorder.css
index d6b85b3..21c3c1f 100644
--- a/lyra/web/static/recorder.css
+++ b/lyra/web/static/recorder.css
@@ -25,6 +25,7 @@
   align-items: center;
   gap: 10px;
   padding: 12px 14px;
+  padding-top: calc(12px + env(safe-area-inset-top));   /* clear the notch/status bar */
   border-bottom: 1px solid var(--border, #2a1d12);
 }
 .rec-title { font-weight: 700; color: var(--accent, #ff7a00); }
@@ -94,9 +95,15 @@
 .rec-ln.brd { display: flex; gap: 4px; align-items: center; color: var(--text-fade, #8a8a8a); }
 .rec-ln b { color: var(--accent, #ff7a00); font-weight: 700; }
 
-.rec-foot { padding: 12px 14px; border-top: 1px solid var(--border, #2a1d12); }
-.rec-save { width: 100%; padding: 14px; border-radius: 10px; background: var(--accent, #ff7a00); color: #111; border: none; font-weight: 700; font-size: 1rem; }
+.rec-foot {
+  display: flex; gap: 10px;
+  padding: 12px 14px;
+  padding-bottom: calc(12px + env(safe-area-inset-bottom));
+  border-top: 1px solid var(--border, #2a1d12);
+}
+.rec-save { flex: 1; padding: 14px; border-radius: 10px; background: var(--accent, #ff7a00); color: #111; border: none; font-weight: 700; font-size: 1rem; }
 .rec-save:disabled { opacity: .6; }
+.rec-cancel { padding: 14px 18px; border-radius: 10px; background: var(--bg-elev, #0e0e0e); color: var(--text-fade, #8a8a8a); border: 1px solid var(--border, #2a1d12); font-weight: 600; font-size: 1rem; }
 
 .rec-undo { background: none; border: none; color: var(--text-fade, #8a8a8a); font-size: .75rem; padding: 0 4px; }
 
diff --git a/lyra/web/static/recorder.js b/lyra/web/static/recorder.js
index 074c196..c5e3eda 100644
--- a/lyra/web/static/recorder.js
+++ b/lyra/web/static/recorder.js
@@ -209,6 +209,7 @@
       </div>
 
       <div class="rec-foot">
+        <button class="rec-cancel" data-act="close">Cancel</button>
         <button class="rec-save" data-act="save">Save &amp; replay</button>
       </div>
     `;