From f848431ad96a9f2fac0ee4162fe395be94a0fbb3 Mon Sep 17 00:00:00 2001
From: Kinfe123 <kinfishtech@gmail.com>
Date: Tue, 28 Apr 2026 00:22:48 +0300
Subject: [PATCH 1/2] fix: content layout on spider monkey browser engine

---
 packages/fumadocs/src/docs-layout.test.ts     |  15 ++
 packages/fumadocs/src/docs-layout.tsx         | 144 +++++++++---------
 packages/fumadocs/src/tanstack-layout.test.ts |  23 +++
 packages/fumadocs/src/tanstack-layout.tsx     | 132 ++++++++--------
 4 files changed, 174 insertions(+), 140 deletions(-)
 create mode 100644 packages/fumadocs/src/tanstack-layout.test.ts

diff --git a/packages/fumadocs/src/docs-layout.test.ts b/packages/fumadocs/src/docs-layout.test.ts
index 37757405..f079241f 100644
--- a/packages/fumadocs/src/docs-layout.test.ts
+++ b/packages/fumadocs/src/docs-layout.test.ts
@@ -100,6 +100,21 @@ describe("createDocsLayout pageActions", () => {
     expect(props?.pageActionsPosition).toBe("below-title");
   });
 
+  it("does not add an extra display: contents wrapper above the docs layout root", () => {
+    const Layout = createDocsLayout({
+      entry: "docs",
+    });
+
+    const tree = Layout({
+      children: React.createElement("div", null, "child"),
+    });
+
+    expect(React.isValidElement(tree)).toBe(true);
+    expect(tree.type).not.toBe("div");
+    expect((tree.props as { id?: string; style?: { display?: string } }).id).toBeUndefined();
+    expect((tree.props as { id?: string; style?: { display?: string } }).style?.display).toBeUndefined();
+  });
+
   it("supports boolean shorthand, custom providers, and above-title placement", () => {
     const Layout = createDocsLayout({
       entry: "docs",
diff --git a/packages/fumadocs/src/docs-layout.tsx b/packages/fumadocs/src/docs-layout.tsx
index 7859ef3d..f6fed594 100644
--- a/packages/fumadocs/src/docs-layout.tsx
+++ b/packages/fumadocs/src/docs-layout.tsx
@@ -955,81 +955,79 @@ export function createDocsLayout(config: DocsConfig, options?: { locale?: string
     }
 
     return (
-      <div id="nd-docs-layout" style={{ display: "contents" }}>
-        <DocsLayout
-          tree={localizedTree}
-          nav={{ title: navTitle, url: navUrl }}
-          themeSwitch={i18n ? { ...themeSwitch, enabled: false } : themeSwitch}
-          sidebar={finalSidebarProps}
-          {...(aiMode === "sidebar-icon" && aiEnabled
-            ? {
-                searchToggle: { components: { lg: <SidebarSearchWithAI /> } },
-              }
-            : {})}
-        >
-          <ColorStyle colors={colors} />
-          <TypographyStyle typography={typography} />
-          <LayoutStyle layout={layoutDimensions} />
-          {forcedTheme && <ForcedThemeScript theme={forcedTheme} />}
-          {!staticExport && (
-            <Suspense fallback={null}>
-              <DocsCommandSearch api={docsApiUrl} locale={activeLocale} />
-            </Suspense>
-          )}
-          {aiEnabled && (
-            <Suspense fallback={null}>
-              <DocsAIFeatures
-                mode={aiMode}
-                api={docsApiUrl}
-                locale={activeLocale}
-                position={aiPosition}
-                floatingStyle={aiFloatingStyle}
-                triggerComponentHtml={aiTriggerComponentHtml}
-                suggestedQuestions={aiSuggestedQuestions}
-                aiLabel={aiLabel}
-                loaderVariant={aiLoaderVariant}
-                loadingComponentHtml={aiLoadingComponentHtml}
-                models={aiModels}
-                defaultModelId={aiDefaultModelId}
-              />
-            </Suspense>
-          )}
-          <Suspense fallback={children}>
-            <DocsPageClient
-              tocEnabled={tocEnabled}
-              tocStyle={tocStyle}
-              breadcrumbEnabled={breadcrumbEnabled}
-              changelogBasePath={changelogBasePath}
-              entry={localeContext.entryPath}
+      <DocsLayout
+        tree={localizedTree}
+        nav={{ title: navTitle, url: navUrl }}
+        themeSwitch={i18n ? { ...themeSwitch, enabled: false } : themeSwitch}
+        sidebar={finalSidebarProps}
+        {...(aiMode === "sidebar-icon" && aiEnabled
+          ? {
+              searchToggle: { components: { lg: <SidebarSearchWithAI /> } },
+            }
+          : {})}
+      >
+        <ColorStyle colors={colors} />
+        <TypographyStyle typography={typography} />
+        <LayoutStyle layout={layoutDimensions} />
+        {forcedTheme && <ForcedThemeScript theme={forcedTheme} />}
+        {!staticExport && (
+          <Suspense fallback={null}>
+            <DocsCommandSearch api={docsApiUrl} locale={activeLocale} />
+          </Suspense>
+        )}
+        {aiEnabled && (
+          <Suspense fallback={null}>
+            <DocsAIFeatures
+              mode={aiMode}
+              api={docsApiUrl}
               locale={activeLocale}
-              copyMarkdown={copyMarkdownEnabled}
-              openDocs={openDocsEnabled}
-              openDocsProviders={openDocsProviders as any}
-              pageActionsPosition={pageActionsPosition}
-              pageActionsAlignment={pageActionsAlignment}
-              githubUrl={githubUrl}
-              contentDir={contentDir}
-              githubBranch={githubBranch}
-              githubDirectory={githubDirectory}
-              lastModifiedMap={lastModifiedMap}
-              lastUpdatedEnabled={lastUpdatedEnabled}
-              lastUpdatedPosition={lastUpdatedPosition}
-              readingTimeEnabled={readingTimeEnabled}
-              readingTimeMap={readingTimeMap}
-              llmsTxtEnabled={llmsTxtEnabled}
-              descriptionMap={descriptionMap}
-              feedbackEnabled={feedbackConfig.enabled}
-              feedbackQuestion={feedbackConfig.question}
-              feedbackPlaceholder={feedbackConfig.placeholder}
-              feedbackPositiveLabel={feedbackConfig.positiveLabel}
-              feedbackNegativeLabel={feedbackConfig.negativeLabel}
-              feedbackSubmitLabel={feedbackConfig.submitLabel}
-            >
-              {children}
-            </DocsPageClient>
+              position={aiPosition}
+              floatingStyle={aiFloatingStyle}
+              triggerComponentHtml={aiTriggerComponentHtml}
+              suggestedQuestions={aiSuggestedQuestions}
+              aiLabel={aiLabel}
+              loaderVariant={aiLoaderVariant}
+              loadingComponentHtml={aiLoadingComponentHtml}
+              models={aiModels}
+              defaultModelId={aiDefaultModelId}
+            />
           </Suspense>
-        </DocsLayout>
-      </div>
+        )}
+        <Suspense fallback={children}>
+          <DocsPageClient
+            tocEnabled={tocEnabled}
+            tocStyle={tocStyle}
+            breadcrumbEnabled={breadcrumbEnabled}
+            changelogBasePath={changelogBasePath}
+            entry={localeContext.entryPath}
+            locale={activeLocale}
+            copyMarkdown={copyMarkdownEnabled}
+            openDocs={openDocsEnabled}
+            openDocsProviders={openDocsProviders as any}
+            pageActionsPosition={pageActionsPosition}
+            pageActionsAlignment={pageActionsAlignment}
+            githubUrl={githubUrl}
+            contentDir={contentDir}
+            githubBranch={githubBranch}
+            githubDirectory={githubDirectory}
+            lastModifiedMap={lastModifiedMap}
+            lastUpdatedEnabled={lastUpdatedEnabled}
+            lastUpdatedPosition={lastUpdatedPosition}
+            readingTimeEnabled={readingTimeEnabled}
+            readingTimeMap={readingTimeMap}
+            llmsTxtEnabled={llmsTxtEnabled}
+            descriptionMap={descriptionMap}
+            feedbackEnabled={feedbackConfig.enabled}
+            feedbackQuestion={feedbackConfig.question}
+            feedbackPlaceholder={feedbackConfig.placeholder}
+            feedbackPositiveLabel={feedbackConfig.positiveLabel}
+            feedbackNegativeLabel={feedbackConfig.negativeLabel}
+            feedbackSubmitLabel={feedbackConfig.submitLabel}
+          >
+            {children}
+          </DocsPageClient>
+        </Suspense>
+      </DocsLayout>
     );
   };
 }
diff --git a/packages/fumadocs/src/tanstack-layout.test.ts b/packages/fumadocs/src/tanstack-layout.test.ts
new file mode 100644
index 00000000..8d9c3fe3
--- /dev/null
+++ b/packages/fumadocs/src/tanstack-layout.test.ts
@@ -0,0 +1,23 @@
+import React from "react";
+import { describe, expect, it } from "vitest";
+import { TanstackDocsLayout } from "./tanstack-layout.js";
+
+describe("TanstackDocsLayout", () => {
+  it("does not add an extra display: contents wrapper above the docs layout root", () => {
+    const tree = TanstackDocsLayout({
+      config: {
+        entry: "docs",
+      },
+      tree: {
+        name: "Docs",
+        children: [],
+      },
+      children: React.createElement("div", null, "child"),
+    });
+
+    expect(React.isValidElement(tree)).toBe(true);
+    expect(tree.type).not.toBe("div");
+    expect((tree.props as { id?: string; style?: { display?: string } }).id).toBeUndefined();
+    expect((tree.props as { id?: string; style?: { display?: string } }).style?.display).toBeUndefined();
+  });
+});
diff --git a/packages/fumadocs/src/tanstack-layout.tsx b/packages/fumadocs/src/tanstack-layout.tsx
index c7da312b..f609af61 100644
--- a/packages/fumadocs/src/tanstack-layout.tsx
+++ b/packages/fumadocs/src/tanstack-layout.tsx
@@ -440,74 +440,72 @@ export function TanstackDocsLayout({
   }
 
   return (
-    <div id="nd-docs-layout" style={{ display: "contents" }}>
-      <DocsLayout
-        tree={resolvedTree}
-        nav={{ title: navTitle, url: navUrl }}
-        themeSwitch={locale && i18n?.locales ? { ...themeSwitch, enabled: false } : themeSwitch}
-        sidebar={finalSidebarProps}
-        {...(aiMode === "sidebar-icon" && aiEnabled
-          ? {
-              searchToggle: { components: { lg: <SidebarSearchWithAI /> } },
-            }
-          : {})}
-      >
-        <ColorStyle colors={colors} />
-        <TypographyStyle typography={typography} />
-        <LayoutStyle layout={layoutDimensions} />
-        {forcedTheme && <ForcedThemeScript theme={forcedTheme} />}
-        {!staticExport && (
-          <Suspense fallback={null}>
-            <DocsCommandSearch api={docsApiUrl} locale={locale} />
-          </Suspense>
-        )}
-        {aiEnabled && (
-          <Suspense fallback={null}>
-            <DocsAIFeatures
-              mode={aiMode}
-              api={docsApiUrl}
-              locale={locale}
-              position={aiPosition}
-              floatingStyle={aiFloatingStyle}
-              suggestedQuestions={aiSuggestedQuestions}
-              aiLabel={aiLabel}
-              loaderVariant={aiLoaderVariant}
-              models={aiModels}
-              defaultModelId={aiDefaultModelId}
-            />
-          </Suspense>
-        )}
-        <Suspense fallback={children}>
-          <DocsPageClient
-            tocEnabled={tocEnabled}
-            tocStyle={tocStyle}
-            breadcrumbEnabled={breadcrumbEnabled}
-            entry={config.entry ?? "docs"}
+    <DocsLayout
+      tree={resolvedTree}
+      nav={{ title: navTitle, url: navUrl }}
+      themeSwitch={locale && i18n?.locales ? { ...themeSwitch, enabled: false } : themeSwitch}
+      sidebar={finalSidebarProps}
+      {...(aiMode === "sidebar-icon" && aiEnabled
+        ? {
+            searchToggle: { components: { lg: <SidebarSearchWithAI /> } },
+          }
+        : {})}
+    >
+      <ColorStyle colors={colors} />
+      <TypographyStyle typography={typography} />
+      <LayoutStyle layout={layoutDimensions} />
+      {forcedTheme && <ForcedThemeScript theme={forcedTheme} />}
+      {!staticExport && (
+        <Suspense fallback={null}>
+          <DocsCommandSearch api={docsApiUrl} locale={locale} />
+        </Suspense>
+      )}
+      {aiEnabled && (
+        <Suspense fallback={null}>
+          <DocsAIFeatures
+            mode={aiMode}
+            api={docsApiUrl}
             locale={locale}
-            copyMarkdown={copyMarkdownEnabled}
-            openDocs={openDocsEnabled}
-            openDocsProviders={openDocsProviders}
-            pageActionsPosition={pageActionsPosition}
-            pageActionsAlignment={pageActionsAlignment}
-            editOnGithubUrl={editOnGithubUrl}
-            lastUpdatedEnabled={lastUpdatedEnabled}
-            lastUpdatedPosition={lastUpdatedPosition}
-            lastModified={lastModified}
-            readingTimeEnabled={readingTimeEnabled}
-            readingTime={typeof readingTime === "number" ? readingTime : undefined}
-            llmsTxtEnabled={llmsTxtEnabled}
-            description={description}
-            feedbackEnabled={feedbackConfig.enabled}
-            feedbackQuestion={feedbackConfig.question}
-            feedbackPlaceholder={feedbackConfig.placeholder}
-            feedbackPositiveLabel={feedbackConfig.positiveLabel}
-            feedbackNegativeLabel={feedbackConfig.negativeLabel}
-            feedbackSubmitLabel={feedbackConfig.submitLabel}
-          >
-            {children}
-          </DocsPageClient>
+            position={aiPosition}
+            floatingStyle={aiFloatingStyle}
+            suggestedQuestions={aiSuggestedQuestions}
+            aiLabel={aiLabel}
+            loaderVariant={aiLoaderVariant}
+            models={aiModels}
+            defaultModelId={aiDefaultModelId}
+          />
         </Suspense>
-      </DocsLayout>
-    </div>
+      )}
+      <Suspense fallback={children}>
+        <DocsPageClient
+          tocEnabled={tocEnabled}
+          tocStyle={tocStyle}
+          breadcrumbEnabled={breadcrumbEnabled}
+          entry={config.entry ?? "docs"}
+          locale={locale}
+          copyMarkdown={copyMarkdownEnabled}
+          openDocs={openDocsEnabled}
+          openDocsProviders={openDocsProviders}
+          pageActionsPosition={pageActionsPosition}
+          pageActionsAlignment={pageActionsAlignment}
+          editOnGithubUrl={editOnGithubUrl}
+          lastUpdatedEnabled={lastUpdatedEnabled}
+          lastUpdatedPosition={lastUpdatedPosition}
+          lastModified={lastModified}
+          readingTimeEnabled={readingTimeEnabled}
+          readingTime={typeof readingTime === "number" ? readingTime : undefined}
+          llmsTxtEnabled={llmsTxtEnabled}
+          description={description}
+          feedbackEnabled={feedbackConfig.enabled}
+          feedbackQuestion={feedbackConfig.question}
+          feedbackPlaceholder={feedbackConfig.placeholder}
+          feedbackPositiveLabel={feedbackConfig.positiveLabel}
+          feedbackNegativeLabel={feedbackConfig.negativeLabel}
+          feedbackSubmitLabel={feedbackConfig.submitLabel}
+        >
+          {children}
+        </DocsPageClient>
+      </Suspense>
+    </DocsLayout>
   );
 }

From 74f9c473a872ab6f776b9098a3f9d53aff6ddd18 Mon Sep 17 00:00:00 2001
From: Kinfe123 <kinfishtech@gmail.com>
Date: Tue, 28 Apr 2026 00:23:04 +0300
Subject: [PATCH 2/2] chore: format

---
 packages/fumadocs/src/docs-layout.test.ts     | 4 +++-
 packages/fumadocs/src/tanstack-layout.test.ts | 4 +++-
 2 files changed, 6 insertions(+), 2 deletions(-)

diff --git a/packages/fumadocs/src/docs-layout.test.ts b/packages/fumadocs/src/docs-layout.test.ts
index f079241f..7a38e6f8 100644
--- a/packages/fumadocs/src/docs-layout.test.ts
+++ b/packages/fumadocs/src/docs-layout.test.ts
@@ -112,7 +112,9 @@ describe("createDocsLayout pageActions", () => {
     expect(React.isValidElement(tree)).toBe(true);
     expect(tree.type).not.toBe("div");
     expect((tree.props as { id?: string; style?: { display?: string } }).id).toBeUndefined();
-    expect((tree.props as { id?: string; style?: { display?: string } }).style?.display).toBeUndefined();
+    expect(
+      (tree.props as { id?: string; style?: { display?: string } }).style?.display,
+    ).toBeUndefined();
   });
 
   it("supports boolean shorthand, custom providers, and above-title placement", () => {
diff --git a/packages/fumadocs/src/tanstack-layout.test.ts b/packages/fumadocs/src/tanstack-layout.test.ts
index 8d9c3fe3..bcd0cf0e 100644
--- a/packages/fumadocs/src/tanstack-layout.test.ts
+++ b/packages/fumadocs/src/tanstack-layout.test.ts
@@ -18,6 +18,8 @@ describe("TanstackDocsLayout", () => {
     expect(React.isValidElement(tree)).toBe(true);
     expect(tree.type).not.toBe("div");
     expect((tree.props as { id?: string; style?: { display?: string } }).id).toBeUndefined();
-    expect((tree.props as { id?: string; style?: { display?: string } }).style?.display).toBeUndefined();
+    expect(
+      (tree.props as { id?: string; style?: { display?: string } }).style?.display,
+    ).toBeUndefined();
   });
 });