From bba0b5f36841ef68950154fdbe278d6c249ca375 Mon Sep 17 00:00:00 2001 From: Adam Soltys Date: Tue, 4 Aug 2026 00:22:19 -0700 Subject: Paste lives in the field; the footer fits; claiming a name comes first MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 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 Claude-Session: https://claude.ai/code/session_01Wvj4aoeMZwA7VUGdJP9Swi --- src/style.css | 25 +++++++++++++++++++++++-- 1 file changed, 23 insertions(+), 2 deletions(-) (limited to 'src/style.css') 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; } +} -- cgit v1.2.3