playwriter
Code Issues

fix code block bleed alignment and line numbers

Browse Source 
- Fixed --ll-bleed to 44px (8px padding + 36px line-number width, border-box)
- Line numbers fixed width 36px (always fits 3 digits, no layout shift)
- Line number opacity increased from 0.15 to 0.3 in both light and dark mode
- Commented out code block background
This commit is contained in:
Tommy D. Rossi
2026-02-20 12:57:41 +01:00
parent acd63a9235
commit a7ab6708ef
2 changed files with 6 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files
website/src/components/markdown.tsx
+2 -2
View File
@@ -363,7 +363,7 @@ export function CodeBlock({ children, lang = "jsx" }: { children: string; lang?:
<pre <pre
className="overflow-x-auto" className="overflow-x-auto"
style={{ style={{
background: "var(--ll-code-bg)", // background: "var(--ll-code-bg)",
borderRadius: "8px", borderRadius: "8px",
margin: 0, margin: 0,
padding: 0, padding: 0,
@@ -389,7 +389,7 @@ export function CodeBlock({ children, lang = "jsx" }: { children: string; lang?:
color: "var(--ll-code-line-nr)", color: "var(--ll-code-line-nr)",
textAlign: "right", textAlign: "right",
paddingRight: "20px", paddingRight: "20px",
minWidth: "28px", width: "36px",
userSelect: "none", userSelect: "none",
}} }}
> >
website/src/styles/liveline.css
+4 -4
View File
@@ -40,8 +40,8 @@
"SFMono-Regular", "Consolas", "Liberation Mono", Menlo, Courier, monospace; "SFMono-Regular", "Consolas", "Liberation Mono", Menlo, Courier, monospace;
/* Bleed: code blocks & images extend beyond prose column. /* Bleed: code blocks & images extend beyond prose column.
36px = 8px div padding-left + 28px line-number span (border-box includes its 20px paddingRight) */ 44px = 8px div padding-left + 36px line-number width (border-box, includes 20px paddingRight) */
--ll-bleed: 36px; --ll-bleed: 44px;
/* Spacing scale */ /* Spacing scale */
--ll-spacing-xxs: 0.5rem; --ll-spacing-xxs: 0.5rem;
@@ -70,7 +70,7 @@
--ll-border: #e3e3e3; --ll-border: #e3e3e3;
--ll-divider: rgb(242, 242, 242); --ll-divider: rgb(242, 242, 242);
--ll-code-bg: rgba(0, 0, 0, 0.02); --ll-code-bg: rgba(0, 0, 0, 0.02);
--ll-code-line-nr: rgba(0, 0, 0, 0.15); --ll-code-line-nr: rgba(0, 0, 0, 0.3);
--ll-selection-bg: rgba(0, 0, 0, 0.08); --ll-selection-bg: rgba(0, 0, 0, 0.08);
/* Button / back button */ /* Button / back button */
@@ -125,7 +125,7 @@
--ll-border: rgba(255, 255, 255, 0.1); --ll-border: rgba(255, 255, 255, 0.1);
--ll-divider: rgba(255, 255, 255, 0.06); --ll-divider: rgba(255, 255, 255, 0.06);
--ll-code-bg: rgba(255, 255, 255, 0.05); --ll-code-bg: rgba(255, 255, 255, 0.05);
--ll-code-line-nr: rgba(255, 255, 255, 0.15); --ll-code-line-nr: rgba(255, 255, 255, 0.3);
--ll-selection-bg: rgba(255, 255, 255, 0.1); --ll-selection-bg: rgba(255, 255, 255, 0.1);
--ll-btn-bg: rgb(30, 30, 30); --ll-btn-bg: rgb(30, 30, 30);