Paste lives in the field; the footer fits; claiming a name comes first

Paste, on the import and load-seed screens, was a bordered box floating
beside a small label — heavier than the label, detached from the field it
fills. It now sits inside the textarea, and only while that textarea is
empty: the only time it's wanted, and the only time it can't cover what
you typed. It's toggled on the node rather than through render(), since
re-rendering a textarea per keystroke rebuilds it under the caret. Beside
a one-line input (Send) the old placement was right and is untouched.

The footer measured 100dvh, which on a phone can resolve to the tall
viewport at first paint and leave the language picker just below the
fold. svh is the one that fits with the address bar showing. Short
screens also tighten their padding, which buys back the ~50px the
create/import screen was overflowing at 375x553.

And the wizard no longer asks every new user whether they have an old
coinos.io account before letting them have a name. Claiming the name is
the step; the people who do have an old account know it, and say so with
a link. That screen is a statement now, not a question they just
answered. The npub-shaped default address is no longer offered as a
button — a plain skip goes past without showing anyone that.

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

1 files changed, 23 insertions, 2 deletions

diff --git a/src/style.css b/src/style.css
index 5064fae..975f490 100644
--- a/src/style.css
+++ b/src/style.css
@@ -80,9 +80,12 @@ html, body {
   margin: 0 auto;
   padding: 24px 16px 24px;
   /* A column the height of the window, so the footer sits at the bottom of
-     short screens instead of floating under the content. */
+     short screens instead of floating under the content. svh, not dvh: dvh
+     can resolve to the tall viewport (URL bar hidden) at first paint, which
+     puts the footer just below the fold until you scroll — the phone browser
+     showing its address bar is the case that has to fit. */
   min-height: 100vh;
-  min-height: 100dvh;
+  min-height: 100svh;
   display: flex;
   flex-direction: column;
 }
@@ -578,3 +581,21 @@ body::after {
 .chan-pick { width: auto; min-width: 0; padding: 6px 32px 6px 10px; font-size: 13px; font-weight: 600; border-radius: 9px; background-position: right 10px center; }
 .or-split { display: flex; align-items: center; gap: 10px; color: var(--faint); font-size: 13px; }
 .or-split::before, .or-split::after { content: ''; flex: 1; height: 1px; background: var(--line); }
+.paste-wrap { position: relative; display: block; }
+.paste-wrap textarea { display: block; }
+.paste-in {
+  position: absolute; right: 10px; bottom: 12px; display: flex; align-items: center; gap: 6px;
+  padding: 5px 9px; font-size: 12px; font-weight: 600; border-radius: 8px;
+  color: var(--muted); background: var(--paper); border: 1px solid var(--line-strong);
+}
+.paste-in:hover { color: var(--ink); }
+.paste-wrap.has-text .paste-in { display: none; }
+
+/* Short screens (a small phone with its address bar showing) — buy back the
+   vertical room the footer needs by tightening the frame, not the content. */
+@media (max-height: 620px) {
+  #app { padding-top: 12px; padding-bottom: 12px; }
+  .card { padding: 16px; }
+  .footer { padding-top: 14px; padding-bottom: 0; }
+  .tabs { margin: 10px 0; }
+}