feat(legal): collapsible On This Page TOC, wider column spacing - #1623
Closed
felixwidjaja wants to merge 1 commit into
Closed
feat(legal): collapsible On This Page TOC, wider column spacing#1623felixwidjaja wants to merge 1 commit into
felixwidjaja wants to merge 1 commit into
Conversation
Contributor
🔎 SEO & Meta ReviewSkipped (mode: No built pages matched the changed slugs. |
kaleygel
approved these changes
Aug 11, 2026
AriaEdo
force-pushed
the
feat/legal-toc-collapsible-spacing
branch
from
August 12, 2026 01:35
bf2792c to
3687c10
Compare
- Add an opt-in collapsible prop to TableOfContents.astro that groups h3 sub-headings under their parent h2 behind a chevron toggle, so long docs (e.g. the MSA) don't list every sub-section at once. The group containing the active heading auto-expands on scroll and collapses the rest; the chevron also allows manually peeking at other groups. Handbook's usage is untouched (defaults to false). - Wire collapsible=true into the legal page's TOC. - Widen .legal-content's horizontal padding to md:px-10 lg:px-16, matching .handbook-content, to fix the squished feel between the sidenav/content/TOC columns. - Fix font-size regression on the h2 group headers: the new .toc-group wrapper had dropped the datum-text-sm sizing .toc-item used to provide via inheritance. - Fix the active-dot indicator getting clipped: overflow-y-auto (added for the long-TOC scroll fix) forces overflow-x to clip too per the CSS Overflow spec, cutting off the dot's intentional negative-left bleed onto the dashed guide line. Added pl-2 as safe clearance. - Fix missing gap between .toc-sublist items — without it, a wrapped line within one heading and the gap to the next heading looked identical. Also size legal's h3 sub-items down to datum-text-xs for clearer hierarchy (handbook's h3 sizing is untouched).
AriaEdo
force-pushed
the
feat/legal-toc-collapsible-spacing
branch
from
August 12, 2026 06:02
3687c10 to
70a1c5d
Compare
Merged
6 tasks
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.
Summary
Follow-up to #1621 — makes the
/legal/*"On This Page" TOC collapsible for long docs, and fixes the column spacing plus a few regressions found while testing it live.Changes
collapsibleprop toTableOfContents.astro. H3 sub-headings are grouped under their parent H2 behind a chevron toggle instead of always being listed out. The group containing the currently active heading auto-expands on scroll (via the existingIntersectionObserver) and the rest collapse; the chevron also lets you manually peek at another group. The handbook's usage is untouched (collapsibledefaults tofalse)..legal-contenthadpx-0, which read as squished against both the sidenav and the TOC. Gave itmd:px-10 lg:px-16, the same values.handbook-contentalready uses..toc-group) had dropped thedatum-text-smsizing that.toc-itemused to provide via inheritance, so grouped H2 entries were rendering at an unstyled, larger size than the H3 sub-items.overflow-y: auto(added previously so a long TOC scrolls internally) forcesoverflow-xto clip too, per the CSS Overflow spec. That was clipping the active-dot's intentional negative-leftbleed onto the dashed guide line, leaving a "broken circle." Addedpl-2as safe clearance..toc-sublisthad nogapbetween its<li>items, so a wrapped line within one heading and the gap to the next heading looked identical. Addedflex flex-col gap-2, and sized legal's H3 sub-items down todatum-text-xsfor clearer hierarchy (handbook's H3 sizing is untouched).Test plan
npx astro check— 0 errors.toc-item, no.toc-group) — the new grouping only renders whencollapsibleis passed/legal/master-services-agreement(long doc, multiple multi-child groups) and/handbook/eos/vto(regression check) across breakpoints🤖 Generated with Claude Code