serversdown/project-lyra
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1 Wiki Activity

fix: add Cancel to recorder + safe-area insets (notch ate the ✕)

Browse Source 
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>
This commit is contained in:
serversdown
2026-06-27 04:40:32 +00:00
parent 4fd7eff7e9
commit c52404fbb9
2 changed files with 10 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files
lyra/web/static/recorder.css
+9 -2
View File
@@ -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; }