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 {