update: ui improvement on the API pages

app/docs/styles.css

@@ -445,3 +445,7 @@ aside[aria-label*="On this page" i] > div:first-child,
   }
 }
 
+/* Add extra horizontal padding to the first button in response tablist */
+div [role="tablist"] button:first-child {
+  padding-left: 0.5rem !important;
+}

components/api/api-open-body.client.tsx

@@ -0,0 +1,26 @@
+"use client";
+import { useEffect } from "react";
+
+// automatically open the Body section on OpenAPI pages
+export function OpenBodySection() {
+  useEffect(() => {
+    const openBodySection = () => {
+      const buttons = Array.from(document.querySelectorAll("button"));
+
+      buttons.forEach((button) => {
+        if (
+          button.textContent?.trim().startsWith("Body") &&
+          button.getAttribute("data-state") === "closed"
+        ) {
+          button.click();
+        }
+      });
+    };
+
+    openBodySection();
+    const timer = setTimeout(openBodySection, 100);
+    return () => clearTimeout(timer);
+  }, []);
+
+  return null;
+}

components/api/api-pages.tsx

@@ -5,6 +5,7 @@ import metricsApiClient from './metrics-api-page.client';
 import pchainApiClient from './pchain-api-page.client';
 import cchainApiClient from './cchain-api-page.client';
 import xchainApiClient from './xchain-api-page.client';
+import { OpenBodySection } from "./api-open-body.client";
 
 const DataAPIPageBase = createAPIPage(dataApi, {
   client: dataApiClient,
@@ -13,6 +14,7 @@ const DataAPIPageBase = createAPIPage(dataApi, {
 export function DataAPIPage(props: any) {
   return (
     <div className="data-api-playground">
+      <OpenBodySection />
       <DataAPIPageBase {...props} />
     </div>
   );
@@ -25,6 +27,7 @@ const MetricsAPIPageBase = createAPIPage(metricsApi, {
 export function MetricsAPIPage(props: any) {
   return (
     <div className="metrics-api-playground">
+      <OpenBodySection />
       <MetricsAPIPageBase {...props} />
     </div>
   );
@@ -37,6 +40,7 @@ const PChainAPIPageBase = createAPIPage(pChainApi, {
 export function PChainAPIPage(props: any) {
   return (
     <div className="pchain-api-playground">
+      <OpenBodySection />
       <PChainAPIPageBase {...props} />
     </div>
   );
@@ -49,6 +53,7 @@ const CChainAPIPageBase = createAPIPage(cChainApi, {
 export function CChainAPIPage(props: any) {
   return (
     <div className="cchain-api-playground">
+      <OpenBodySection />
       <CChainAPIPageBase {...props} />
     </div>
   );
@@ -61,8 +66,8 @@ const XChainAPIPageBase = createAPIPage(xChainApi, {
 export function XChainAPIPage(props: any) {
   return (
     <div className="xchain-api-playground">
+      <OpenBodySection />
       <XChainAPIPageBase {...props} />
     </div>
   );
 }
-