Core & UI: Fix deserialized page tree item name styles

.changeset/fine-trees-cough.md

@@ -0,0 +1,7 @@
+---
+'fumadocs-ui': patch
+'@fumadocs/base-ui': patch
+'fumadocs-core': patch
+---
+
+Fix deserialized page tree item name styles

packages/base-ui/css/lib/base.css

@@ -212,3 +212,7 @@
     @slot;
   }
 }
+
+.fd-page-tree-item-name {
+  @apply inline-flex items-center gap-1 w-full;
+}

packages/core/src/source/client/index.tsx

@@ -11,30 +11,27 @@ export type Serialized<Data> = {
   [K in keyof Data]: Data[K] extends SerializedPageTree ? PageTree.Root : Data[K];
 };
 
-function deserializeHTML(html: string) {
-  return (
-    <span
-      style={{
-        display: 'inline-flex',
-        alignItems: 'center',
-        gap: '4px',
-        width: '100%',
-      }}
-      dangerouslySetInnerHTML={{
-        __html: html,
-      }}
-    />
-  );
-}
-
 export function deserializePageTree(serialized: SerializedPageTree): PageTree.Root {
   const root = serialized.data as PageTree.Root;
   visit(root, (item) => {
     if ('icon' in item && typeof item.icon === 'string') {
-      item.icon = deserializeHTML(item.icon);
+      item.icon = (
+        <span
+          dangerouslySetInnerHTML={{
+            __html: item.icon,
+          }}
+        />
+      );
     }
     if (typeof item.name === 'string') {
-      item.name = deserializeHTML(item.name);
+      item.name = (
+        <span
+          className="fd-page-tree-item-name"
+          dangerouslySetInnerHTML={{
+            __html: item.name,
+          }}
+        />
+      );
     }
   });
 

packages/radix-ui/css/lib/base.css

@@ -212,3 +212,7 @@
     @slot;
   }
 }
+
+.fd-page-tree-item-name {
+  @apply inline-flex items-center gap-1 w-full;
+}