fix: side nav

Author: alexcambose

apps/developer-hub/src/components/CopyAddress/index.tsx

@@ -2,6 +2,7 @@
 
 import { CopyButton } from "@pythnetwork/component-library/CopyButton";
 import { Link } from "@pythnetwork/component-library/Link";
+import { useMemo } from 'react';
 
 import styles from "./index.module.scss";
 
@@ -21,15 +22,17 @@ const CopyAddress = ({
   maxLength?: number;
   url?: string;
 }) => {
+  const formattedAddress = useMemo(() => truncate(address, maxLength), [address, maxLength]);
+  
   return url ? (
     <div className={styles.address}>
       <Link href={url} target="_blank" rel="noreferrer">
-        {truncate(address, maxLength)}
+        {formattedAddress}
       </Link>
       <CopyButton text={address} iconOnly />
     </div>
   ) : (
-    <CopyButton text={address}>{truncate(address, maxLength)}</CopyButton>
+    <CopyButton text={address}>{formattedAddress}</CopyButton>
   );
 };
 

apps/developer-hub/src/components/Root/fumadocs-global-style-overrides.css

@@ -0,0 +1,29 @@
+/*
+Overrides for Fumadocs content. Everything after prose is MDX generated content to which we can't apply custom classes so we need to globally select and override content
+*/
+.prose {
+  line-height: 1.5;
+}
+
+:where(.prose) :where(p, li) {
+  line-height: 1.5;
+}
+
+:where(.prose) :where(h1, h2, h3, h4, h5, h6) {
+  line-height: 1.2;
+}
+
+.prose p + ul,
+.prose p + ol {
+  margin-top: 0;
+  padding-top: 0.25rem;
+}
+
+.prose p:has(+ ul),
+.prose p:has(+ ol) {
+  margin-bottom: 0;
+}
+
+#nd-sidebar {
+   --fd-sidebar-top: var(--header-height) !important;
+}

apps/developer-hub/src/components/Root/global.css

@@ -2,3 +2,4 @@
 @import "fumadocs-ui/css/neutral.css";
 @import "fumadocs-ui/css/preset.css";
 @import "./theme.css";
+@import "./fumadocs-global-style-overrides.css";

apps/developer-hub/src/components/Root/theme.css

@@ -334,27 +334,3 @@
   );
   --color-fd-ring: light-dark(var(--color-violet-600), var(--color-violet-400));
 }
-
-/* Global typography: tighten line spacing in docs content */
-.prose {
-  line-height: 1.5;
-}
-
-:where(.prose) :where(p, li) {
-  line-height: 1.5;
-}
-
-:where(.prose) :where(h1, h2, h3, h4, h5, h6) {
-  line-height: 1.2;
-}
-
-.prose p + ul,
-.prose p + ol {
-  margin-top: 0;
-  padding-top: 0.25rem;
-}
-
-.prose p:has(+ ul),
-.prose p:has(+ ol) {
-  margin-bottom: 0;
-}