From 1adfdf68d355dc2208e090449b382683c644cd7e Mon Sep 17 00:00:00 2001
From: Jeffrey Graham <jeffrey.graham3@gmail.com>
Date: Tue, 10 Nov 2026 07:27:14 -0500
Subject: [PATCH] fix(courses): ensure clean FilterSidebar vs FilterDrawer
 breakpoint handoff (#195)

---
 src/components/courses/FilterSidebar.tsx      | 44 ++++++++++++++--
 .../FilterSidebar.responsive.test.tsx         | 51 +++++++++++++++++++
 2 files changed, 90 insertions(+), 5 deletions(-)
 create mode 100644 src/components/courses/__tests__/FilterSidebar.responsive.test.tsx

diff --git a/src/components/courses/FilterSidebar.tsx b/src/components/courses/FilterSidebar.tsx
index b8f538f..fa2b49b 100644
--- a/src/components/courses/FilterSidebar.tsx
+++ b/src/components/courses/FilterSidebar.tsx
@@ -1,5 +1,6 @@
 'use client';
 
+import { useEffect } from 'react';
 import { X } from 'lucide-react';
 import { cn } from '@/lib/utils';
 import type { Category } from '@/types';
@@ -57,6 +58,26 @@ export function FilterSidebar({
 
   const hasFilters = activeCount > 0;
 
+  useEffect(() => {
+    if (!open) return;
+    const handleResize = () => {
+      if (window.innerWidth >= 1024) {
+        onClose();
+      }
+    };
+    const handleKeyDown = (e: KeyboardEvent) => {
+      if (e.key === 'Escape') {
+        onClose();
+      }
+    };
+    window.addEventListener('resize', handleResize);
+    window.addEventListener('keydown', handleKeyDown);
+    return () => {
+      window.removeEventListener('resize', handleResize);
+      window.removeEventListener('keydown', handleKeyDown);
+    };
+  }, [open, onClose]);
+
   const content = (
     <div className="flex flex-col h-full">
       {/* Header */}
@@ -228,22 +249,35 @@ export function FilterSidebar({
   return (
     <>
       {/* Desktop sidebar */}
-      <aside className="hidden lg:block w-56 flex-shrink-0">
-        <div className="card p-4 sticky top-6">
+      <aside
+        data-testid="filter-sidebar-desktop"
+        className="hidden lg:block w-56 xl:w-64 flex-shrink-0"
+      >
+        <div className="card p-4 sticky top-6 max-h-[calc(100vh-3rem)] overflow-y-auto">
           {content}
         </div>
       </aside>
 
-      {/* Mobile drawer overlay */}
+      {/* Mobile & tablet drawer overlay (<1024px) */}
       {open && (
-        <div className="lg:hidden fixed inset-0 z-50 flex">
+        <div
+          data-testid="filter-drawer-overlay"
+          className="lg:hidden fixed inset-0 z-50 flex"
+        >
           {/* Backdrop */}
           <div
+            data-testid="filter-drawer-backdrop"
             className="absolute inset-0 bg-black/40"
             onClick={onClose}
           />
           {/* Drawer */}
-          <div className="relative w-72 bg-white h-full shadow-xl overflow-y-auto p-5 animate-slide-up">
+          <div
+            data-testid="filter-drawer-panel"
+            role="dialog"
+            aria-modal="true"
+            aria-label="Course filters"
+            className="relative w-72 max-w-[calc(100vw-3rem)] bg-white h-full shadow-xl overflow-y-auto p-4 sm:p-5 animate-slide-up"
+          >
             {content}
           </div>
         </div>
diff --git a/src/components/courses/__tests__/FilterSidebar.responsive.test.tsx b/src/components/courses/__tests__/FilterSidebar.responsive.test.tsx
new file mode 100644
index 0000000..6b74c17
--- /dev/null
+++ b/src/components/courses/__tests__/FilterSidebar.responsive.test.tsx
@@ -0,0 +1,51 @@
+// @vitest-environment jsdom
+import React from 'react';
+import { act, render, screen } from '@testing-library/react';
+import { describe, expect, it, vi } from 'vitest';
+import { FilterSidebar } from '../FilterSidebar';
+
+const baseProps = {
+  open: true,
+  onClose: vi.fn(),
+  categories: [{ name: 'Tailoring', count: 12 }],
+  activeCategory: '',
+  activeLevel: '',
+  activePrice: '',
+  onCategory: vi.fn(),
+  onLevel: vi.fn(),
+  onPrice: vi.fn(),
+  onClearAll: vi.fn(),
+};
+
+describe('FilterSidebar vs FilterDrawer breakpoint handoff (#195)', () => {
+  it('constrains mobile drawer width at 320px/375px and hides desktop sidebar below lg breakpoint', () => {
+    render(<FilterSidebar {...baseProps} />);
+
+    const desktopSidebar = screen.getByTestId('filter-sidebar-desktop');
+    expect(desktopSidebar.className).toContain('hidden');
+    expect(desktopSidebar.className).toContain('lg:block');
+
+    const drawerOverlay = screen.getByTestId('filter-drawer-overlay');
+    expect(drawerOverlay.className).toContain('lg:hidden');
+
+    const drawerPanel = screen.getByTestId('filter-drawer-panel');
+    expect(drawerPanel).toHaveAttribute('role', 'dialog');
+    expect(drawerPanel.className).toContain('max-w-[calc(100vw-3rem)]');
+  });
+
+  it('automatically closes open mobile drawer when viewport crosses lg (1024px) breakpoint', () => {
+    const onClose = vi.fn();
+    render(<FilterSidebar {...baseProps} onClose={onClose} />);
+
+    Object.defineProperty(window, 'innerWidth', {
+      writable: true,
+      configurable: true,
+      value: 1024,
+    });
+    act(() => {
+      window.dispatchEvent(new Event('resize'));
+    });
+
+    expect(onClose).toHaveBeenCalledTimes(1);
+  });
+});