Fix account tabs overflow with wrapping pill-style tabs (#225)

## Summary
- Replace horizontal scroll behavior on API reference tab lists (oneOf
schema variants) with flex-wrap pill-style buttons that handle 20+
account types gracefully across viewports
- Remove dead `scroll-fade.js` (117-line drag-to-scroll + fade gradient
script) and its `<script>` tag from `docs.json` that was loading on
every page for zero benefit

## Test plan
- [ ] Verify API reference pages with many tabs (e.g. External Accounts)
wrap correctly
- [ ] Verify no console errors from missing `scroll-fade.js`
- [ ] Check light and dark mode tab styling
- [ ] Check mobile viewport wrapping behavior

🤖 Generated with [Claude Code](https://claude.com/claude-code)

---------

Co-authored-by: Claude Opus 4.6 <noreply@anthropic.com>
Co-authored-by: Cursor <cursoragent@cursor.com>

Author: 3 people

CLAUDE.md

@@ -13,7 +13,7 @@ Grid is an API for global payments across fiat, stablecoins, and Bitcoin.
 - Use snippets from `mintlify/snippets/` instead of duplicating content across use cases
 - Follow writing standards in `mintlify/CLAUDE.md` for all documentation content
 - MDX files require frontmatter with `title` and `description`
-- Do not use `React.useEffect` in MDX — it breaks Mintlify's acorn parser. `React.useState` is fine.
+- React hooks (`useState`, `useEffect`, etc.) work in MDX. If the acorn parser throws, it's usually a JS expression issue (e.g., template literals in JSX curlies), not the hook itself.
 
 ## Commands
 

mintlify/style.css

@@ -2564,6 +2564,55 @@ html.dark [data-component-part="tab-button"][data-active="true"] {
   border-color: var(--ls-gray-100) !important;
 }
 
+/* --- API Reference: Wrap overflowing tab lists with pill-style buttons --- */
+
+#api-playground-2-operation-page [data-component-part="tabs-list"] {
+  flex-wrap: wrap !important;
+  overflow-x: visible !important;
+  gap: 6px !important;
+  border-bottom: none !important;
+  padding: 16px 0 0 0 !important;
+}
+
+#api-playground-2-operation-page [data-component-part="tab-button"] {
+  border: 0.5px solid transparent !important;
+  border-radius: 6px !important;
+  padding: 4px 14px !important;
+  margin-bottom: 0 !important;
+  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease !important;
+}
+
+#api-playground-2-operation-page [data-component-part="tab-button"][data-active="false"] {
+  border-color: transparent !important;
+  background: var(--ls-black-02) !important;
+}
+
+html.dark #api-playground-2-operation-page [data-component-part="tab-button"][data-active="false"] {
+  background: var(--ls-white-02) !important;
+}
+
+#api-playground-2-operation-page [data-component-part="tab-button"][data-active="false"]:hover {
+  border-color: transparent !important;
+  background: rgba(0, 0, 0, 0.05) !important;
+}
+
+html.dark #api-playground-2-operation-page [data-component-part="tab-button"][data-active="false"]:hover {
+  border-color: transparent !important;
+  background: rgba(255, 255, 255, 0.08) !important;
+}
+
+#api-playground-2-operation-page [data-component-part="tab-button"][data-active="true"] {
+  border: 0.5px solid rgba(0, 0, 0, 0.1) !important;
+  background: var(--ls-white) !important;
+  color: var(--ls-gray-950) !important;
+}
+
+html.dark #api-playground-2-operation-page [data-component-part="tab-button"][data-active="true"] {
+  border: 0.5px solid rgba(255, 255, 255, 0.1) !important;
+  background: var(--ls-white-10) !important;
+  color: var(--ls-white) !important;
+}
+
 /* ===========================================
    Tables
    =========================================== */