From 7d364240de4e1d9364685abd83dde4409ff61fba Mon Sep 17 00:00:00 2001
From: Will Eastcott <will@playcanvas.com>
Date: Wed, 10 Jun 2026 12:58:27 +0100
Subject: [PATCH] fix: stop 'PlayCanvas Web Components' sidebar label wrapping

The label is borderline at the 310px sidebar width, so platform font
metric differences sometimes wrapped it to two lines. Pin the item to a
single line via a targeted sidebar-item-nowrap class.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
---
 sidebars.js         | 1 +
 src/css/custom.scss | 5 +++++
 2 files changed, 6 insertions(+)

diff --git a/sidebars.js b/sidebars.js
index 4113ce99381..30aa984836f 100644
--- a/sidebars.js
+++ b/sidebars.js
@@ -488,6 +488,7 @@ const sidebars = {
     {
       type: 'category',
       label: 'PlayCanvas Web Components',
+      className: 'sidebar-item-nowrap',
       link: {
         type: 'doc',
         id: 'user-manual/web-components/index',
diff --git a/src/css/custom.scss b/src/css/custom.scss
index 91c87d8174a..05deecbccb7 100644
--- a/src/css/custom.scss
+++ b/src/css/custom.scss
@@ -315,3 +315,8 @@ html[data-theme='dark'] .navbar--github-link:before {
 [data-theme='dark'] .sidebar-section-header {
   color: var(--ifm-color-emphasis-1000);
 }
+
+/* Keep long sidebar labels on a single line regardless of OS/browser font metrics */
+.sidebar-item-nowrap > .menu__list-item-collapsible > .menu__link {
+  white-space: nowrap;
+}