docs: improvements and fixes to components in API reference (#9410)

- Change layout of parameters for clearer display
- Fix schema code blocks being longer than container
- switch between showing required to showing optional indicator
- Fixed code tabs not having copy / report buttons

Closes DOCS-936

Preview: https://api-reference-v2-git-docs-api-ref-comp-improv-medusajs.vercel.app/v2/api/store

www/packages/docs-ui/src/components/CodeBlock/Header/index.tsx

@@ -6,6 +6,7 @@ import { CodeBlockStyle } from ".."
 import { useColorMode } from "@/providers"
 import { Badge, BadgeVariant } from "@/components"
 import { CodeBlockActions, CodeBlockActionsProps } from "../Actions"
+import { CodeBlockHeaderWrapper } from "./Wrapper"
 
 export type CodeBlockHeaderMeta = {
   badgeLabel?: string
@@ -27,17 +28,6 @@ export const CodeBlockHeader = ({
 }: CodeBlockHeaderProps) => {
   const { colorMode } = useColorMode()
 
-  const bgColor = useMemo(
-    () =>
-      clsx(
-        blockStyle === "loud" && "bg-medusa-contrast-bg-base",
-        blockStyle === "subtle" && [
-          colorMode === "light" && "bg-medusa-bg-component",
-          colorMode === "dark" && "bg-medusa-code-bg-header",
-        ]
-      ),
-    [blockStyle, colorMode]
-  )
   const titleColor = useMemo(
     () =>
       clsx(
@@ -51,18 +41,7 @@ export const CodeBlockHeader = ({
   )
 
   return (
-    <div
-      className={clsx(
-        "py-docs_0.5 px-docs_1 mb-0",
-        "rounded-t-docs_lg relative flex justify-between items-center",
-        blockStyle === "subtle" && [
-          "border border-solid border-b-0",
-          colorMode === "light" && "border-medusa-border-base",
-          colorMode === "dark" && "border-medusa-code-border",
-        ],
-        bgColor
-      )}
-    >
+    <CodeBlockHeaderWrapper blockStyle={blockStyle}>
       <div className={clsx("flex-1", "flex gap-docs_0.75 items-start")}>
         {badgeLabel && (
           <Badge variant={badgeColor || "code"} className="font-base">
@@ -76,6 +55,6 @@ export const CodeBlockHeader = ({
         )}
       </div>
       <CodeBlockActions {...actionsProps} />
-    </div>
+    </CodeBlockHeaderWrapper>
   )
 }