Filter panel on mobile uses drawer/modal, not always-visible sidebar

A persistent sidebar that consumes 40% of a 320px mobile viewport leaves roughly 190px for result cards — too narrow to show an image, name, category, and rating without wrapping badly. Users end up scrolling a cramped single-column list through a filter rail they aren't actively using, and the directory feels like a desktop site squeezed onto a phone. A drawer or modal pattern reclaims the full viewport for results and gates filter interaction behind an explicit tap.

Use a CSS transform drawer that slides the filter panel off-screen on mobile and toggles open with a dedicated Filters button. On md: breakpoints and above, render the same panel as a persistent sidebar. Edit components/DirectoryPage.tsx:

<aside className={`fixed inset-0 md:static md:w-64 transform transition-transform ${
  filtersOpen ? 'translate-x-0' : '-translate-x-full md:translate-x-0'
}`}>
  <FilterPanel />
</aside>

• ID: directory-search-discovery.facets-filters.mobile-filter-ux

• Severity: low

• What to look for: Enumerate all relevant files and View the directory on a mobile device (320px width) or use browser dev tools to simulate a mobile viewport. Check how filters are displayed. Ideally, the filter panel should be hidden by default and toggle open as a drawer or modal (not a persistent sidebar taking up screen space). If filters are visible, check whether they take up excessive space, pushing the results below the fold.

• Pass criteria: On mobile (≤640px), the filter panel is either hidden by default and toggled via a "Filters" button/drawer, or it is displayed but does not significantly reduce the space available for results (e.g., using a horizontal scrollable pill group instead of a stacked sidebar).

• Fail criteria: On mobile, the filter panel is always visible as a sidebar, taking up ≥25% of the viewport width and pushing results off-screen or making the layout cramped.

• Skip (N/A) when: Directory has fewer than 3 filterable attributes (see Global N/A Rule).

• Detail on fail: "Filter panel occupies 40% of the mobile screen width as a persistent sidebar. Results are cramped and mostly off-screen. Should use a drawer or hidden panel with a toggle button."

• Remediation: Use responsive layouts and a mobile-friendly filter drawer:

  // components/DirectoryPage.tsx
  import { useState } from 'react'
  
  export function DirectoryPage() {
    const [filtersOpen, setFiltersOpen] = useState(false)
  
    return (
      <div>
        <header>
          <button onClick={() => setFiltersOpen(!filtersOpen)} className="md:hidden">
            Filters
          </button>
        </header>
  
        <div className="flex">
          {/* Mobile: drawer; Desktop: sidebar */}
          <aside className={`
            fixed inset-0 z-50 bg-white overflow-auto md:static
            transform transition-transform
            ${filtersOpen ? 'translate-x-0' : '-translate-x-full'}
            md:translate-x-0 md:w-64 md:relative
          `}>
            <FilterPanel />
          </aside>
  
          <main className="flex-1">
            <ListingGrid />
          </main>
        </div>
      </div>
    )
  }
  

  On mobile, use a CSS-based drawer or a modal dialog. On desktop, the filter panel can be a persistent sidebar.