From 4616e8acbb48736a4aa3aa3a665792bd0e2149e6 Mon Sep 17 00:00:00 2001
From: irrlicht <irrlicht@yantra.fritz.box>
Date: Sun, 27 Sep 2026 01:02:34 +0200
Subject: [PATCH] =?UTF-8?q?Diskussionsketten:=20"k=20weitere=20Beitr=C3=A4?=
 =?UTF-8?q?ge"=20als=20Button=20im=20Strich?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01TiXsPUqw7oeomZ8wZrQW5q
---
 frontend/src/app.css                  | 16 ++++++++++++++++
 frontend/src/components/EntryCard.tsx | 16 +++++++---------
 2 files changed, 23 insertions(+), 9 deletions(-)

diff --git a/frontend/src/app.css b/frontend/src/app.css
index a604ddf..a794286 100644
--- a/frontend/src/app.css
+++ b/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). */
diff --git a/frontend/src/components/EntryCard.tsx b/frontend/src/components/EntryCard.tsx
index d65ef2d..48cecf4 100644
--- a/frontend/src/components/EntryCard.tsx
+++ b/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,13 +78,10 @@ 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}`}>
-              {skipped === 1 ? "1 weiterer Beitrag" : `${skipped} weitere Beiträge`}
-            </Link>
-          </div>
+        <div className="chain-gap">
+          <Link className="button" to={`/e/${latest.pid}`}>
+            {skipped === 1 ? "1 weiterer Beitrag" : `${skipped} weitere Beiträge`}
+          </Link>
         </div>
       )}
       <EntryCard entry={latest} />