Diskussionsketten: "k weitere Beiträge" als Button im Strich

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01TiXsPUqw7oeomZ8wZrQW5q

frontend/src/app.css

@@ -281,6 +281,22 @@ img.avatar-lg { width: 72px; height: 72px; }
   border-right: var(--line-w) solid gray;
 }
 
+/* "k weitere Beiträge" unterbricht den Strich: der Button steht bündig mit
+   dem Avatar, der Strich läuft oben auf ihn zu und setzt darunter (::after)
+   wieder an bis zum nächsten Avatar. .chain-gap a hebt den Button-Margin auf,
+   damit Strich und Rahmen sich berühren. */
+.chain-gap a {
+  margin: 0;
+}
+.chain-gap::after {
+  content: "";
+  display: block;
+  width: 0;
+  height: 0.6rem;
+  margin-left: calc(var(--avatar-sm) / 2 - var(--line-w));
+  border-left: var(--line-w) solid gray;
+}
+
 /* Interaktionsleiste: Antworten-Button links, Vote-Buttons mittig, Repost
    rechts. Antwort- und Repost-Zahl stehen in den Buttons; der Repost-Cooldown
    wandert in die Byline (siehe setupBump). */

frontend/src/components/EntryCard.tsx

@@ -68,8 +68,9 @@ function LiveCard({ entry: e, when, open }: { entry: Entry; when: string; open:
 
 // Discussion zeigt einen Beitrag mit der Antwort, die seine Diskussion zuletzt
 // fortgesetzt hat: [Beitrag] ── "k weitere Beiträge" ── [jüngste Antwort].
-// Der Strich verbindet die Glieder wie in der Ahnenkette; "k weitere" führt
-// wie die Antwort selbst zu deren Seite, wo die ganze Kette darüber steht.
+// Der Strich verbindet die Glieder wie in der Ahnenkette; "k weitere" steht
+// als Unterbrechung auf dem Strich und führt wie die Antwort selbst zu deren
+// Seite, wo die ganze Kette darüber steht.
 export function Discussion({ entry: e }: { entry: Entry }) {
   if (!e.latest) return <EntryCard entry={e} />;
   const { entry: latest, skipped } = e.latest;
@@ -77,14 +78,11 @@ export function Discussion({ entry: e }: { entry: Entry }) {
     <div className="chain">
       <EntryCard entry={e} />
       {skipped > 0 && (
-        <div className="threadline-wrapper">
-          <div className="threadline"></div>
-          <div className="body muted">
-            <Link to={`/e/${latest.pid}`}>
+        <div className="chain-gap">
+          <Link className="button" to={`/e/${latest.pid}`}>
             {skipped === 1 ? "1 weiterer Beitrag" : `${skipped} weitere Beiträge`}
           </Link>
         </div>
-        </div>
       )}
       <EntryCard entry={latest} />
     </div>