fix: add TypeScript API search unit tests and improve styling for narrow viewports

Author: IEvangelist

src/frontend/package.json

@@ -28,8 +28,9 @@
     "astro": "pnpm git-env && astro",
     "test": "pnpm test:unit && pnpm test:e2e",
     "test:all": "pnpm lint && pnpm test",
-    "test:unit": "pnpm test:unit:contracts && pnpm test:unit:components && pnpm test:unit:docs && pnpm test:unit:api-markdown",
+    "test:unit": "pnpm test:unit:contracts && pnpm test:unit:components && pnpm test:unit:docs && pnpm test:unit:api-markdown && pnpm test:unit:ts-api",
     "test:unit:api-markdown": "vitest run --config vitest.config.ts tests/unit/api-markdown.vitest.test.ts",
+    "test:unit:ts-api": "vitest run --config vitest.config.ts tests/unit/ts-api-routes.vitest.test.ts tests/unit/ts-api-search.vitest.test.ts",
     "test:unit:contracts": "vitest run --config vitest.config.ts tests/unit/analytics-script-contracts.vitest.test.ts",
     "test:unit:components": "vitest run --config vitest.config.ts tests/unit/custom-components.vitest.test.ts tests/unit/site-tour.vitest.test.ts",
     "test:unit:docs": "vitest run --config vitest.config.ts tests/unit/filetree-format.vitest.test.ts",

src/frontend/src/components/api-reference/ApiSearchBar.astro

@@ -374,7 +374,8 @@ const getKindClassName = (kind: string) => 'api-filter-dot kind-' + kind.replace
   .api-search-bar-unified .api-search-result-name {
     font-weight: 600;
     font-size: var(--api-text-md, 1.05rem);
-    flex-shrink: 0;
+    flex: 0 1 auto;
+    min-width: 0;
   }
 
   .api-search-bar-unified .api-kind-micro {
@@ -488,6 +489,29 @@ const getKindClassName = (kind: string) => 'api-filter-dot kind-' + kind.replace
     border-color: var(--sl-color-accent);
   }
 
+  @media (max-width: 48rem) {
+    .api-search-bar-unified .api-search-result .api-list-header {
+      display: grid;
+      grid-template-columns: minmax(0, 1fr) auto;
+      align-items: start;
+      gap: 0.35rem 0.5rem;
+    }
+
+    .api-search-bar-unified .api-search-result .api-result-name-wrap {
+      display: flex;
+      width: 100%;
+      max-width: 100%;
+      min-width: 0;
+    }
+
+    .api-search-bar-unified .api-search-result .trailing {
+      grid-column: 1 / -1;
+      width: 100%;
+      min-width: 0;
+      margin-left: 0;
+    }
+  }
+
   @media (max-width: 480px) {
     .api-search-bar-unified .api-filter-chip {
       font-size: 0.72rem;

src/frontend/tests/e2e/ts-api-search.spec.ts

@@ -0,0 +1,32 @@
+import { expect, test } from '@playwright/test';
+import { dismissCookieConsentIfVisible, isNarrowViewport } from '@tests/e2e/helpers';
+
+test('TypeScript API search keeps result names visible on narrow viewports', async ({ page }) => {
+  test.skip(!isNarrowViewport(page), 'This regression only applies to narrow/mobile viewports.');
+
+  await page.goto('/reference/api/typescript/?q=withBun');
+  await dismissCookieConsentIfVisible(page);
+
+  const results = page.locator('#ts-api-search-results .api-search-result');
+  await expect(results).toHaveCount(1);
+
+  const firstResult = results.first();
+  const resultName = firstResult.locator('.api-search-result-name');
+  const resultKind = firstResult.locator('.api-kind-micro');
+  const resultPackage = firstResult.locator('.trailing .api-list-meta');
+
+  await expect(firstResult).toBeVisible();
+  await expect(resultName).toHaveText('withBun');
+  await expect(resultName).toBeVisible();
+  await expect(resultKind).toContainText(/method/i);
+  await expect(resultKind).toBeVisible();
+  await expect(resultPackage).toContainText('Aspire.Hosting.JavaScript');
+  await expect(resultPackage).toBeVisible();
+
+  await expect
+    .poll(async () => {
+      const box = await resultName.boundingBox();
+      return Math.round(box?.width ?? 0);
+    })
+    .toBeGreaterThan(20);
+});