newchange

[micmusjnr20]

Closes #391
Closes #392
Closes #393
Closes #394

Summary

Fixes the API reference page (/api) on small screens: the sidebar and the main Redoc content previously overlapped and were clipped instead of stacking, making the page unusable on phones. The sidebar now stacks below the main content on mobile and is collapsed by default, with a "Show endpoints / Hide endpoints" toggle button to expand it on demand. On desktop the layout is unchanged and the sidebar stays visible.

Problem

• The page wrapper used a fixed height: calc(100vh - 120px) with overflow: hidden on the inner layout, so on mobile the 40vh sidebar + 60vh main content were clipped inside a fixed-height box — the two panes overlapped/overflowed instead of stacking.
• The sidebar was always visible on mobile, taking ~40% of the screen before any content.
• Additionally, APISidebarNav.tsx and RedocViewer.tsx imported .module.css files that were never committed, so the page could not render at all (webpack "module not found" on build).

Changes

Mobile layout (acceptance criteria 1 & 2)

• src/components/ApiReference.module.css — at ≤ 1024px the layout becomes a flex column with the main content first (order: 1) and the sidebar stacked below it (order: 2); overflow: visible so nothing is clipped or overlapped; sidebar is display: none by default and shown via .sidebarOpen (max-height 60vh, scrollable).
• src/components/IntegratedApiReference.tsx — new sidebarOpen state: collapsed by default on mobile (via matchMedia('(max-width: 1024px)')), always open on desktop, and kept in sync on breakpoint changes. New toggle button in the search bar with aria-expanded / aria-controls and clear label text ("Show endpoints" / "Hide endpoints").
• src/pages/api.tsx — wrapper height → min-height so mobile content flows past the fold.

Prerequisite fixes (page could not render)

• Added the missing src/components/APISidebarNav.module.css and src/components/RedocViewer.module.css with all class names referenced by the components.

Tests & checks (acceptance criteria 3 & 4)

• Added Vitest + Testing Library (npm test, 5 tests, all passing):
  • Mobile stylesheet stacks main content before the sidebar in a column with the sidebar hidden by default.
  • Toggle button hidden on desktop (CSS contract).
  • Mobile: clicking the toggle expands/collapses the sidebar; aria-expanded tracks state.
  • Desktop: sidebar visible by default.
  • Main content and sidebar are siblings in the same flex layout.
• Added tsconfig.json + npm run type-check (tsc --noEmit passes after fixing 30 pre-existing type errors — wrong Record<string, CSSProperties> annotations making style helpers non-callable, a transition prop on an SVG <rect>, null-handling and a dead shadowed method in redocDeepLink.ts, missing @site path mapping).

Build

• npm run build now passes. webpack >= 5.106 validates ProgressPlugin options strictly, which breaks webpackbar 6 (used by Docusaurus 3.9.2) — pinned webpack@5.105.0 via npm overrides until the project upgrades Docusaurus (the upstream fix landed in 3.10.1, but 3.10 turns on Rspack under this project's future.v4 flag, which is too risky for the custom webpack plugin).

Testing

npm test           # 5 tests passed
npm run type-check # passes
npm run build      # succeeds — static files generated

Notes

• The PR base is feature/api-dashboard-enhancements because the files being fixed only exist on that branch (they are not in main yet). Once the feature branch is merged to main, this PR can be retargeted to main.
• The dashboard/ sub-app has its own pre-existing type errors (its node_modules is not installed in this environment) and is untouched by this change.

[drips-wave]

@micmusjnr20 Great news! 🎉 Based on an automated assessment of this PR, the linked Wave issue(s) no longer count against your application limits.

You can now already apply to more issues while waiting for a review of this PR. Keep up the great work! 🚀

Learn more about application limits