From 313691d3e9c4265da1e0a2104e87d5d72c2f7cee Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tr=C3=A8sAbhi?= <43380238+tresabhi@users.noreply.github.com>
Date: Fri, 20 Mar 2026 14:52:06 -0500
Subject: [PATCH] feat: better gutter and headings

---
 packages/i18n/strings/en.json                 |  3 ---
 .../src/components/ApiDescription.astro       |  7 ++++-
 .../website-ue/src/components/ApiGroup.astro  |  6 +----
 .../src/pages/[...locale]/api/index.astro     | 26 +++----------------
 4 files changed, 10 insertions(+), 32 deletions(-)

diff --git a/packages/i18n/strings/en.json b/packages/i18n/strings/en.json
index e26334ffc..80ebee2a2 100644
--- a/packages/i18n/strings/en.json
+++ b/packages/i18n/strings/en.json
@@ -118,9 +118,6 @@
   },
 
   "api": {
-    "json": "JSON methods",
-    "pb": "Protocol Buffer methods",
-    "media": "Media methods",
     "no_docs": "This method has no documentation.",
     "test": "Test",
     "view_full": "View full types"
diff --git a/packages/website-ue/src/components/ApiDescription.astro b/packages/website-ue/src/components/ApiDescription.astro
index 998eb9ea2..c9e7775b0 100644
--- a/packages/website-ue/src/components/ApiDescription.astro
+++ b/packages/website-ue/src/components/ApiDescription.astro
@@ -44,7 +44,12 @@ for (const line of bodyOriginal.split("\n")) {
 
     .gutter {
       width: var(--space-2);
-      background: linear-gradient(transparent, var(--gray-6) var(--space-4));
+      background: linear-gradient(
+        transparent,
+        var(--gray-6) var(--space-4),
+        var(--gray-6) calc(100% - var(--space-4)),
+        transparent
+      );
 
       margin: 0 var(--space-4);
     }
diff --git a/packages/website-ue/src/components/ApiGroup.astro b/packages/website-ue/src/components/ApiGroup.astro
index c795061a7..3eb478120 100644
--- a/packages/website-ue/src/components/ApiGroup.astro
+++ b/packages/website-ue/src/components/ApiGroup.astro
@@ -10,8 +10,4 @@ interface Props {
 const { apis, locale } = Astro.props;
 ---
 
-{
-  apis
-    .sort((a, b) => a.id.localeCompare(b.id))
-    .map((api) => <ApiEntry {locale} {api} />)
-}
+{apis.map((api) => <ApiEntry {locale} {api} />)}
diff --git a/packages/website-ue/src/pages/[...locale]/api/index.astro b/packages/website-ue/src/pages/[...locale]/api/index.astro
index 74ea3938e..677ff1416 100644
--- a/packages/website-ue/src/pages/[...locale]/api/index.astro
+++ b/packages/website-ue/src/pages/[...locale]/api/index.astro
@@ -3,11 +3,9 @@ import "@radix-ui/colors/amber-dark.css";
 import { getCollection } from "astro:content";
 import ApiGroup from "../../../components/ApiGroup.astro";
 import ColorScale from "../../../components/ColorScale.astro";
-import { Heading } from "../../../components/Heading";
 import { Section } from "../../../components/Section";
 import SyntaxStyles from "../../../components/SyntaxStyles.astro";
 import ToolBanner from "../../../components/ToolBanner.astro";
-import { api } from "../../../core/api/dynamic";
 import { tools } from "../../../core/tools/tools";
 import BaseLayout from "../../../layouts/BaseLayout.astro";
 
@@ -15,7 +13,6 @@ export { getStaticPaths } from "../index.astro";
 
 const { locale } = Astro.props;
 const collection = await getCollection("api");
-const strings = await api.strings(locale);
 
 const paths: {
   path: string;
@@ -32,28 +29,11 @@ paths.sort((a, b) => a.path.localeCompare(b.path));
   <ToolBanner {locale} tool={tools.api} slot="pre-app" />
 
   <Section>
-    <Heading size="2">{strings.api.json}</Heading>
     <ApiGroup
       {locale}
-      apis={collection.filter((api) => api.id.endsWith(".json"))}
-    />
-  </Section>
-
-  <Section>
-    <Heading size="2">{strings.api.pb}</Heading>
-    <ApiGroup
-      {locale}
-      apis={collection.filter((api) => api.id.endsWith(".pb"))}
-    />
-  </Section>
-
-  <Section>
-    <Heading size="2">{strings.api.media}</Heading>
-    <ApiGroup
-      {locale}
-      apis={collection.filter(
-        (api) => !api.id.endsWith(".json") && !api.id.endsWith(".pb"),
-      )}
+      apis={collection
+        .filter((api) => !api.id.endsWith(".pb"))
+        .sort((a, b) => a.id.localeCompare(b.id))}
     />
   </Section>
 </BaseLayout>