From abd28162aa66664ef790e0d1a08e0255cf9db7d9 Mon Sep 17 00:00:00 2001
From: "Tommy D. Rossi" <beats.by.morse@gmail.com>
Date: Fri, 20 Feb 2026 12:43:06 +0100
Subject: [PATCH] liveline: inline heading rule, restore diagram, increase
 spacing

- SectionHeading now renders as flex row with hairline rule extending
  to fill remaining width after the heading text (matching benji.org)
- Removed separate Divider from Section component
- Restored original diagram layout from before refactor
- Increased article gap to 32px, heading padding to 24px top/bottom
- Centered image captions
---
 website/src/components/markdown.tsx | 12 ++++++++----
 website/src/routes/liveline.tsx     | 22 +++++++++++-----------
 2 files changed, 19 insertions(+), 15 deletions(-)

diff --git a/website/src/components/markdown.tsx b/website/src/components/markdown.tsx
index 0b7494c..a3bffda 100644
--- a/website/src/components/markdown.tsx
+++ b/website/src/components/markdown.tsx
@@ -198,10 +198,15 @@ export function SectionHeading({ id, children }: { id: string; children: React.R
         color: "var(--ll-text-primary)",
         margin: 0,
         padding: 0,
-        transform: "translateY(-10px)",
+        display: "flex",
+        alignItems: "center",
+        gap: "12px",
+        paddingTop: "24px",
+        paddingBottom: "24px",
       }}
     >
-      {children}
+      <span style={{ whiteSpace: "nowrap" }}>{children}</span>
+      <span style={{ flex: 1, height: "1px", background: "var(--ll-divider)" }} />
     </h1>
   );
 }
@@ -267,7 +272,6 @@ export function Divider() {
 export function Section({ id, title, children }: { id: string; title: string; children: React.ReactNode }) {
   return (
     <>
-      <Divider />
       <SectionHeading id={id}>{title}</SectionHeading>
       {children}
     </>
@@ -569,7 +573,7 @@ export function EditorialPage({
       >
         <div style={{ height: "80px" }} />
 
-        <article className="liveline-article flex flex-col gap-[24px]">
+        <article className="liveline-article flex flex-col gap-[32px]">
           {children}
         </article>
       </div>
diff --git a/website/src/routes/liveline.tsx b/website/src/routes/liveline.tsx
index d9632be..aa634e4 100644
--- a/website/src/routes/liveline.tsx
+++ b/website/src/routes/liveline.tsx
@@ -102,19 +102,19 @@ playwriter -s 1 -e "await page.locator('aria-ref=e5').click()"`}</CodeBlock>
         back.
       </P>
 
-      <CodeBlock lang="bash">{`┌─────────────────────┐     ┌─────────────────────┐     ┌─────────────────┐
+      <CodeBlock lang="bash">{`┌─────────────────────┐     ┌──────────────────────┐     ┌─────────────────┐
 │   BROWSER           │     │   LOCALHOST          │     │   CLIENT        │
 │                     │     │                      │     │                 │
-│  ┌───────────────┐  │     │ WebSocket Server     │     │  ┌───────────┐ │
-│  │   Extension   │<----------->  :19988          │     │  │ CLI / MCP │ │
-│  └───────┬───────┘  │ WS  │                      │     │  └───────────┘ │
-│          │          │     │  /extension           │     │        │       │
-│    chrome.debugger  │     │       │               │     │        v       │
-│          v          │     │       v               │     │  ┌───────────┐ │
-│  ┌───────────────┐  │     │  /cdp/:id <--------------->│  │ execute   │ │
-│  │ Tab 1 (green) │  │     └──────────────────────┘  WS │  └───────────┘ │
-│  │ Tab 2 (green) │  │                                  │        │       │
-│  │ Tab 3 (gray)  │  │     Tab 3 not controlled         │ Playwright API │
+│  ┌───────────────┐  │     │ WebSocket Server     │     │  ┌───────────┐  │
+│  │   Extension   │<───────┬───>  :19988          │     │  │ CLI / MCP │  │
+│  └───────┬───────┘  │ WS  │                      │     │  └───────────┘  │
+│          │          │     │  /extension          │     │        │        │
+│    chrome.debugger  │     │       │              │     │        v        │
+│          v          │     │       v              │     │  ┌────────────┐ │
+│  ┌───────────────┐  │     │  /cdp/:id <───────────────>│  │ execute    │ │
+│  │ Tab 1 (green) │  │     └──────────────────────┘  WS │  └────────────┘ │
+│  │ Tab 2 (green) │  │                                  │        │        │
+│  │ Tab 3 (gray)  │  │     Tab 3 not controlled         │ Playwright API  │
 └─────────────────────┘     (extension not clicked)      └─────────────────┘`}</CodeBlock>
 
       <P>