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

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

* fix build error

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

@@ -0,0 +1,25 @@
+import React from "react"
+import clsx from "clsx"
+
+type WideSectionProps = React.AllHTMLAttributes<HTMLElement> & {
+  as?: "div" | "main"
+}
+
+export const WideSection = ({
+  children,
+  className,
+  as = "div",
+}: WideSectionProps) => {
+  const Component = as
+  return (
+    <Component
+      className={clsx(
+        "max-w-inner-content-xs sm:max-w-inner-content-sm md:max-w-inner-content-md",
+        "lg:max-w-lg-wide-content xl:max-w-xl-wide-content px-1 lg:px-0 mx-auto",
+        className
+      )}
+    >
+      {children}
+    </Component>
+  )
+}

www/packages/docs-ui/src/components/index.ts

@@ -74,5 +74,6 @@ export * from "./Toggle"
 export * from "./Tooltip"
 export * from "./TypeList"
 export * from "./VerticalCodeTabs"
+export * from "./WideSection"
 export * from "./WorkflowDiagram"
 export * from "./ZoomImg"