From 24fbf5e2b75efff43a22b129dbe30510b1b34dd0 Mon Sep 17 00:00:00 2001 From: Adam Soltys Date: Sun, 2 Aug 2026 22:55:57 -0700 Subject: Sign in with Nostr: mark fills its circle, icon truly centered MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Two compounding bugs: the SVG viewBox carried 7% of artificial padding so the mark floated small inside its box, and .btn-block forces display:block, silently defeating the .row flex the button relied on — the icon was never actually flex-aligned with the text. The mark's viewBox is tight now and the flex centering lives on an inner wrapper. Icon center measures 0.0px off the button center. Co-Authored-By: Claude Fable 5 Claude-Session: https://claude.ai/code/session_01Wvj4aoeMZwA7VUGdJP9Swi --- src/features/nostrlogin.js | 10 +++++++--- 1 file changed, 7 insertions(+), 3 deletions(-) (limited to 'src/features') diff --git a/src/features/nostrlogin.js b/src/features/nostrlogin.js index 9b4b992..f2605ed 100644 --- a/src/features/nostrlogin.js +++ b/src/features/nostrlogin.js @@ -17,7 +17,7 @@ import { } from '../nostr-login.js'; // The nostr ostrich, in the brand's monochrome. -const OSTRICH = ' '; +const OSTRICH = ' '; export function nostrLoginFeature(ctx) { @@ -155,10 +155,14 @@ export function nostrLoginFeature(ctx) { } // Collapsed by default: one button, expanded only when asked for. if (!ui.nostrLoginOpen) { + // NB .btn-block forces display:block, so the flex centering lives on an + // inner wrapper rather than the button itself. return h('button', { - class: 'btn-block row gap6', style: 'align-items:center;justify-content:center', + class: 'btn-block', onClick: () => { ui.nostrLoginOpen = true; ui.nostrLoginError = ''; render(); }, - }, h('span', { style: 'display:inline-flex;align-items:center;margin-right:8px', html: OSTRICH }), t('nlSignIn')); + }, h('span', { style: 'display:flex;align-items:center;justify-content:center;gap:8px' }, + h('span', { style: 'display:flex;flex-shrink:0', html: OSTRICH }), + t('nlSignIn'))); } return h('div', { class: 'card col', style: 'gap:10px' }, h('div', { class: 'row between' }, -- cgit v1.2.3