Skip to content

feat(review): custom diff font family and size overrides#441

Merged
backnotprop merged 2 commits intomainfrom
feat/custom-diff-fotns
Mar 30, 2026
Merged

feat(review): custom diff font family and size overrides#441
backnotprop merged 2 commits intomainfrom
feat/custom-diff-fotns

Conversation

@backnotprop
Copy link
Copy Markdown
Owner

@backnotprop backnotprop commented Mar 30, 2026

Summary

  • Adds Code Font dropdown and Code Font Size slider to the review Display settings tab
  • 9 monospace fonts available: Fira Code, Hack, IBM Plex Mono, Inconsolata, JetBrains Mono, Red Hat Mono, Roboto Mono, Source Code Pro, Atkinson Hyperlegible Mono
  • Fonts loaded on demand from Google Fonts / jsDelivr CDN via dynamic <link> injection
  • Overrides apply to the @pierre/diffs shadow DOM (via unsafeCSS) and surrounding review elements (annotations, suggestions, AI chat code blocks)
  • Settings sync to ~/.plannotator/config.json under diffOptions.fontFamily / diffOptions.fontSize, matching existing config pattern
  • Line-height scales with custom font size to prevent clipping at larger sizes
  • Font overrides now cover inline annotation code spans (.review-comment-body)
  • Cleaned up inline comment card styling: removed drop shadow, left border accent, and hover translate

Test plan

  • Open code review, go to Settings > Display — font controls should appear at the top
  • Select each font option and verify the diff viewer updates
  • Drag the font size slider and verify live updates (8–24px range)
  • Test large font sizes (21–24px) — lines should not overlap or clip
  • Click Reset on font size to return to theme default
  • Set "Theme Default" for font to clear the override
  • Add an inline annotation with code snippets — verify custom font applies
  • Close and reopen review — settings should persist
  • Verify ~/.plannotator/config.json contains fontFamily / fontSize under diffOptions
  • Hand-edit config.json with font values, reopen review — settings should load from file
  • Check inline comment cards look clean (no shadow, no left border)

…iffs

Add Code Font and Code Font Size settings to the review Display tab,
letting users override the theme's monospace font in the diff viewer.

Supports 9 fonts (Fira Code, Hack, IBM Plex Mono, Inconsolata,
JetBrains Mono, Red Hat Mono, Roboto Mono, Source Code Pro, Atkinson
Hyperlegible Mono) loaded on demand from Google Fonts / jsDelivr CDN.
Font size uses a continuous slider (8–24px) with a Reset button.

Settings persist via cookies and sync to ~/.plannotator/config.json
under diffOptions.fontFamily / diffOptions.fontSize, matching the
existing config pattern.

For provenance purposes, this commit was AI assisted.
…d comment card cleanup

- Add line-height: 1.5 alongside font-size in Pierre shadow DOM so large sizes don't clip
- Include .review-comment-body selectors in font override CSS so inline annotation code spans get the custom font
- Simplify comment card: remove drop shadow, left border accent, translateX hover; use tight border with subtle hover

For provenance purposes, this commit was AI assisted.
@backnotprop backnotprop merged commit 6b84ce4 into main Mar 30, 2026
5 checks passed
@backnotprop backnotprop deleted the feat/custom-diff-fotns branch March 30, 2026 20:45
stk-code pushed a commit to stk-code/plannotator that referenced this pull request Mar 31, 2026
…#441)

* feat(review): custom font family and size overrides for code review diffs

Add Code Font and Code Font Size settings to the review Display tab,
letting users override the theme's monospace font in the diff viewer.

Supports 9 fonts (Fira Code, Hack, IBM Plex Mono, Inconsolata,
JetBrains Mono, Red Hat Mono, Roboto Mono, Source Code Pro, Atkinson
Hyperlegible Mono) loaded on demand from Google Fonts / jsDelivr CDN.
Font size uses a continuous slider (8–24px) with a Reset button.

Settings persist via cookies and sync to ~/.plannotator/config.json
under diffOptions.fontFamily / diffOptions.fontSize, matching the
existing config pattern.

For provenance purposes, this commit was AI assisted.

* fix(review): line-height scaling, inline annotation font coverage, and comment card cleanup

- Add line-height: 1.5 alongside font-size in Pierre shadow DOM so large sizes don't clip
- Include .review-comment-body selectors in font override CSS so inline annotation code spans get the custom font
- Simplify comment card: remove drop shadow, left border accent, translateX hover; use tight border with subtle hover

For provenance purposes, this commit was AI assisted.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant