Tracking: Ack'd bug fixes and design changes from feedback

[ovflowd]

This issue tracks all the bug fixes, design changes, and improvements that were acknowledged and accepted based on community feedback in nodejs/node#52343 (starting from this comment).

Changes are categorized by target repo: @node-core/ui-components (nodejs/nodejs.org) or @nodejs/doc-kit (this repo).

---

Bugs

• Search box doesn't close for same-page results — When selecting a search result that links to the current page, the search dialog remains open. (ref) — @node-core/ui-components
• Search bar overflow on Firefox — The search bar overflows out of the visible area on Firefox. Fix exists but pending a bump of @node-core/ui-components in doc-kit. (ref) — @node-core/ui-components / doc-kit (version bump)
• Sidebar last element not visible — When scrolling down in the sidebar, the last element (e.g., "zlib") is cut off unless you scroll the entire page. Grid bug. (ref) — @node-core/ui-components

Design Changes

• ToC should use monospace font for function/method names — The table of contents sidebar should use a monospace font (IBM Plex Mono) when displaying function names, using the entry type to determine the appropriate font. (ref, ref) — doc-kit
• Increase Metabar (right sidebar) width on larger screens — Long function names in the ToC wrap poorly in the narrow Metabar. On larger screens, increase Metabar width; on smaller screens, fallback the ToC to the top of the page instead. (ref) — @node-core/ui-components
• Slim down code box bottom bar — The language indicator bar at the bottom of code snippets is too large. Reduce copy button size, font sizes, and paddings. (ref) — @node-core/ui-components
• Hide line numbers for short code snippets — Code snippets with fewer than 5 lines should not display line numbers. Especially bad on 1-liners. Add a rule in the remark/rehype plugin. (ref) — doc-kit (rehype plugin)
• Add more padding to bullet points — Bullet point items are too tightly spaced. (ref) — @node-core/ui-components
• Add tooltips/popovers for stability badges — The E/S/D (Experimental/Stable/Deprecated) stability indicator letters need a popover or tooltip explaining their meaning. Prefer a CSS-only approach (::after/::before). (ref) — @node-core/ui-components / doc-kit
• Optimize paddings for smaller screens — Paddings have been partially updated but more work is needed. Larger paddings for large screens, smaller paddings for HD-class screens (~1280–1366px and below) to maximize content readability. (ref) — @node-core/ui-components

Previously Ack'd (pre-Feb 6, still pending)

• Rename MJS → ESM in language switcher — The code box tab label MJS should be ESM for clarity to users not familiar with Node.js file extensions. (ref) — doc-kit
• Prevent merging code boxes with identical language labels — When consecutive code blocks have the same language (e.g., JS and JS), they should not be merged into a single tabbed box, or should use display names like (1) / (2). (ref) — doc-kit
• Add heading anchor (#) indicator — Add a visible # handle on hover for headings to indicate the hash URL, like the current docs. (ref) — @node-core/ui-components / doc-kit
• Heading navigation padding — When navigating to a heading via anchor, the heading's left circle and right button get cut off. Needs more scroll-margin/padding. (ref) — @node-core/ui-components
• Dark/light toggle should support "follow system" option — The theme toggle should offer a third "system" option as the default, using prefers-color-scheme. (ref) — @node-core/ui-components
• Add link prefetching for faster navigation — Page navigation is noticeably slower than the current docs. Implement prefetching (e.g., on hover) to improve perceived performance. (ref) — doc-kit

Explicitly Declined / Not Changing

• Light/dark code box themes — Dark-only code boxes are an intentional design decision backed by accessibility consultation. (ref)
• History select closing on outside click — Intentional behavior due to JavaScript-less <select>. (ref)
• Full page "flash" on navigation — Expected behavior; this is not an SPA. (ref)

---

cc @avivkeller @canerakdas @ovflowd
Refs: nodejs/node#52343