Changeset 0dba092 in Klonkt for src/assets/css/style.css

Timestamp:

06/24/2026 03:09:22 PM (3 months ago)

Author:

Robin Genis <roboburr@…>

Branches:

main

Children:

914eb9f

Parents:

749c183

Message:

style(activitypub): reply field as a floating popover (zero layout shift)

The address field now opens as an absolutely-positioned popover below the button
(appended to body) instead of inline — so neither the post CTA nor a comment row
reflows. Closes on outside-click, Escape, scroll, or cancel; toggles on re-click.

Co-Authored-By: Claude <noreply@…>

File:

• src/assets/css/style.css (modified) (2 diffs)

src/assets/css/style.css

@@ -4419 +4419 @@
 
 /* Reply-via-fediverse CTA on post pages */
-.post-fediverse-cta { margin: 1.75rem 0; display: flex; align-items: center; min-height: 2.4rem; }
+.post-fediverse-cta { margin: 1.75rem 0; }
 .fedi-remote-reply-btn { display: inline-flex; align-items: center; gap: .45rem; }
 .post-fediverse-cta .fedi-remote-reply-btn {
@@ -4432 +4432 @@
 
 /* Inline "reply via fediverse" address form (replaces the browser prompt) */
-.fedi-remote-form { display: inline-flex; align-items: center; gap: .4rem; margin: 0; flex-wrap: wrap; }
+.fedi-remote-form {
+  position: absolute; z-index: 60; display: inline-flex; align-items: center; gap: .4rem;
+  padding: .4rem; border-radius: 999px;
+  background: var(--paper-2, var(--paper, #fff));
+  border: 1px solid color-mix(in srgb, var(--ink, #000) 12%, transparent);
+  box-shadow: 0 10px 30px rgba(0,0,0,.28);
+}
 .fedi-remote-form input {
   height: 2.2rem; padding: 0 .9rem; border-radius: 999px; font: inherit; min-width: 230px;