fix(ui): restore highlight options layout and clean up color name editing#3776
Merged
fix(ui): restore highlight options layout and clean up color name editing#3776
Conversation
…ting Restore the pre-#3741 layout for both the AnnotationPopup highlight options row and the HighlightColorsEditor settings panel. HighlightOptions: re-add `justify-between` on the outer container and remove `flex-1` from the color strip so the gap between the style box and color strip responds to the number of colors. HighlightColorsEditor: restore `grid-cols-3 sm:grid-cols-5` grid, remove always-visible name inputs, and add a click-to-edit popover on each color circle with hover tooltip for the label. Add a browser screenshot test that renders the real AnnotationPopup component with Tailwind CSS and compares against baseline PNGs for 5, 10, and 15 colors. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Configure resolveScreenshotPath to strip the OS suffix from baseline file names so one set of PNGs works on both macOS and Linux CI. Allow a small pixel mismatch ratio (5%) to absorb font rendering differences. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
CSS zoom renders differently on macOS vs Linux, causing dimension mismatches in CI. Use native 1x rendering instead. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Use testFileDirectory in resolveScreenshotPath so baselines live in src/__tests__/components/__screenshots__/ alongside the test file. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Add headless: true and deviceScaleFactor: 2 to the browser config so screenshot baselines render at 2x resolution consistently across macOS and Linux CI. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
lexm2
pushed a commit
to lexm2/readest
that referenced
this pull request
Apr 7, 2026
…ting (readest#3776) * fix(ui): restore highlight options layout and clean up color name editing Restore the pre-readest#3741 layout for both the AnnotationPopup highlight options row and the HighlightColorsEditor settings panel. HighlightOptions: re-add `justify-between` on the outer container and remove `flex-1` from the color strip so the gap between the style box and color strip responds to the number of colors. HighlightColorsEditor: restore `grid-cols-3 sm:grid-cols-5` grid, remove always-visible name inputs, and add a click-to-edit popover on each color circle with hover tooltip for the label. Add a browser screenshot test that renders the real AnnotationPopup component with Tailwind CSS and compares against baseline PNGs for 5, 10, and 15 colors. Co-Authored-By: Claude Opus 4.6 (1M context) <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.
Summary
justify-betweenon the outer container and removeflex-1from the color strip so the gap between style buttons and color circles responds naturally to the number of colorsgrid-cols-3 sm:grid-cols-5) for the HighlightColorsEditor settings panel and replace always-visible name inputs with a click-to-edit popover on each color circle (hover shows label as tooltip)Test plan
pnpm test— 3054 unit tests passpnpm test:browser— 128 browser tests pass (including 3 new screenshot comparisons)pnpm lint— clean🤖 Generated with Claude Code