From c66df64cd7ceb42aa2e6bca24fe0fba5dc063972 Mon Sep 17 00:00:00 2001
From: Filip Papiernik <45321473+LeCarteloo@users.noreply.github.com>
Date: Sun, 17 Nov 2024 16:06:02 +0100
Subject: [PATCH] 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        | 6 ++++++
 packages/openapi/src/ui/client.tsx | 5 +++--
 packages/openapi/src/ui/index.tsx  | 4 ++--
 3 files changed, 11 insertions(+), 4 deletions(-)
 create mode 100644 .changeset/red-owls-grab.md

diff --git a/.changeset/red-owls-grab.md b/.changeset/red-owls-grab.md
new file mode 100644
index 000000000..c20c29ab5
--- /dev/null
+++ b/.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
diff --git a/packages/openapi/src/ui/client.tsx b/packages/openapi/src/ui/client.tsx
index a78e1e37e..f0998311d 100644
--- a/packages/openapi/src/ui/client.tsx
+++ b/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>
diff --git a/packages/openapi/src/ui/index.tsx b/packages/openapi/src/ui/index.tsx
index 3212d4c67..7a7d1f6e3 100644
--- a/packages/openapi/src/ui/index.tsx
+++ b/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={