chore: UX improvements

[canerakdas]

Description

With this PR, aiming to make some small UX improvements that I noticed while using the new doc-kit (some of them might be nitpicks 🙈 )

AlerBox

Links added inside the AlertBox can cause the content to overflow outside of the AlertBox

Badge

The Badge component we use in the Sidebar isn’t circular, and its width changes depending on the text inside. I added a prop for single-character badges that makes the text monospace (also did on DataTag) and fixes the width and height, ensuring all badges are consistent with each other

TableOfContents

Because there’s no line break, some texts can overflow. In addition, when a line break is applied to lines with indents, ignores the indent.

And replaced the marker icon since it was causing issues on iOS and didn’t align with the design system

Validation

The changes made in Storybook/Chromatic should appear without any issues

Example screenshots;

Check List

• I have read the Contributing Guidelines and made commit messages that follow the guideline.
• I have run pnpm format to ensure the code follows the style guide.
• I have run pnpm test to check if all tests are passing.
• I have run pnpm build to check if the website builds without errors.
• I've covered new added functionality with unit tests if necessary.

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Review	Updated (UTC)
nodejs-org	Ready	Preview	Jan 25, 2026 1:45pm

[github-actions]

👋 Codeowner Review Request

The following codeowners have been identified for the changed files:

Team reviewers: @nodejs/nodejs-website

Please review the changes when you have a chance. Thank you! 🙏

[codecov]

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 75.02%. Comparing base (17546fc) to head (33114d7).
⚠️ Report is 1 commits behind head on main.
✅ All tests successful. No failed tests found.

Additional details and impacted files

@@            Coverage Diff             @@
##             main    #8561      +/-   ##
==========================================
+ Coverage   75.00%   75.02%   +0.02%     
==========================================
  Files         103      103              
  Lines        9037     9037              
  Branches      311      311              
==========================================
+ Hits         6778     6780       +2     
+ Misses       2257     2255       -2     
  Partials        2        2              

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

[Copilot]

Pull request overview

This PR makes small UX improvements to UI components in @node-core/ui-components, focusing on overflow/wrapping behavior and visual consistency.

Changes:

• Updates TableOfContents to use a custom chevron marker and improves wrapping/indent behavior for long entries.
• Adds a circular mode to Badge to enforce consistent single-character badge sizing and monospace text.
• Improves AlertBox long-content wrapping and adds Storybook coverage for long content scenarios.

Reviewed changes

Copilot reviewed 11 out of 11 changed files in this pull request and generated 3 comments.

Show a summary per file

File	Description
packages/ui-components/src/Common/TableOfContents/index.tsx	Adds a chevron icon to the <summary> marker UI.
packages/ui-components/src/Common/TableOfContents/index.module.css	Updates marker styling, icon rotation, and wrapping behavior for TOC entries.
packages/ui-components/src/Common/TableOfContents/index.stories.tsx	Adds a long TOC entry to validate wrapping behavior in Storybook.
packages/ui-components/src/Common/Badge/index.tsx	Introduces a circular prop to toggle fixed-size circular badge styling.
packages/ui-components/src/Common/Badge/index.module.css	Implements circular badge sizing, monospace font, and center alignment.
packages/ui-components/src/Common/Badge/index.stories.tsx	Adds new stories demonstrating circular badge variants.
packages/ui-components/src/Common/AlertBox/index.tsx	Wraps children with a styled .content span to control overflow behavior.
packages/ui-components/src/Common/AlertBox/index.module.css	Adds wrapping behavior for alert content.
packages/ui-components/src/Common/AlertBox/index.stories.tsx	Adds a long-content story to validate overflow/wrapping behavior.
packages/ui-components/src/Common/DataTag/index.module.css	Switches DataTag font to IBM Plex Mono (visual style change).
packages/ui-components/package.json	Bumps package version from 1.5.6 to 1.5.7.

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[ovflowd]

SGTM

[ovflowd]

I'm fast-tracking this as bug fixes, cc @nodejs/nodejs-website