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

- **Pattern:** `ab-001063` (`directory-search-discovery.facets-filters.mobile-filter-ux`)
- **Severity:** low
- **Lifecycle:** active
- **Last modified:** 2026-04-18
- **Canonical URL:** https://auditbuffet.com/patterns/ab-001063
- **License:** CC-BY-4.0 — attribute to AuditBuffet Pattern Catalog (https://auditbuffet.com/patterns/ab-001063)

## Why it matters

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.

## Severity rationale

Low because the result set is still reachable, but cramped layouts measurably reduce card scanability and mobile engagement depth.

## Remediation

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`:

```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>
```

## Detection

- **ID:** `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:

  ```tsx
  // 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.

---

Taxons: user-experience

HTML version: https://auditbuffet.com/patterns/ab-001063