docs: fix scroll top margin (#8605)

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>