diff --git a/apps/developer-hub/src/components/Root/fumadocs-global-style-overrides.css b/apps/developer-hub/src/components/Root/fumadocs-global-style-overrides.css
index e39f49dbdb..effe6136a1 100644
--- a/apps/developer-hub/src/components/Root/fumadocs-global-style-overrides.css
+++ b/apps/developer-hub/src/components/Root/fumadocs-global-style-overrides.css
@@ -26,4 +26,24 @@ Overrides for Fumadocs content. Everything after prose is MDX generated content
#nd-sidebar {
--fd-sidebar-top: var(--header-height) !important;
+ position: sticky !important;
+ height: calc(100vh - var(--header-height));
+}
+
+#nd-docs-layout {
+ flex-direction: row !important;
+ padding-inline-start: 0 !important;
+}
+
+/* Hacky fix to get the TOC to be sticky */
+#nd-toc {
+ top: var(--header-height) !important;
+ height: max-content;
+ position: sticky;
+ margin-left: calc(-1 * var(--fd-toc-width));
+}
+
+#nd-toc > div {
+ position: relative;
+ left: var(--fd-toc-width);
}
diff --git a/apps/developer-hub/src/components/search-button.tsx b/apps/developer-hub/src/components/search-button.tsx
index f02e978860..9f8aa6174c 100644
--- a/apps/developer-hub/src/components/search-button.tsx
+++ b/apps/developer-hub/src/components/search-button.tsx
@@ -3,6 +3,7 @@
import { SearchButton as SearchButtonComponent } from "@pythnetwork/component-library/SearchButton";
import DefaultSearchDialog from "fumadocs-ui/components/dialog/search-default";
import { useCallback, useState } from "react";
+import { createPortal } from "react-dom";
export const SearchButton = () => {
const [open, setOpen] = useState(false);
@@ -19,11 +20,15 @@ export const SearchButton = () => {
largeScreenContent="Search"
onClick={handleSearch}
/>
-
+ {open &&
+ createPortal(
+ ,
+ document.body,
+ )}
>
);
};
diff --git a/packages/component-library/src/AppShell/index.module.scss b/packages/component-library/src/AppShell/index.module.scss
index dc42e1ee6b..6186ef3e97 100644
--- a/packages/component-library/src/AppShell/index.module.scss
+++ b/packages/component-library/src/AppShell/index.module.scss
@@ -33,9 +33,9 @@
background: theme.color("background", "primary");
border-top-left-radius: calc(var(--offset) * theme.border-radius("xl"));
border-top-right-radius: calc(var(--offset) * theme.border-radius("xl"));
+ height: 100dvh;
overflow: hidden auto;
transform: scale(calc(100% - (var(--offset) * 5%)));
- height: 100dvh;
scrollbar-gutter: stable;
.header {