docs: fix scroll + divider issues (#9663)

www/apps/api-reference/components/Section/Container/index.tsx

@@ -19,7 +19,9 @@ const SectionContainer = forwardRef<HTMLDivElement, SectionContainerProps>(
         ref={ref}
       >
         {children}
-        {!noDivider && <SectionDivider className="-left-1.5 lg:!-left-full" />}
+        {!noDivider && (
+          <SectionDivider className="-left-[16px] lg:!-left-1/4" />
+        )}
       </div>
     )
   }

www/apps/api-reference/components/Tags/Operation/index.tsx

@@ -134,7 +134,7 @@ const TagOperation = ({
           }
         />
       </div>
-      <SectionDivider />
+      <SectionDivider className="-left-[16px] lg:!-left-1/4" />
     </div>
   )
 }

www/apps/api-reference/components/Tags/Section/index.tsx

@@ -123,7 +123,7 @@ const TagSection = ({ tag }: TagSectionProps) => {
       <DividedLayout
         ref={ref}
         mainContent={
-          <SectionContainer>
+          <SectionContainer noDivider={true}>
             <h2>{tag.name}</h2>
             {tag.description && (
               <Section>
@@ -154,6 +154,7 @@ const TagSection = ({ tag }: TagSectionProps) => {
               vertical
               question="Was this section helpful?"
             />
+            <SectionDivider className="-left-[16px] lg:!-left-[30%]" />
           </SectionContainer>
         }
         codeContent={<></>}
@@ -166,7 +167,7 @@ const TagSection = ({ tag }: TagSectionProps) => {
           <TagPaths tag={tag} />
         </LoadingProvider>
       )}
-      {!loadPaths && <SectionDivider />}
+      {!loadPaths && <SectionDivider className="lg:!-left-1" />}
     </div>
   )
 }

www/apps/api-reference/layouts/Divided/index.tsx

@@ -39,6 +39,7 @@ const DividedLayout = forwardRef<HTMLDivElement, DividedLayoutProps>(
         >
           {mainContent}
         </div>
+        {codeContent && (
           <div
             className={clsx(
               "w-full flex-shrink-0 flex-grow-0 lg:w-[calc(50%-32px)] lg:basis-[calc(50%-32px)] lg:pr-1.5",
@@ -48,6 +49,7 @@ const DividedLayout = forwardRef<HTMLDivElement, DividedLayoutProps>(
           >
             {codeContent}
           </div>
+        )}
       </div>
     )
   }

www/packages/docs-ui/src/components/Heading/H2/index.tsx

@@ -1,6 +1,9 @@
+"use client"
+
 import clsx from "clsx"
-import React from "react"
+import React, { useMemo } from "react"
-import { Link } from "@/components"
+import { CopyButton, Link } from "@/components"
+import { useIsBrowser } from "../../../providers"
 
 type H2Props = React.HTMLAttributes<HTMLHeadingElement> & {
   id?: string
@@ -8,6 +11,21 @@ type H2Props = React.HTMLAttributes<HTMLHeadingElement> & {
 }
 
 export const H2 = ({ className, children, passRef, ...props }: H2Props) => {
+  const { isBrowser } = useIsBrowser()
+  const copyText = useMemo(() => {
+    const url = `#${props.id}`
+    if (!isBrowser) {
+      return url
+    }
+
+    const hashIndex = window.location.href.indexOf("#")
+    return (
+      window.location.href.substring(
+        0,
+        hashIndex !== -1 ? hashIndex : window.location.href.length
+      ) + url
+    )
+  }, [props.id, isBrowser])
   return (
     <h2
       className={clsx(
@@ -20,12 +38,14 @@ export const H2 = ({ className, children, passRef, ...props }: H2Props) => {
     >
       {children}
       {props.id && (
-        <Link
+        <CopyButton
-          href={`#${props.id}`}
+          text={copyText}
           className="opacity-0 group-hover/h2:opacity-100 transition-opacity ml-docs_0.5 inline-block"
         >
+          <Link href={`#${props.id}`} scroll={false}>
             #
           </Link>
+        </CopyButton>
       )}
     </h2>
   )

www/packages/docs-ui/src/components/Heading/H3/index.tsx

@@ -1,12 +1,30 @@
+"use client"
+
 import clsx from "clsx"
-import React from "react"
+import React, { useMemo } from "react"
-import { Link } from "@/components"
+import { CopyButton, Link } from "@/components"
+import { useIsBrowser } from "../../../providers"
 
 type H3Props = React.HTMLAttributes<HTMLHeadingElement> & {
   id?: string
 }
 
 export const H3 = ({ className, children, ...props }: H3Props) => {
+  const { isBrowser } = useIsBrowser()
+  const copyText = useMemo(() => {
+    const url = `#${props.id}`
+    if (!isBrowser) {
+      return url
+    }
+
+    const hashIndex = window.location.href.indexOf("#")
+    return (
+      window.location.href.substring(
+        0,
+        hashIndex !== -1 ? hashIndex : window.location.href.length
+      ) + url
+    )
+  }, [props.id, isBrowser])
   return (
     <h3
       className={clsx(
@@ -18,12 +36,14 @@ export const H3 = ({ className, children, ...props }: H3Props) => {
     >
       {children}
       {props.id && (
-        <Link
+        <CopyButton
-          href={`#${props.id}`}
+          text={copyText}
           className="opacity-0 group-hover/h3:opacity-100 transition-opacity ml-docs_0.5 inline-block"
         >
+          <Link href={`#${props.id}`} scroll={false}>
             #
           </Link>
+        </CopyButton>
       )}
     </h3>
   )

www/packages/docs-ui/src/hooks/use-page-scroll-manager/index.tsx

@@ -36,7 +36,7 @@ export const usePageScrollManager = () => {
 
       targetElm?.scrollIntoView()
     }
-  }, [pathname, scrollableElement])
+  }, [pathname, scrollableElement, checkedPageReload])
 
   useEffect(() => {
     if (!scrollableElement || checkedPageReload) {
@@ -71,5 +71,5 @@ export const usePageScrollManager = () => {
         )
       }
     })
-  }, [scrollableElement])
+  }, [scrollableElement, checkedPageReload])
 }

www/packages/docs-ui/src/layouts/main-content.tsx

@@ -38,7 +38,7 @@ export const MainContentLayout = ({
         "relative max-w-full",
         "h-full flex-1",
         "flex flex-col",
-        "gap-docs_0.5 lg:pt-docs_0.25 lg:mr-docs_0.25",
+        "gap-docs_0.5 lg:pt-docs_0.25 lg:mr-docs_0.25 scroll-m-docs_0.25",
         !desktopSidebarOpen && "lg:ml-docs_0.25",
         mainWrapperClasses
       )}