style(preview-ui): distinguish wrapped rows from new lines by spacing - #133
Merged
Conversation
Rows inside a wrapped line were separated by line-height 1.625, and sibling lines by... the same amount, since sibling line boxes carry no margin. With the spacing signal tied, a wrap and a new line looked identical. Invert the ratio: tighten intra-line leading to 1.375 and put 6px between sibling lines (children groups and top-level blocks alike), so roughly 6px of air inside a wrap versus 12px between lines. Nothing moves horizontally, so a wrap cannot be misread as an indent level and the indent guides are untouched. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
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
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
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.
Problem
In the content view, a wrapped line is hard to tell apart from a new line at a glance.
Why it happened
Rows inside a wrapped line are separated by
leading-relaxed(line-height 1.625). Sibling lines were separated by… the same amount — they are plain stacked<div>s with no margin between them (VirtualRenderer.tsx:101, and the children container at:118only appliedmt-0.5once around the whole group). The spacing signal was a 1:1 tie, so a wrap and a new line looked identical.Change
Invert the ratio, using vertical space only:
leading-relaxed(1.625)leading-snug(1.375)mt-0.5mt-1.5 space-y-1.5py-0.5py-[3px]At the 16px body size that is roughly 6px of air inside a wrap vs 12px between lines.
Horizontal position is untouched deliberately: a hanging indent would risk reading as a real indent level in an indent-structured format, and a bullet marker would eat into the indent width. The indent guides are unchanged.
Notes
npx tsc --noEmitclean; utilities verified present in the built CSS/JS.measureElement, so the height change settles without jitter on scroll.1.5s and the3px(all 6px) if the gap wants tuning.🤖 Generated with Claude Code