Fix mobile nav stacking + Swagger path wrapping

src/routes/api.ts

@@ -151,7 +151,7 @@ export default (app: Hono, registry: OpenAPIRegistry) => {
     registry.registerPath({
         method: 'get',
         path: '/api',
-        summary: 'Getting the OpenAPI specification for the cdnjs API',
+        summary: 'Fetch the OpenAPI specification for the cdnjs API',
         description: [
             'The `/api` endpoint will return a JSON object with full OpenAPI specification for the cdnjs API.',
             '',

src/routes/whitelist.ts

@@ -48,7 +48,7 @@ export default (app: Hono, registry: OpenAPIRegistry) => {
     registry.registerPath({
         method: 'get',
         path: '/whitelist',
-        summary: 'Fetch details about the cdnjs file extension whitelist',
+        summary: 'Fetch the cdnjs file extension whitelist',
         description: [
             'The `/whitelist` endpoint returns a JSON object containing a list of extensions permitted on the CDN as well as categories for those extensions.',
             '',

src/utils/jsx/islands/swagger.tsx

@@ -1,6 +1,6 @@
 import { css } from '@emotion/css';
 import { Iterable, List, Map } from 'immutable';
-import { type ComponentType, type ReactNode, useState } from 'react';
+import { type ComponentType, Fragment, type ReactNode, useState } from 'react';
 import SwaggerUI from 'swagger-ui-react';
 import swaggerStyles from 'swagger-ui-react/swagger-ui.css';
 
@@ -232,6 +232,9 @@ const styles = {
             flex-shrink: 0;
         }
     `,
+    path: css`
+        text-wrap: nowrap;
+    `,
     loader: css`
         position: absolute;
         inset: 0;
@@ -447,15 +450,12 @@ const plugin = (system: System) => ({
                     expanded={isShown}
                 >
                     <code>
-                        {path?.split(/\//g).map((part, i) =>
-                            i === 0 ? (
-                                part
-                            ) : (
-                                <>
-                                    <wbr key={`wbr-${i}`} />/{part}
-                                </>
-                            ),
-                        )}
+                        {path?.split(/(?=\/)/g).map((part) => (
+                            <Fragment key={part}>
+                                <wbr />
+                                <span className={styles.path}>{part}</span>
+                            </Fragment>
+                        ))}
                     </code>
                     <span>{summary}</span>
                 </Summary>

src/utils/jsx/navigation.tsx

@@ -10,6 +10,7 @@ const styles = {
     navigation: css`
         position: relative;
         isolation: isolate;
+        z-index: 1;
 
         &::before {
             content: '';
@@ -93,6 +94,7 @@ const styles = {
         right: 0;
         background: ${theme.background.navigation};
         border-top: ${theme.spacing(0.25)} solid ${theme.background.brand};
+        border-bottom: ${theme.spacing(0.25)} solid ${theme.background.footer};
         display: flex;
         flex-direction: column;
         gap: ${theme.spacing(0.5)};