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>