Changeset a78a0ef in Klonkt

Timestamp:

08/06/2026 02:14:04 AM (5 weeks ago)

Author:

Claude (agent) <aiclaude@…>

Branches:

main

Children:

50489c7

Parents:

0448e34

git-author:

Robin <roboburr@…> (08/06/2026 02:14:03 AM)

git-committer:

Claude (agent) <aiclaude@…> (08/06/2026 02:14:04 AM)

Message:

Draadkop: de tegenpartij in een kleine uitsparing

De naam van de tegenpartij stond als vette regel boven het gesprek en at daarmee
ruimte op die aan de inhoud toekomt. Het is een label bij de draad, geen kop
erboven, dus het gedraagt zich nu ook zo: een kleine verzonken uitsparing,
kleiner lettertype, gedempte kleur.

Het aantal berichten zit in diezelfde uitsparing in plaats van als tweede pil
ernaast, gescheiden door een dun lijntje. Scheelt een element en een gat.

Verder is de kop lager (marge .5 -> .35rem, tussenruimte .5 -> .4rem) en kapt
een lange deelnemerslijst af op 60% breedte, zodat de post-link rechts altijd
past.

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

Location:

src/views

Files:

• pages/messages.ejs (modified) (1 diff)
• partials/msg-item.ejs (modified) (1 diff)

src/views/pages/messages.ejs

@@ -151 +151 @@
      in aparte chips zaten. */
   .msg-thread { display: block; }
-  .msg-thread-head { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; margin-bottom: .5rem; }
-  .msg-thread-who { font-weight: 600; }
-  .msg-thread-count { font-size: .78em; padding: .05rem .4rem; border-radius: 999px;
-    background: color-mix(in srgb, var(--ink, #000) 10%, transparent); }
+  .msg-thread-head { display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; margin-bottom: .35rem; }
+  /* De tegenpartij is een labeltje bij het gesprek, geen kop erboven: een
+     kleine verzonken uitsparing, zodat de bubbels eronder de ruimte krijgen.
+     Het aantal zit in dezelfde uitsparing in plaats van ernaast. */
+  .msg-thread-who { display: inline-flex; align-items: center; gap: .3rem;
+    font-size: .78em; line-height: 1.5; font-weight: 500;
+    padding: .05rem .5rem; border-radius: 999px;
+    color: color-mix(in srgb, var(--ink, #000) 62%, transparent);
+    background: color-mix(in srgb, var(--ink, #000) 5%, transparent);
+    box-shadow: inset 0 1px 2px color-mix(in srgb, var(--ink, #000) 9%, transparent);
+    max-width: 60%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+  .msg-thread-count { font-variant-numeric: tabular-nums; opacity: .75;
+    padding-inline-start: .3rem; border-inline-start: 1px solid color-mix(in srgb, var(--ink, #000) 14%, transparent); }
   .msg-thread-post { display: inline-flex; align-items: center; gap: .3rem; font-size: .85em;
     margin-inline-start: auto; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

src/views/partials/msg-item.ejs

@@ -14 +14 @@
         <li class="msg-item msg-thread<%= _tnew ? ' is-new' : '' %>" data-kind="conv" data-who="<%= (_tpeople.join(' ') + ' ' + (_tto || '')).toLowerCase() %>">
           <div class="msg-thread-head">
-            <span class="msg-thread-who"><%= _tlabel %></span>
-            <% if (n.count > 1) { %><span class="msg-thread-count"><%= n.count %></span><% } %>
+            <%# Tegenpartij en aantal in EEN uitsparing: het is een label bij het
+                gesprek, geen kop erboven. Zo houdt de inhoud de ruimte. %>
+            <span class="msg-thread-who"><%= _tlabel %><% if (n.count > 1) { %><span class="msg-thread-count"><%= n.count %></span><% } %></span>
             <% if (_tnew) { %><span class="msg-new" title="<%= t('msg.new') %>"></span><% } %>
             <%# De context bij de draad: waar gaat dit gesprek over? Zonder deze