Skip to content

fix: keep changelog dates visible when the table of contents is hidden - #261

Merged
garyli27 merged 1 commit into
mainfrom
fix/changelog-date-below-xl
Oct 12, 2026
Merged

garyli27 merged 1 commit into
mainfrom
fix/changelog-date-below-xl

Conversation

@garyli27

Copy link
Copy Markdown
Contributor

Background

In a call with Luma Automation, they reported that the changelog sometimes shows no dates on Windows in Microsoft Edge, Perplexity Comet and Chrome at 100% browser zoom.

Why

Changelog dates only appeared in Mintlify's right-side table of contents, which Mintlify shows only at viewport width >= 1280px. Our style.css also hid the per-entry date column at every width. Windows laptops commonly run 125–150% display scaling, so at 100% browser zoom the viewport lands below 1280px (e.g. 1920px screen at 150% = 1280px, minus the 17px scrollbar = 1263px) and no date is shown anywhere. Phones and tablets had the same gap.

What changed

  • Dates always visible: hide the per-entry date column only at >= 1280px (when the table of contents is shown); below that, the date is shown above each entry. Breakpoints use the same range syntax as Mintlify's xl so fractional widths from zoom always match exactly one rule.
  • Anchor jumps on mobile: below 1024px Mintlify's scroll offset ignores the announcement banner (2–3 lines on phones), so jumps such as the banner's own changelog link landed with the date under the navbar. The offset now adds the banner height while the banner is visible.
  • Date picker below 1280px (changelog-toc.js): a floating pill shows the current entry's date and opens the native select to jump to any date (updates the URL hash). Works on the 2026/2025/2024 changelogs in English and Chinese, follows client-side navigation, and is removed on regular docs pages.

Impact

  • style.css and changelog-toc.js only; no content changes.
  • Desktop at >= 1280px is unchanged.

Validation

  • mintlify validate: passed.
  • Local preview at 320–1920px: dates visible at every width (in the entry below 1280px, in the table of contents at >= 1280px).
  • Anchor jumps at 320–1263px: date lands 32–40px below the navbar, with and without the banner.
  • Date picker: jump, scroll tracking, client-side navigation between changelog years and to regular pages, light/dark, zh/en; mobile menu covers it; no overlap with the language selector.
  • Injected the picker on production while HTML was still parsing (before hydration): no React hydration errors.

🤖 Generated with Claude Code

Mintlify only shows the right-side table of contents (the only place
changelog dates appeared) at width >= 1280px, while style.css hid the
per-entry date column at every width. Windows laptops at 125-150% display
scaling land below 1280px at 100% browser zoom, so Edge, Comet and Chrome
showed no dates at all; phones had the same gap.

- Hide the per-entry date column only at >= 1280px; below that, show the
  date above each entry.
- Offset anchor jumps below 1024px by the announcement banner height so the
  date is not hidden under the navbar.
- Add a floating native date picker below 1280px to jump between dates.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
@garyli27
garyli27 merged commit bf03ed8 into main Oct 12, 2026
4 checks passed
@garyli27
garyli27 deleted the fix/changelog-date-below-xl branch October 12, 2026 09:44
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.

1 participant