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
className="overflow-x-auto"
style={{
background: "var(--ll-code-bg)",
// background: "var(--ll-code-bg)",
borderRadius: "8px",
margin: 0,
padding: 0,
@@ -389,7 +389,7 @@ export function CodeBlock({ children, lang = "jsx" }: { children: string; lang?:
color: "var(--ll-code-line-nr)",
textAlign: "right",
paddingRight: "20px",
minWidth: "28px",
width: "36px",
userSelect: "none",
}}
>
website/src/styles/liveline.css
+4 -4
View File
@@ -40,8 +40,8 @@
"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;
44px = 8px div padding-left + 36px line-number width (border-box, includes 20px paddingRight) */
--ll-bleed: 44px;
/* Spacing scale */
--ll-spacing-xxs: 0.5rem;
@@ -70,7 +70,7 @@
--ll-border: #e3e3e3;
--ll-divider: rgb(242, 242, 242);
--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);
/* Button / back button */
@@ -125,7 +125,7 @@
--ll-border: rgba(255, 255, 255, 0.1);
--ll-divider: rgba(255, 255, 255, 0.06);
--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-btn-bg: rgb(30, 30, 30);