From d5620476180443cb1a8869d37ca26410a2e569a5 Mon Sep 17 00:00:00 2001
From: "Tommy D. Rossi" <beats.by.morse@gmail.com>
Date: Fri, 20 Feb 2026 11:00:01 +0100
Subject: [PATCH] add bleed to code blocks and images on liveline page

Code blocks and chart placeholders now extend 36px beyond the 550px prose
column on each side via negative margins (.ll-bleed class). This aligns the
code text (after line numbers) flush with the prose left edge.

- --ll-bleed: 36px CSS variable (8px div padding + 28px line-number span)
- Responsive: bleed disabled below 650px viewport
- overflow-x-hidden on page wrapper prevents horizontal scroll
---
 website/src/routes/liveline.tsx |  6 +++---
 website/src/styles/liveline.css | 22 ++++++++++++++++++++++
 2 files changed, 25 insertions(+), 3 deletions(-)

diff --git a/website/src/routes/liveline.tsx b/website/src/routes/liveline.tsx
index 7f58a5c..a0bd7d8 100644
--- a/website/src/routes/liveline.tsx
+++ b/website/src/routes/liveline.tsx
@@ -330,7 +330,7 @@ function CodeBlock({ children, lang = "jsx" }: { children: string; lang?: string
   }, [children]);
 
   return (
-    <figure className="m-0">
+    <figure className="m-0 ll-bleed">
       <div className="relative">
         <pre
           className="overflow-x-auto"
@@ -408,7 +408,7 @@ function InlineCode({ children }: { children: React.ReactNode }) {
 
 function ChartPlaceholder({ height = 200, label }: { height?: number; label?: string }) {
   return (
-    <div className="my-4">
+    <div className="my-4 ll-bleed">
       <div
         className="w-full rounded-lg overflow-hidden relative"
         style={{
@@ -584,7 +584,7 @@ function PropsTable({
 export default function LivelinePage() {
   return (
     <div
-      className="liveline-page relative min-h-screen"
+      className="liveline-page relative min-h-screen overflow-x-hidden"
       style={{
         background: "var(--ll-bg)",
         color: "var(--ll-text-primary)",
diff --git a/website/src/styles/liveline.css b/website/src/styles/liveline.css
index 28e279d..525b6e6 100644
--- a/website/src/styles/liveline.css
+++ b/website/src/styles/liveline.css
@@ -25,6 +25,10 @@
   --ll-font-code: "SF Mono", "SFMono-Regular", "Consolas", "Liberation Mono",
     Menlo, Courier, monospace;
 
+  /* Bleed: code blocks & images extend beyond prose column.
+     36px = 8px div padding-left + 28px line-number span (border-box includes its 20px paddingRight) */
+  --ll-bleed: 36px;
+
   /* Spacing scale */
   --ll-spacing-xxs: 0.5rem;
   --ll-spacing-xs: 1rem;
@@ -188,6 +192,24 @@
 .liveline-article > :nth-child(8) { animation-delay: 0.35s; }
 .liveline-article > :nth-child(n + 9) { animation-delay: 0.4s; }
 
+/* ========================================================================
+   Bleed — code blocks and images extend beyond the prose column so that
+   the code text (after line numbers) aligns with the prose left edge.
+   36px = 8px div padding-left + 28px line-number span (border-box, includes padding).
+   ======================================================================== */
+
+.ll-bleed {
+  margin-left: calc(-1 * var(--ll-bleed));
+  margin-right: calc(-1 * var(--ll-bleed));
+}
+
+@media (max-width: 650px) {
+  .ll-bleed {
+    margin-left: 0;
+    margin-right: 0;
+  }
+}
+
 /* ========================================================================
    Header fade gradient
    ======================================================================== */