From 43822480eb6ddc400f69bf920ed787357ad757ae Mon Sep 17 00:00:00 2001
From: Dimitrie Hoekstra <hi@dimitr.ie>
Date: Mon, 5 Oct 2026 18:05:14 +0200
Subject: [PATCH] Render docs nav labels as their authors wrote them

The docs and handbook sidebars and every breadcrumb capitalised each word of
an authored title, so "Installing a license" read "Installing A License" and
Bosch Rexroth's ctrlX read "CtrlX". Drop `capitalize` from SidebarNav and
Breadcrumbs, and the dead `text-transform` from .handbook-nav, which moved to
nuxt/assets/css/ with the Eleventy retirement.
---
 nuxt/assets/css/style.handbook.css | 6 +++++-
 nuxt/components/Breadcrumbs.vue    | 3 ++-
 nuxt/components/SidebarNav.vue     | 5 +++--
 3 files changed, 10 insertions(+), 4 deletions(-)

diff --git a/nuxt/assets/css/style.handbook.css b/nuxt/assets/css/style.handbook.css
index 7eeccf43cf..dfa990aa2a 100644
--- a/nuxt/assets/css/style.handbook.css
+++ b/nuxt/assets/css/style.handbook.css
@@ -7,9 +7,13 @@
     @apply flex flex-col-reverse lg:grid lg:max-w-screen-xl 2xl:max-w-[1920px] 2xl:grid-cols-[300px,minmax(0,1fr),270px];
 }
 
+/* No text-transform here: labels render as the docs authors wrote them. Capitalising every
+   word made a section named after its directory look like a word ("install" -> "Install"),
+   which is no longer how any label is produced, and it mangled the rest: "Upgrading the
+   Node-RED version" became "Upgrading The Node-RED Version", and Bosch Rexroth's ctrlX
+   became CtrlX. */
 .handbook-nav {
     border-right: 1px solid right;
-    text-transform: capitalize;
     --nav-weight: 500;
     --nav-color: var(--color-gray-700);
     --nav-bg: transparent;
diff --git a/nuxt/components/Breadcrumbs.vue b/nuxt/components/Breadcrumbs.vue
index a41d5e20b6..5565bb2f5f 100644
--- a/nuxt/components/Breadcrumbs.vue
+++ b/nuxt/components/Breadcrumbs.vue
@@ -32,10 +32,11 @@ const displayItems = computed(() => normalizedItems.value.map((item, index) => (
 </script>
 
 <template>
+  <!-- No `capitalize`: every crumb is an authored page title, so capitalising each word only
+       mangles them, the same way it did in the sidebar. -->
   <UBreadcrumb
     :items="displayItems"
     color="neutral"
-    class="capitalize"
     :ui="{ link: 'text-sm' }"
   >
     <template #separator>
diff --git a/nuxt/components/SidebarNav.vue b/nuxt/components/SidebarNav.vue
index 4dd32dfe6c..10ddc62220 100644
--- a/nuxt/components/SidebarNav.vue
+++ b/nuxt/components/SidebarNav.vue
@@ -29,9 +29,10 @@ watch(() => route.path, () => { open.value = false })
   <!-- -ml-6 cancels the pl-6 the page wrapper puts on this column so the bar and its
        borders run edge to edge; px-6 puts the text back where it was. The bar sits flush
        under the header both at rest and while stuck, so border-t reads as the header's
-       own dividing line and border-b separates the bar from the article. -->
+       own dividing line and border-b separates the bar from the article. No
+       `capitalize`: labels are authored titles and render as written. -->
   <div
-    class="lg:pt-2 text-sm capitalize max-lg:order-1 max-lg:sticky max-lg:z-30
+    class="lg:pt-2 text-sm max-lg:order-1 max-lg:sticky max-lg:z-30
            max-lg:top-(--ff-header-height) max-lg:-ml-6 max-lg:px-6 max-lg:bg-white
            max-lg:border-t max-lg:border-b"
   >