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

[kennethkalmer]

Summary

Fixes DX-1449: the examples filters stop working on narrow desktop windows (reproducible at ~818px).

Root cause

The filter UI switches from the mobile drawer to the inline desktop sidebar at Tailwind's sm breakpoint (768px in tailwind.config.js), where the Apply button is hidden (sm:hidden). But the auto-commit effect in ExamplesFilter.tsx only propagated selections to the parent at >= 1040px (the md breakpoint).

That left a dead zone between 768px and 1039px: the desktop sidebar rendered with no Apply button, so checkbox clicks updated local state but never reached the parent — the filters appeared completely broken.

Fix

• Align the JS breakpoint with the CSS sm breakpoint (768px) via a named SM_BREAKPOINT constant (matches the existing MD_BREAKPOINT convention in Header.tsx).
• Add a regression test exercising the filter at 818px.

Manual testing (review app)

1. Open https://ably-docs-dx-1449-examp-pcn9th.herokuapp.com/examples
2. Resize the browser window to a width between 768px and 1039px (e.g. ~818px — the originally reported width). Easiest via DevTools device toolbar / responsive mode with a custom width, or just narrow the window.
3. In the inline filter sidebar on the left, tick a product filter (e.g. Spaces).
4. Expected: the example grid immediately filters to that product. No Apply button is shown at this width — selection commits on click.
5. Sanity check the boundaries:
   • < 768px: the sidebar collapses to a Filter button opening the drawer; selections commit via the Apply button.
   • >= 1040px: inline sidebar, instant filtering (unchanged behaviour).

Tests

yarn test src/components/Examples — 6/6 passing, including the new 818px regression test.

🤖 Generated with Claude Code

[coderabbitai]

Important

Review skipped

Auto reviews are disabled on this repository. Please check the settings in the CodeRabbit UI or the .coderabbit.yaml file in this repository. To trigger a single review, invoke the @coderabbitai review command.

⚙️ Run configuration

Configuration used: Repository UI

Review profile: CHILL

Plan: Pro

Run ID: 99d67f8a-f4ab-449a-a361-c97dd82eac91

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

Use the checkbox below for a quick retry:

• 🔍 Trigger review

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title accurately summarizes the main change: fixing filter behavior between sm and md breakpoints, matching the core issue and solution described in the PR objectives.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch DX-1449-examples-filtering-on-small-screens

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands.}

[rainbowFi]

Confirm that this fixes the issue on my browser window (I haven't reviewed the code though!)