OpenAPI: Render Server Selector Only for Multiple Servers (#1065)

* OpenAPI: Hide the server selector when there is only one server or none defined

* OpenAPI: Improve APIInfo position on smaller screens

* docs: Add changeset

.changeset/red-owls-grab.md

@@ -0,0 +1,6 @@
+---
+'fumadocs-openapi': minor
+---
+
+OpenAPI: Display the server selector only when more than one server is defined in the OpenAPI schema
+OpenAPI: Improve APIInfo position for better visibility on smaller screens

packages/openapi/src/ui/client.tsx

@@ -76,10 +76,11 @@ export function CopyRouteButton({
 
 export function BaseUrlSelect({ baseUrls }: { baseUrls: string[] }) {
   const { baseUrl, setBaseUrl } = useApiContext();
-  if (baseUrls.length === 0) return null;
+
+  if (baseUrls.length <= 1) return null;
 
   return (
-    <div className="flex flex-row items-center gap-1 px-1">
+    <div className="flex flex-row items-center gap-1 px-1 mt-2">
       <span className="p-0.5 text-xs font-medium text-fd-muted-foreground">
         Server
       </span>

packages/openapi/src/ui/index.tsx

@@ -41,7 +41,7 @@ export function APIInfo({
   return (
     <div className={cn('min-w-0 flex-1', className)} {...props}>
       <div className="sticky top-[var(--fd-api-info-top)] z-[4] mb-4 border-b border-fd-foreground/10 bg-fd-card/50 px-4 py-1.5 shadow-lg backdrop-blur-lg max-lg:-mx-3 max-md:-mx-4 md:rounded-xl md:border md:px-1.5">
-        <div className="mb-2 flex flex-row items-center gap-1.5">
+        <div className="flex flex-row items-center gap-1.5">
           <span
             className={cn(
               badgeVariants({ color: getBadgeColor(method) }),
@@ -68,7 +68,7 @@ export function API({
     <div
       {...props}
       className={cn(
-        'flex flex-col gap-x-6 gap-y-4 max-lg:[--fd-toc-height:46px] max-md:[--fd-toc-height:36px] xl:flex-row xl:items-start',
+        'flex flex-col gap-x-6 gap-y-4 max-xl:[--fd-toc-height:46px] max-md:[--fd-toc-height:36px] xl:flex-row xl:items-start',
         props.className,
       )}
       style={