Fix header gap around plan picker; disable expand on empty accordions - #18
Merged
Conversation
Header: PlanPicker's trigger could grow wide enough (long plan name + chevron) to overlap the Completed checkbox, since .title spans both grid columns and centers within the full width. Confine .title to the grid's flexible first column, but only while the picker is actually showing (styles.titleConstrained) — applying that unconditionally regressed short titles too: a first attempt using symmetric padding on .title truncated even "My Plan" for every route, since it shrinks the box regardless of whether the content needs the room. Also added a small column-gap as a guaranteed minimum. Accordions: ChapterGroup's header could toggle open to an empty list when "Completed" is hidden and every chapter in that group is already read — ChapterGroupList's own group-visibility filter only checks search text, not completion, so a fully-read group stays listed even though its filtered chapter count is 0. Guard the toggle (and auto-collapse if a currently-expanded group's count drops to 0), mirroring the identical guard Chapter.tsx already uses for its own read-date accordion. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01K2wCTwwVhhkSDxQxWo7UoH
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
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.
Header gap
PlanPicker's trigger could grow wide enough (a long plan name plus the chevron) to overlap the Completed checkbox, since.titlespans both grid columns and centers within the full header width — fine for short static titles, not for an arbitrary plan name.Fix: confine
.titleto the grid's flexible first column, but only while the picker is actually showing (styles.titleConstrained). This was deliberately made conditional after a first attempt (symmetric padding on.titleunconditionally) regressed every route — it truncated even"My Plan", since padding shrinks the box regardless of whether the content actually needs the room. Also added a smallcolumn-gapas a guaranteed minimum between the two columns.Empty accordions shouldn't expand
ChapterGroup's header could toggle open to an empty list: when "Completed" is hidden and every chapter in a group is already read,ChapterGroupList's own group-visibility filter (which only checks search text, not completion) still lists the group, but its filtered chapter count is 0. Guarded the toggle — and added acreateEffectto auto-collapse a currently-expanded group if its count drops to 0 — mirroring the identical guardChapter.tsxalready uses for its own read-date accordion (onExpanderClick/dates().length === 0).Test plan
npm run buildpassestsc --noEmitpasses"My Plan"(previously truncated by the padding attempt) now renders in full,"Books"/"History"titles are pixel-identical to before (still exactly centered, confirmed via bounding-box math), and a long name ("Chronological Reading Journey") truncates gracefully with no overlapGenerated by Claude Code