fix: Fix formatting of custom resource sidebar items

- The titles should better handle being line wrapped

Signed-off-by: Sebastian Malton <sebastian@malton.name>

packages/core/src/renderer/components/custom-resources/custom-resource-definition-groups-sidebar-items-computed.injectable.ts

@@ -17,6 +17,12 @@ import routePathParametersInjectable from "../../routes/route-path-parameters.in
 import customResourcesSidebarItemInjectable from "./custom-resources-sidebar-item.injectable";
 import customResourceDefinitionsInjectable from "./custom-resources.injectable";
 
+const titleCaseSplitRegex = /(?<=[a-z])(?=[A-Z])|(?<=[A-Z])(?=[A-Z][a-z])/;
+
+const formatResourceKind = (resourceKind: string) => (
+  resourceKind.split(titleCaseSplitRegex).join(" ")
+);
+
 const customResourceDefinitionGroupsSidebarItemsComputedInjectable = getInjectable({
   id: "custom-resource-definition-groups-sidebar-items-computed",
   instantiate: (di) => {
@@ -31,7 +37,7 @@ const customResourceDefinitionGroupsSidebarItemsComputedInjectable = getInjectab
         instantiate: (): SidebarItemRegistration => ({
           parentId: customResourcesSidebarItemInjectable.id,
           onClick: noop,
-          title: group,
+          title: group.replaceAll(".", "\u200b."), // Replace dots with zero-width spaces to allow line breaks
           orderNumber: 10 * index,
         }),
         injectionToken: sidebarItemInjectionToken,
@@ -47,7 +53,7 @@ const customResourceDefinitionGroupsSidebarItemsComputedInjectable = getInjectab
           instantiate: (di): SidebarItemRegistration => ({
             parentId: customResourceGroupSidebarItem.id,
             onClick: () => navigateToCustomResources(parameters),
-            title: definition.getResourceKind(),
+            title: formatResourceKind(definition.getResourceKind()),
             isActive: computedAnd(
               di.inject(routeIsActiveInjectable, customResourcesRoute),
               computed(() => matches(parameters)(pathParameters.get())),