OpenAPI: Fix empty security schema rendering

examples/openapi/openapi.json

@@ -6316,11 +6316,7 @@
       "post": {
         "tags": ["identities"],
         "operationId": "deleteIdentity",
-        "security": [
-          {
-            "bearerAuth": []
-          }
-        ],
+        "security": [{}],
         "requestBody": {
           "required": true,
           "content": {

packages/openapi/src/playground/client.tsx

@@ -311,7 +311,8 @@ function FormBody({
       {params.map((param, i) => {
         const name = paramNames[i];
         const type = paramTypes[i];
-        if ((param.length === 0 && type !== 'header') || !authorization) return;
+        if (type !== 'header' && param.length === 0) return;
+        if (type === 'header' && !authorization && param.length === 0) return;
 
         return (
           <CollapsiblePanel key={name} title={name}>

packages/openapi/src/playground/index.tsx

@@ -144,17 +144,23 @@ function getAuthorizationField(
 ): Security | undefined {
   const security = method.security ?? document.security ?? [];
   if (security.length === 0) return;
-  const singular = security.find(
-    (requirements) => Object.keys(requirements).length === 1,
-  );
-  if (!singular) {
+
+  let item;
+  for (const requirements of security) {
+    const keys = Object.keys(requirements).length;
+
+    if (keys === 0) return;
+    else if (keys === 1) item = requirements;
+  }
+
+  if (!item) {
     console.warn(
       `Cannot find suitable security schema for API Playground from ${JSON.stringify(security, null, 2)}. Only one requirement is allowed`,
     );
     return;
   }
 
-  const scheme = getSecurities(singular, document)[0];
+  const scheme = getSecurities(item, document)[0];
 
   if (scheme.type === 'oauth2') {
     const flow = Object.keys(scheme.flows).at(0);

packages/ui/src/layouts/notebook.client.tsx

@@ -11,7 +11,10 @@ import { usePathname } from 'next/navigation';
 import { isActive } from '@/utils/is-active';
 import type { Option } from '@/components/layout/root-toggle';
 
-export function Navbar(props: HTMLAttributes<HTMLElement>) {
+export function Navbar({
+  mode,
+  ...props
+}: HTMLAttributes<HTMLElement> & { mode: 'top' | 'auto' }) {
   const { open, collapsed } = useSidebar();
   const { isTransparent } = useNav();
 
@@ -20,18 +23,13 @@ export function Navbar(props: HTMLAttributes<HTMLElement>) {
       id="nd-subnav"
       {...props}
       className={cn(
-        'fixed inset-x-0 top-(--fd-banner-height) z-10 pe-(--fd-layout-offset) backdrop-blur-lg transition-colors',
+        'fixed inset-x-0 top-(--fd-banner-height) z-10 px-(--fd-layout-offset) backdrop-blur-lg transition-colors',
         (!isTransparent || open) && 'bg-fd-background/80',
+        mode === 'auto' &&
+          !collapsed &&
+          'ps-[calc(var(--fd-layout-offset)+var(--fd-sidebar-width))]',
         props.className,
       )}
-      style={
-        {
-          paddingInlineStart: collapsed
-            ? 'var(--fd-layout-offset)'
-            : 'calc(var(--fd-layout-offset) + var(--fd-sidebar-width))',
-          ...props.style,
-        } as object
-      }
     >
       {props.children}
     </header>

packages/ui/src/layouts/notebook.tsx

@@ -227,7 +227,7 @@ function DocsNavbar({
   const navMode = nav.mode ?? 'auto';
 
   return (
-    <Navbar className={cn(navMode === 'top' && 'pe-(--fd-layout-offset)')}>
+    <Navbar mode={navMode}>
       <div
         className={cn(
           'flex flex-row border-b border-fd-foreground/10 px-4 h-14',