eleven / ocho Public

web: give the passkey-safety dismiss button room to breathe (#1027)

* web: give the passkey-safety dismiss button room to breathe

The escalated "I understand — I can lose access to this chat" label wraps
to two lines in the sidebar's narrow banner. It inherited .linkish's tight
6px/8px padding plus the default button's 999px pill radius, so the curved
ends crowded right up against the wrapped text. Widen the padding and tone
the radius down to a shape that suits a multi-line block.

Co-Authored-By: Claude <noreply@anthropic.com>

* web: scope the dismiss-button padding fix to the escalated state

Rescope the previous fix from .backup-banner-dismiss.linkish to
.backup-banner-dismiss.danger. linkish is present in both the initial
"Remind me later" stage and the escalated "I understand..." stage (it's
never removed, only danger gets added on top), so keying off it changed
the padding/radius of the single-line stage too, even though it was never
broken. Scoping to .danger targets exactly the wrapped, two-line state
that actually needed more room.

Co-Authored-By: Claude <noreply@anthropic.com>

---------

Co-authored-by: Claude <noreply@anthropic.com>

James Adam 3 months ago bab1d502c0adc0cd794300cd65c4e73c2ce3ce04 parent ab2d9ed

1 file changed, +9 −0

web/static/style.css +9 −0

diff --git a/web/static/style.css b/web/static/style.css

index 60b3f7e..31fb619 100644

--- a/web/static/style.css

+++ b/web/static/style.css

@@ -2126,6 +2126,15 @@ input.switch:disabled { opacity: 0.5; cursor: default; }

white-space: normal;

overflow-wrap: anywhere;

}

+/* Once escalated (.danger) the label wraps to two lines, and .linkish's

+ 6px/8px padding plus the default button's 999px pill radius crowd the text

+ against the curved corners. Scoped to .danger (beats .linkish's padding at

+ higher specificity) rather than .linkish itself, so the single-line

+ "Remind me later" stage keeps its original tight link-style padding. */

+.backup-banner-dismiss.danger {

+ padding: 12px 16px;

+ border-radius: 16px;

/* Both headers share a height so the thread pane's header lines up with the

sidebar's. Only the thread header carries a divider — the sidebar's "Chats"

header flows straight into the chat list (with the search field below it). */