docs: fix divider in API reference + clean up layout (#10861)

* docs: fix divider in API reference + clean up layout

* fix build error

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

@@ -1,27 +1,31 @@
 import clsx from "clsx"
 import SectionDivider from "../Divider"
 import { forwardRef } from "react"
+import { WideSection } from "docs-ui"
 
 type SectionContainerProps = {
   children: React.ReactNode
   noTopPadding?: boolean
   noDivider?: boolean
+  className?: string
 }
 
 const SectionContainer = forwardRef<HTMLDivElement, SectionContainerProps>(
   function SectionContainer(
-    { children, noTopPadding = false, noDivider = false },
+    { children, noTopPadding = false, noDivider = false, className },
     ref
   ) {
     return (
       <div
-        className={clsx("relative pb-4 md:pb-7", !noTopPadding && "pt-7")}
         ref={ref}
-      >
-        {children}
-        {!noDivider && (
-          <SectionDivider className="-left-[16px] lg:!-left-1/4" />
+        className={clsx(
+          "relative pb-4 md:pb-7",
+          !noTopPadding && "pt-7",
+          className
         )}
+      >
+        <WideSection>{children}</WideSection>
+        {!noDivider && <SectionDivider />}
       </div>
     )
   }

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

@@ -7,10 +7,7 @@ type SectionDividerProps = {
 const SectionDivider = ({ className }: SectionDividerProps) => {
   return (
     <hr
-      className={clsx(
-        "absolute bottom-0 -left-1.5 z-0 m-0 w-screen lg:left-0",
-        className
-      )}
+      className={clsx("absolute bottom-0 z-0 m-0 w-screen left-0", className)}
     />
   )
 }

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

@@ -8,7 +8,7 @@ import dynamic from "next/dynamic"
 import TagsOperationDescriptionSectionParameters from "./Parameters"
 import MDXContentClient from "@/components/MDXContent/Client"
 import { useArea } from "../../../../providers/area"
-import { Feedback, Badge, Link, FeatureFlagNotice } from "docs-ui"
+import { Feedback, Badge, Link, FeatureFlagNotice, H2 } from "docs-ui"
 import { usePathname } from "next/navigation"
 import { TagsOperationDescriptionSectionWorkflowBadgeProps } from "./WorkflowBadge"
 
@@ -43,7 +43,7 @@ const TagsOperationDescriptionSection = ({
 
   return (
     <>
-      <h2>
+      <H2>
         {operation.summary}
         {operation.deprecated && (
           <Badge variant="orange" className="ml-0.5">
@@ -57,7 +57,7 @@ const TagsOperationDescriptionSection = ({
             badgeClassName="ml-0.5"
           />
         )}
-      </h2>
+      </H2>
       <div className="my-1">
         <MDXContentClient content={operation.description} />
       </div>

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

@@ -18,9 +18,9 @@ import TagsOperationDescriptionSection from "./DescriptionSection"
 import DividedLayout from "@/layouts/Divided"
 import { useLoading } from "@/providers/loading"
 import { useRouter } from "next/navigation"
-import SectionDivider from "../../Section/Divider"
 import checkElementInViewport from "../../../utils/check-element-in-viewport"
 import DividedLoading from "../../DividedLoading"
+import SectionContainer from "../../Section/Container"
 
 const TagOperationCodeSection = dynamic<TagOperationCodeSectionProps>(
   async () => import("./CodeSection")
@@ -116,7 +116,7 @@ const TagOperation = ({
         }
       }}
     >
-      <div
+      <SectionContainer
         ref={nodeRef}
         className={clsx("relative min-h-screen w-full pb-7", className)}
       >
@@ -144,8 +144,7 @@ const TagOperation = ({
             />
           </div>
         )}
-        <SectionDivider className="-left-[16px] lg:!-left-1/4" />
-      </div>
+      </SectionContainer>
     </InView>
   )
 }

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

@@ -124,32 +124,34 @@ const TagSectionSchema = ({ schema, tagName }: TagSectionSchemaProps) => {
         root={root}
         threshold={0.1}
       >
-        <DividedLayout
-          mainContent={
-            <SectionContainer ref={paramsRef}>
-              <h2>{formattedName} Object</h2>
-              <h4 className="border-medusa-border-base border-b py-1.5 mt-2">
-                Fields
-              </h4>
-              <TagOperationParameters schemaObject={schema} topLevel={true} />
-            </SectionContainer>
-          }
-          codeContent={
-            <SectionContainer noDivider>
-              {examples.length && (
-                <CodeBlock
-                  source={examples[0].content}
-                  lang="json"
-                  title={`The ${formattedName} Object`}
-                  className={clsx("overflow-auto")}
-                  style={{
-                    maxHeight: "100vh",
-                  }}
-                />
-              )}
-            </SectionContainer>
-          }
-        />
+        <SectionContainer ref={paramsRef}>
+          <DividedLayout
+            mainContent={
+              <div>
+                <h2>{formattedName} Object</h2>
+                <h4 className="border-medusa-border-base border-b py-1.5 mt-2">
+                  Fields
+                </h4>
+                <TagOperationParameters schemaObject={schema} topLevel={true} />
+              </div>
+            }
+            codeContent={
+              <>
+                {examples.length && (
+                  <CodeBlock
+                    source={examples[0].content}
+                    lang="json"
+                    title={`The ${formattedName} Object`}
+                    className={clsx("overflow-auto")}
+                    style={{
+                      maxHeight: "100vh",
+                    }}
+                  />
+                )}
+              </>
+            }
+          />
+        </SectionContainer>
       </InView>
     </Suspense>
   )

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

@@ -4,6 +4,7 @@ import getSectionId from "@/utils/get-section-id"
 import { InView } from "react-intersection-observer"
 import { useEffect, useMemo, useState } from "react"
 import {
+  H2,
   isElmWindow,
   swrFetcher,
   useIsBrowser,
@@ -135,43 +136,44 @@ const TagSectionComponent = ({ tag }: TagSectionProps) => {
         }
       }}
     >
-      <DividedLayout
-        mainContent={
-          <SectionContainer noDivider={true}>
-            <h2>{tag.name}</h2>
-            {tag.description && (
-              <Section>
-                <MDXContentClient
-                  content={tag.description}
-                  scope={{
-                    addToSidebar: false,
-                  }}
-                />
-              </Section>
-            )}
-            {tag.externalDocs && (
-              <p className="mt-1">
-                <span className="text-medium-plus">Related guide:</span>{" "}
-                <Link href={tag.externalDocs.url} target="_blank">
-                  {tag.externalDocs.description || "Read More"}
-                </Link>
-              </p>
-            )}
-            <Feedback
-              event="survey_api-ref"
-              extraData={{
-                area,
-                section: tag.name,
-              }}
-              pathName={pathname}
-              vertical
-              question="Was this section helpful?"
-            />
-            <SectionDivider className="-left-[16px] lg:!-left-[30%]" />
-          </SectionContainer>
-        }
-        codeContent={<></>}
-      />
+      <SectionContainer>
+        <DividedLayout
+          mainContent={
+            <div>
+              <H2>{tag.name}</H2>
+              {tag.description && (
+                <Section>
+                  <MDXContentClient
+                    content={tag.description}
+                    scope={{
+                      addToSidebar: false,
+                    }}
+                  />
+                </Section>
+              )}
+              {tag.externalDocs && (
+                <p className="mt-1">
+                  <span className="text-medium-plus">Related guide:</span>{" "}
+                  <Link href={tag.externalDocs.url} target="_blank">
+                    {tag.externalDocs.description || "Read More"}
+                  </Link>
+                </p>
+              )}
+              <Feedback
+                event="survey_api-ref"
+                extraData={{
+                  area,
+                  section: tag.name,
+                }}
+                pathName={pathname}
+                vertical
+                question="Was this section helpful?"
+              />
+            </div>
+          }
+          codeContent={<></>}
+        />
+      </SectionContainer>
       {schemaData && (
         <TagSectionSchema schema={schemaData.schema} tagName={tag.name} />
       )}