Fix design on API reference page

Author: webrdaniel

apify-docs-theme/src/theme/LLMButtons/index.jsx

@@ -1,3 +1,4 @@
+import clsx from 'clsx';
 import React, { useCallback, useState } from 'react';
 
 import {
@@ -240,7 +241,7 @@ const Option = ({ Icon, label, description, showExternalIcon }) => (
     </div>
 );
 
-export default function LLMButtons() {
+export default function LLMButtons({ isApiReferencePage = false }) {
     const [copyingStatus, setCopyingStatus] = useState('idle');
     const chevronIconRef = React.useRef(null);
 
@@ -268,7 +269,9 @@ export default function LLMButtons() {
 
     return (
         <Menu
-            className={styles.llmMenu}
+            className={clsx(styles.llmMenu, {
+                [styles.llmMenuApiReferencePage]: isApiReferencePage,
+            })}
             onMenuOpen={(isOpen) => chevronIconRef.current?.classList.toggle(
                     styles.chevronIconOpen,
                     isOpen,

apify-docs-theme/src/theme/LLMButtons/styles.module.css

@@ -5,6 +5,7 @@
 
 .llmMenu {
     margin-top: 1.2rem;
+    width: fit-content;
 
     @media (min-width: 768px) {
         margin-left: auto;
@@ -21,6 +22,15 @@
     }
 }
 
+.llmMenuApiReferencePage {
+    margin-top: -0.8rem;
+    margin-bottom: calc(var(--ifm-h1-vertical-rhythm-bottom) * var(--ifm-leading));
+    margin-left: 0 !important;
+    .llmButtonWrapper {
+        width: fit-content !important;
+    }
+}
+
 .llmButton {
     width: fit-content;
     display: inline-flex;

docusaurus.config.js

@@ -200,7 +200,7 @@ module.exports = {
                                 // Find the first Heading h1 and add LLMButtons after it
                                 // eslint-disable-next-line max-len
                                 const headingRegex = /(<Heading[^>]*as=\{"h1"\}[^>]*className=\{"openapi__heading"\}[^>]*children=\{[^}]*\}[^>]*>\s*<\/Heading>)/;
-                                md = md.replace(headingRegex, '$1\n\n<LLMButtons />\n');
+                                md = md.replace(headingRegex, '$1\n\n<LLMButtons isApiReferencePage />\n');
 
                                 return md;
                             },
@@ -210,7 +210,7 @@ module.exports = {
                                 // Find the first Heading h1 and add LLMButtons after it
                                 // eslint-disable-next-line max-len
                                 const headingRegex = /(<Heading[^>]*as=\{"h1"\}[^>]*className=\{"openapi__heading"\}[^>]*children=\{[^}]*\}[^>]*>\s*<\/Heading>)/;
-                                md = md.replace(headingRegex, '$1\n\n<LLMButtons />\n');
+                                md = md.replace(headingRegex, '$1\n\n<LLMButtons isApiReferencePage />\n');
 
                                 return md;
                             },