docs: fix scroll top margin (#8605)

www/apps/api-reference/app/admin/page.tsx

@@ -10,15 +10,12 @@ const ReferencePage = async () => {
   return (
     <AreaProvider area={"admin"}>
       <PageTitleProvider>
-        <h1 className="!text-h2 block lg:hidden">
+        <h1 className="!text-h2 scroll-m-56 lg:pl-4" id="introduction">
           Medusa V2 Admin API Reference
         </h1>
         <DividedLayout
           mainContent={
             <Section checkActiveOnScroll={true}>
-              <h1 className="!text-h2 hidden lg:block">
-                Medusa V2 Admin API Reference
-              </h1>
               <AdminContentV2 />
             </Section>
           }

www/apps/api-reference/app/store/page.tsx

@@ -10,24 +10,20 @@ const ReferencePage = async () => {
   return (
     <AreaProvider area={"store"}>
       <PageTitleProvider>
-        <h1 className="!text-h2 block lg:hidden">
+        <h1 className="!text-h2 scroll-m-56 lg:pl-4" id="introduction">
           Medusa V2 Store API Reference
         </h1>
         <DividedLayout
           mainContent={
             <Section checkActiveOnScroll={true}>
-              <h1 className="!text-h2 hidden lg:block">
-                Medusa V2 Store API Reference
-              </h1>
               <StoreContentV2 />
             </Section>
           }
           codeContent={
-            <div className="mb-1 lg:mb-0">
+            <div className="mb-1 lg:mb-0 hidden lg:block">
               <ClientLibrariesV2 />
             </div>
           }
-          className="flex-col-reverse"
         />
         <Tags />
       </PageTitleProvider>

www/apps/api-reference/config/index.ts

@@ -12,7 +12,7 @@ export const config: DocsConfig = {
       {
         type: "link",
         title: "Introduction",
-        path: "",
+        path: "introduction",
         loaded: true,
       },
     ],

www/packages/docs-ui/src/components/MDXComponents/index.tsx

@@ -32,6 +32,7 @@ export const MDXComponents: MDXComponentsType = {
       <h1
         className={clsx(
           "h1-docs [&_code]:!h1-docs [&_code]:!font-mono mb-docs_1 text-medusa-fg-base",
+          props.id && "scroll-m-56",
           className
         )}
         {...props}
@@ -47,7 +48,7 @@ export const MDXComponents: MDXComponentsType = {
       <h2
         className={clsx(
           "h2-docs [&_code]:!h2-docs [&_code]:!font-mono mb-docs_1 mt-docs_4 text-medusa-fg-base",
-          props.id && "group/h2",
+          props.id && "group/h2 scroll-m-56",
           className
         )}
         {...props}
@@ -73,7 +74,7 @@ export const MDXComponents: MDXComponentsType = {
       <h3
         className={clsx(
           "h3-docs [&_code]:!h3-docs [&_code]:!font-mono mb-docs_0.5 mt-docs_3 text-medusa-fg-base",
-          props.id && "group/h3",
+          props.id && "group/h3 scroll-m-56",
           className
         )}
         {...props}

www/packages/docs-ui/src/layouts/wide.tsx

@@ -13,7 +13,12 @@ export const WideLayout = ({
       {...props}
       mainWrapperClasses={clsx(props.mainWrapperClasses, "mx-auto flex")}
     >
-      <main className="lg:max-w-wide-content relative mt-4 w-full flex-1 lg:mt-7">
+      <main
+        className={clsx(
+          "max-w-inner-content-xs sm:max-w-inner-content-sm md:max-w-inner-content-md",
+          "lg:max-w-wide-content relative mt-4 w-full flex-1 lg:mt-7"
+        )}
+      >
         {children}
         {showPagination && <Pagination />}
       </main>

www/packages/tailwind/base.tailwind.config.js

@@ -657,6 +657,9 @@ module.exports = {
         maximize: "maximize 500ms",
         flash: "flash 1500ms 1",
       },
+      scrollMargin: {
+        56: "56px",
+      },
     },
     fontFamily: {
       base: [