fix(examples): repair filters between sm and md breakpoints (DX-1449)

src/components/Examples/ExamplesContent.test.tsx

@@ -75,7 +75,7 @@ describe('ExamplesContent', () => {
   });
 
   it('filters examples based on product filter selection', () => {
-    // Make the screen wider than the default of 1024px as desktop filtering only works >= 1040px
+    // Desktop filter auto-commits at the `sm` breakpoint (768px) and above
     Object.defineProperty(window, 'innerWidth', { writable: true, configurable: true, value: 1600 });
     window.dispatchEvent(new Event('resize'));
 
@@ -86,4 +86,19 @@ describe('ExamplesContent', () => {
     expect(screen.queryByText('Online status')).not.toBeInTheDocument();
     expect(screen.getByText('Member location')).toBeInTheDocument();
   });
+
+  // DX-1449: between the `sm` (768px) and `md` (1040px) breakpoints the inline
+  // desktop filter renders without an Apply button, but selections previously
+  // only committed at >= 1040px, leaving the filter inert in that range.
+  it('filters examples at widths between the sm and md breakpoints', () => {
+    Object.defineProperty(window, 'innerWidth', { writable: true, configurable: true, value: 818 });
+    window.dispatchEvent(new Event('resize'));
+
+    render(<ExamplesContent exampleImages={exampleImages} />);
+    const productFilterInput = screen.getByTestId('product-spaces');
+    fireEvent.click(productFilterInput);
+
+    expect(screen.queryByText('Online status')).not.toBeInTheDocument();
+    expect(screen.getByText('Member location')).toBeInTheDocument();
+  });
 });

src/components/Examples/ExamplesFilter.tsx

@@ -12,6 +12,11 @@ import { useOnClickOutside } from 'src/hooks/use-on-click-outside';
 import { navigate } from 'gatsby';
 import { ProductName } from '@ably/ui/core/ProductTile/data';
 
+// Matches Tailwind's `sm` screen (768px), where the filter switches from the
+// mobile drawer (with an Apply button) to the inline desktop sidebar. Above
+// this width selections must auto-commit, since no Apply button is rendered.
+const SM_BREAKPOINT = 768;
+
 const ExamplesFilter = ({
   selected,
   setSelected,
@@ -85,7 +90,7 @@ const ExamplesFilter = ({
 
   useEffect(() => {
     const handleResize = () => {
-      if (window.innerWidth >= 1040) {
+      if (window.innerWidth >= SM_BREAKPOINT) {
         setExpandFilterMenu(false);
       }
     };
@@ -95,7 +100,7 @@ const ExamplesFilter = ({
   }, []);
 
   useEffect(() => {
-    if (window.innerWidth >= 1040) {
+    if (window.innerWidth >= SM_BREAKPOINT) {
       setSelected(localSelected);
     }
   }, [expandFilterMenu, localSelected, setSelected]);