Merge pull request #3073 from pyth-network/feat/dev-hub-positioning

fix(dev-hub): sidebar and table of contents positioning

Author: alexcambose

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);
 }

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}
       />
-      <DefaultSearchDialog
-        open={open}
-        onOpenChange={setOpen}
-        api="/api/search"
-      />
+      {open &&
+        createPortal(
+          <DefaultSearchDialog
+            open={open}
+            onOpenChange={setOpen}
+            api="/api/search"
+          />,
+          document.body,
+        )}
     </>
   );
 };

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 {