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 ; const { entry: latest, skipped } = e.latest; @@ -77,13 +78,10 @@ export function Discussion({ entry: e }: { entry: Entry }) {
{skipped > 0 && ( -
-
-
- - {skipped === 1 ? "1 weiterer Beitrag" : `${skipped} weitere Beiträge`} - -
+
+ + {skipped === 1 ? "1 weiterer Beitrag" : `${skipped} weitere Beiträge`} +
)}