You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
{{ message }}
Repository navigation
(Claude) Align line numbers with their code in the minimal theme's Pygments blocks - #379
In the minimal theme, the line-number column of a Pygments block drifted away from its code: over 20 lines the gutter was 11 px taller, so a number sat a line below its code by the end of a long block. Classic was fine.
Cause. Pygments wraps the code column in <pre><code>, and the number column in a bare <pre>. The shared code { line-height: 1.5 } reached the code column, while the minimal theme's .content pre rule sets font: 0.78em/1.55 on both <pre> elements. The two columns rendered at 16.38 px and 16.93 px per line, 0.55 px of drift per line. Classic has 1.5 on both sides and never showed it.
Fix. One declaration in the minimal theme's layout.css: pre code { line-height: inherit }, so the code column follows its <pre>. The selector covers every <pre><code> in a minimal transcript, not only line-numbered blocks: Markdown fences and Pygments blocks without numbers now follow the <pre>'s 1.55 too, about 3 % taller than before, which is what the theme's pre rule intended.
Classic is untouched. No shared sheet or template changed; before/after screenshots of the same block in classic are byte-identical. The three regenerated minimal snapshots are +15/-0, all inside <style>.
Test. A browser test, parametrised over both themes, renders a 20-line line-numbered block and checks the two columns span the same height from the same top. Red on minimal before the fix (338.4 px vs 327.5 px), green on classic throughout, and red again when the declaration is removed.
A browser test over the Read tool fixture: in a line-numbered Pygments
block, the number column and the code column must span the same height
and start at the same top, in classic and in minimal. Classic passes;
minimal fails by 11px over 20 lines (#364).
Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
In a line-numbered Pygments block the number column is a bare <pre>,
the code column a <pre><code>. The shared sheet's `code { line-height:
1.5 }` reached that <code>, while the minimal theme gives both <pre>s
1.55 — so the numbers outran the code by half a pixel a line, a whole
line every thirty. Classic has 1.5 on both and never showed it.
The minimal `pre code` reset now inherits the line height too. Minimal
CSS only: the classic page and the shared sheets are untouched, and the
three regenerated snapshots are the minimal ones, additive.
Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
No actionable comments were generated in the recent review.
Walkthrough
The minimal theme now inherits line height for code inside transcript <pre> elements. A browser test checks line-number and code-column alignment in both classic and minimal themes.
Changes: Pygments Line Alignment
Layer / File(s)
Summary
Inherit code line height claude_code_log/html/templates/components/minimal/layout.css, test/__snapshots__/test_snapshot_html.ambr
The minimal theme’s transcript code rule inherits line height. The snapshots include the updated rule.
daaain/claude-code-log#368: This PR renders multiline Monitor events as <pre><code> in transcript cards, which the minimal-theme code rule applies to.
Suggested reviewers:daaain
Merge Risk: Minimal · up to 398be
The minimal theme aligns code line height with its surrounding block. No merge-blocking risk was identified.
Pre-merge checks: 5
Check name
Status
Explanation
Description Check
Check skipped - CodeRabbit’s high-level summary is enabled.
Title check
The title clearly describes the fix for line number alignment in minimal-theme Pygments blocks.
Linked Issues check
[#364] The minimal theme makes code inherit the pre line height, aligning Pygments code with line numbers. A browser test checks alignment across 20 lines in both minimal and classic themes.
Out of Scope Changes check
[#364] The CSS change, browser test, and updated minimal snapshots support the alignment fix. The effect on other pre code blocks follows from the same theme rule. Classic and shared styles are unch…
Docstring Coverage
No eligible functions found in the changed files. Skipping docstring coverage check. Docstring coverage is scoped to functions touched by this diff with cyclomatic complexity of at least 2. Documentat…
Full details: Out of Scope Changes check
Explanation
[#364] The CSS change, browser test, and updated minimal snapshots support the alignment fix. The effect on other pre code blocks follows from the same theme rule. Classic and shared styles are unchanged.
Full details: Docstring Coverage
Explanation
No eligible functions found in the changed files. Skipping docstring coverage check. Docstring coverage is scoped to functions touched by this diff with cyclomatic complexity of at least 2. Documentation-only edits and deletions within surviving functions are included; unchanged diff context and fully deleted functions are excluded. Analyzed 0 functions across 1 files. (2 skipped: 2 unsupported.)
Finishing TouchesGenerate docstrings
Commit to this branch
Create a new PR
Generate unit tests (beta)
Commit to this branch
Create a new PR
Autofix · Keep fixing CodeRabbit findings and required CI, and resolving merge conflicts
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.
Included review availability: This review used your included allowance. Your plan provides up to 4 included reviews per hour; 3 remain after this review.
This branch has not been deployed
No deployments
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Fixes #364.
In the minimal theme, the line-number column of a Pygments block drifted away from its code: over 20 lines the gutter was 11 px taller, so a number sat a line below its code by the end of a long block. Classic was fine.
Cause. Pygments wraps the code column in
<pre><code>, and the number column in a bare<pre>. The sharedcode { line-height: 1.5 }reached the code column, while the minimal theme's.content prerule setsfont: 0.78em/1.55on both<pre>elements. The two columns rendered at 16.38 px and 16.93 px per line, 0.55 px of drift per line. Classic has 1.5 on both sides and never showed it.Fix. One declaration in the minimal theme's
layout.css:pre code { line-height: inherit }, so the code column follows its<pre>. The selector covers every<pre><code>in a minimal transcript, not only line-numbered blocks: Markdown fences and Pygments blocks without numbers now follow the<pre>'s 1.55 too, about 3 % taller than before, which is what the theme'sprerule intended.Classic is untouched. No shared sheet or template changed; before/after screenshots of the same block in classic are byte-identical. The three regenerated minimal snapshots are +15/-0, all inside
<style>.Test. A browser test, parametrised over both themes, renders a 20-line line-numbered block and checks the two columns span the same height from the same top. Red on minimal before the fix (338.4 px vs 327.5 px), green on classic throughout, and red again when the declaration is removed.
🤖 Generated with Claude Code
Summary by CodeRabbit