Changeset 151a72c in Klonkt for src/views

Timestamp:

06/16/2026 06:46:10 AM (3 months ago)

Author:

roboburr <roboburr@…>

Branches:

main

Children:

eef691e

Parents:

4fee228

Message:

Circle UI: reason on its own line + clean word wrapping; message without duplicate URL

The outdated reason was pressed against the badge in a <small> with
word-break:break-all (intended for the URL) → broke in the middle of words.
Now a separate .circ-reason line with normal wrapping, and the proto message
no longer repeats the URL (the card already shows it).

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@…>

File:

• src/views/pages/admin-circle.ejs (modified) (3 diffs)

src/views/pages/admin-circle.ejs

@@ -58 +58 @@
               <strong><%= l.label || l.remote_url %></strong>
               <small><%= l.remote_url %></small>
-              <small>
+              <div class="circ-status">
                 <% if (l.status === 'active') { %>
                   <span class="circ-badge ok">&#10003; actief</span>
-                  <%= counts[l.id] || 0 %> posts
-                  <% if (l.last_synced) { %>&middot; laatst: <%= l.last_synced %><% } %>
+                  <span class="circ-meta"><%= counts[l.id] || 0 %> posts<% if (l.last_synced) { %> &middot; laatst: <%= l.last_synced %><% } %></span>
                 <% } else if (l.status === 'outdated') { %>
                   <span class="circ-badge err">&#8635; versie-mismatch</span>
-                  <%= l.last_error || 'Deze site draait een andere Klonkt-protocolversie — bijwerken nodig om te federeren.' %>
+                  <div class="circ-reason"><%= l.last_error || 'Deze site draait een andere Klonkt-protocolversie — bijwerken nodig om te federeren.' %></div>
                 <% } else if (l.status === 'error') { %>
                   <span class="circ-badge err">&#9888; fout</span>
-                  <%= l.last_error || '' %>
+                  <% if (l.last_error) { %><div class="circ-reason"><%= l.last_error %></div><% } %>
                 <% } else if (l.status === 'paused') { %>
                   <span class="circ-badge">&#9208; gepauzeerd</span>
@@ -74 +73 @@
                   <%# Onbekende status: toon 'm rauw + eventuele reden i.p.v. stil "gepauzeerd". %>
                   <span class="circ-badge"><%= l.status %></span>
-                  <%= l.last_error || '' %>
+                  <% if (l.last_error) { %><div class="circ-reason"><%= l.last_error %></div><% } %>
                 <% } %>
-              </small>
+              </div>
             </div>
             <div class="circ-actions">
@@ -111 +110 @@
 .circ-main small { color: var(--ink-muted); font-size: .78rem; word-break: break-all; }
 .circ-actions { display: flex; gap: .4rem; flex-shrink: 0; }
-.circ-badge { font-size: .72rem; font-weight: 700; padding: .1rem .45rem; border-radius: 20px; background: var(--rule); }
+.circ-badge { font-size: .72rem; font-weight: 700; padding: .1rem .45rem; border-radius: 20px; background: var(--rule); white-space: nowrap; }
 .circ-badge.ok { background: #d1fae5; color: #065f46; }
 .circ-badge.err { background: #fee2e2; color: #991b1b; }
+.circ-status { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem .5rem; margin-top: .25rem; font-size: .78rem; color: var(--ink-muted); }
+.circ-meta { color: var(--ink-muted); }
+/* Reden op een eigen regel onder de badge; normale woordafbreking (geen break-all
+   die hele zinnen midden in woorden knipt — dat zit op de URL-small, niet hier). */
+.circ-reason { flex-basis: 100%; line-height: 1.4; color: var(--ink-muted); word-break: normal; overflow-wrap: anywhere; }
 .btn-danger { color: #991b1b; border-color: #fca5a5; }
 .alert { padding: .75rem 1rem; border-radius: 6px; margin-bottom: 1rem; }