Environment

OS: Windows 10 (also reproducible on macOS); Node version: v20.19.0; Browser: Google Chrome

Steps to Reproduce

1. Navigate to the Motia homepage (or run the docs package locally)
2. Scroll down to the section titled "Write AI Workflows like You Write APIs"
3. Open your browser's developer tools and enable responsive/device mode
4. Set the viewport width to a tablet size, for example, iPad Mini at 768px
5. Observe the row of four agent buttons ("Trello Agent", "Gmail Manager Agent", etc.)

Expected Behavior

I expected all four buttons in the row to have a uniform, consistent height. The text inside each button should ideally stay on a single line, preserving the clean alignment of the row.

Actual Behavior

On tablet screen sizes, the agent buttons have inconsistent heights. The button text for longer agent names (like "Gmail Manager Agent" and "RAG Document Agent") wraps onto a second line. This text wrapping forces those buttons to become taller than the ones with shorter, single-line names ("Trello Agent").

This results in a misaligned and visually jarring layout where the buttons are not uniform.

Relevant Logs/Console Output

Screenshots

Here's what it looks like:

Motia Version

No response

Additional Context

I took a look into the codebase and it seems the root cause is the container in packages/docs/components/TabSelector.tsx. On tablet viewports, there isn't quite enough space for all the buttons to fit comfortably in a single row. The flex container causes the items to shrink, which leads to the text wrapping.

I've confirmed that making the container horizontally scrollable on the tablet screen size (just like it is on mobile) resolves the issue by giving the buttons enough space to prevent the text from wrapping. I've worked out the fix and will submit a PR shortly.