Fix bullet alignment and section reorder placeholder collapse#127
Merged
Conversation
- Section reorder placeholder no longer collapses to a thin strip on desktop. Sizing now comes from pill.offsetWidth/offsetHeight (transform- free, force layout) instead of getBoundingClientRect(), which could return intermediate values during the overlay's display:none → display:flex handoff while the entrance animation was still in its delay/FROM state. Width is also pinned on the placeholder so the slot can't collapse under flex reflow. CSS min-height: 44px + flex-shrink: 0 act as a final safety net for ≤90vh dialogs. - Bullet picker: Material Symbols icon bullets (37 styles) gained a top: 2px nudge in the shared rule so they sit on the text baseline in both .item-highlights and .custom-bullet-list, replacing the former .custom-bullet-list-only 1px nudge. small_square glyph now uses font-size: 11px; top: 1px to match the other small Unicode bullets. triangle, arrow, diamond, dash alignments unchanged. - Bullet picker dash glyph: em-dash (—) → en-dash (–) in both the rendered CSS and the picker preview — visibly shorter while keeping the horizontal-line shape. https://claude.ai/code/session_01JAjBc6BQUeR4vWV2RH3LRR
The 2px top-offset on Material Symbols icon bullets (introduced in d30ffcb) pushed icons below the triangle/arrow/diamond baseline, so those three glyphs — whose own rules were untouched — looked "too high" relative to the icons. Reducing the nudge to 1px (matching the former custom-bullet-list-only value that was already tuned to the triangle line) lines icons up with the glyph baseline without shifting the triangle/arrow/diamond position. https://claude.ai/code/session_01JAjBc6BQUeR4vWV2RH3LRR
…mond" This reverts commit 18d1723.
The filled ■ at font-size 9px with top: 2px still floated above the 13-px text line — visually "too high". Bumping top to 5px centers the small square on the text baseline in both .item-highlights and .custom-bullet-list. https://claude.ai/code/session_01JAjBc6BQUeR4vWV2RH3LRR
Each per-style `top: Npx` offset was a hand-tuned guess that never quite worked for every glyph at once — making one bullet look centered inevitably left another bullet a pixel or two off. Both baseline ::before rules now declare a fixed-height flex container (20.8 px = 13 px × 1.6 line-height of the li) and center the glyph with `align-items: center`. Any glyph size (9 px filled circle, 13 px triangle, 14 px Material Symbols icon) drops into the same centered slot, so every bullet style lines up on the first text line without a per-style nudge. Per-style rules keep their `font-size` overrides (for visual glyph size) and lose their `top` offsets. The icon rule loses its 2 px nudge and drops `line-height: 1.2` → `line-height: 1` since the outer flex box now owns vertical alignment. A print-media override sets the bullet box to 17.6 px (11 px × 1.6) to match the smaller print line height. https://claude.ai/code/session_01JAjBc6BQUeR4vWV2RH3LRR
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
2 participants
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.
Description
This PR fixes three related issues with bullet styling and the section reorder overlay:
Bullet vertical alignment: Replaced manual
toppixel nudges with a flex-centering approach. All bullet styles (Unicode glyphs and Material Symbols icons) now use a fixed-height flex container that centers the glyph/icon on the first text line, independent of font-size. This eliminates misalignment between.item-highlightsand.custom-bullet-listbullets.Icon bullet baseline: Material Symbols icon bullets now sit correctly on the text baseline. Added
top: 2pxto the shared icon rule to account for Material Symbols' built-in top padding, replacing the former.custom-bullet-list-only 1px nudge.Small square glyph sizing: The
small_squarebullet now usesfont-size: 11px; top: 1pxto match other small Unicode bullets (bullet,hollow_circle,square).Dash glyph: Changed from em-dash
—(U+2014) to en-dash–(U+2013) for a visibly shorter appearance, updated in both CSS and the picker preview.Section reorder placeholder collapse: Fixed the dashed placeholder that marks a dragged pill's slot collapsing to a thin strip on desktop. The issue occurred because
getBoundingClientRect().heightcould return an intermediate value while the overlay was committing itsdisplay:none → display:flexhandoff. Now usespill.offsetWidth/pill.offsetHeight(transform-free, force-layout) and applies both width and height to the placeholder. Added CSS safety net (min-height: 44px; flex-shrink: 0;) to prevent crushing on short viewports.Print layout: Updated print styles to maintain bullet vertical centering at 11px font size using the same flex-centering approach.
Type of Change
Checklist
Required for all code changes
npm testpasses)package.json,package-lock.json,version.json)CHANGELOG.mdhas been updated with a new entry under the correct versionIf adding or changing user-visible strings
If documentation-only change
https://claude.ai/code/session_01JAjBc6BQUeR4vWV2RH3LRR