Skip to content

Fix header gap around plan picker; disable expand on empty accordions - #18

Merged
bmingles merged 1 commit into
mainfrom
claude/book-group-tags-bckdee
Jul 17, 2026
Merged

Fix header gap around plan picker; disable expand on empty accordions#18
bmingles merged 1 commit into
mainfrom
claude/book-group-tags-bckdee

Conversation

@bmingles

Copy link
Copy Markdown
Member

Header gap

PlanPicker's trigger could grow wide enough (a long plan name plus the chevron) to overlap the Completed checkbox, since .title spans both grid columns and centers within the full header width — fine for short static titles, not for an arbitrary plan name.

Fix: confine .title to 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 .title unconditionally) 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 small column-gap as 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 a createEffect to auto-collapse a currently-expanded group if its count drops to 0 — mirroring the identical guard Chapter.tsx already uses for its own read-date accordion (onExpanderClick / dates().length === 0).

Test plan

  • npm run build passes
  • tsc --noEmit passes
  • Measured the header gap directly (bounding boxes): went from -11.6px (actual overlap) to a clean 12px gap
  • Verified "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 overlap
  • Reproduced the empty-accordion bug (marked a 1-chapter book fully read, hid Completed, clicked its still-listed header — it expanded to nothing) before the fix, confirmed it no longer expands after, confirmed a book with unread chapters still expands normally (regression check), and confirmed re-enabling "Completed" makes it expandable again

Generated by Claude Code

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
@bmingles
bmingles merged commit a2c3361 into main Jul 17, 2026
1 check passed
@bmingles
bmingles deleted the claude/book-group-tags-bckdee branch July 17, 2026 03:03
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.

2 participants