[fix] Keep the Templates strip header intact at narrow widths by ashrafchowdury · Pull Request #6325 · Agenta-AI/agenta

ashrafchowdury · 2026-08-27T13:59:42Z

Context

Open the agent playground with the config panel expanded, or just narrow the window, and the Templates strip header fell apart. The header was a single flex row with no shrink control, so the category tabs (All 28, Engineering 10, Support 4, and the rest) overflowed their box and pushed into the pager cluster. The "1–2 of 28" counter wrapped onto two lines and the 32px arrow buttons were squeezed into rectangles.

Changes

The tabs now take the leftover width and scroll inside it instead of overflowing. Each tab keeps its own width (shrink-0 whitespace-nowrap), and a mask fades the right edge so a clipped tab reads as "there is more" rather than a cut-off word. When nothing overflows, the fade sits over empty space and is invisible.

Everything else in the row holds its size: the "Templates" label and the counter/arrows cluster are shrink-0, and the counter is whitespace-nowrap.

The arrow and options buttons were a hand-rolled 32px square <button> with their own border, radius, and disabled colors. They are now the shared Button from @agenta/ui/ui at size="icon-sm", so they size off the control-sm scale and get the standard disabled treatment. The enabled arrows keep their primary border and glyph through a border-primary text-primary class; the atStart/atEnd colour branches are gone because the primitive's own disabled: styles cover that state. The options button uses variant="ghost".

Note for reviewers: the buttons are 24px now, not 32px, since that is what the design system's small icon button is.

Tests

Verified in the running EE app at 900px viewport with the config panel open: the header stays a single 32px row, the arrow buttons measure exactly 32x32 (measured before the shadcn swap), and the counter stays on one line. Measured with getBoundingClientRect rather than eyeballing the screenshot.
eslint and tsc --noEmit clean for the file.
The button swap itself was not re-checked in the browser.

What to QA

Open any agent in the playground and start a new chat so the Templates strip appears. Narrow the window or expand the config panel. The header stays on one line: no wrapped counter, no squashed arrows, and the tabs fade out at the right edge instead of being cut mid-word.
Scroll the tab row sideways at a narrow width and pick a category. The card row and the counter update as before.
Page the strip with the arrows at both widths. Disabled arrows at the start and end of the range look disabled, not just dim.
Regression: the home page templates grid uses the same header. Check that its label, tabs, counter, and arrows still line up, and that the "..." hide menu on the playground strip still opens.

The header was one flex row with no shrink control, so the category tabs overflowed and squeezed the pager: the counter wrapped to two lines and the arrow buttons were compressed out of square. The tabs now take the leftover width and scroll inside it (masked at the overflow edge), and the label, counter, and button cluster hold their size. The arrow and menu buttons move to the shared @agenta/ui small icon button, so they size and disable like every other control instead of hand-rolled chrome.

vercel · 2026-08-27T13:59:49Z

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
agenta-documentation	Ready	Preview	Aug 27, 2026 2:13pm

coderabbitai · 2026-08-27T14:00:43Z

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Repository YAML (base), Organization UI (inherited)

Review profile: CHILL

Plan: Pro Plus

Run ID: 809526e3-9eb0-41ee-a1ae-0675b73ae150

📥 Commits

Reviewing files that changed from the base of the PR and between 6ced041 and 5a0a33e.

📒 Files selected for processing (1)

web/oss/src/components/TemplateStrip/index.tsx

🚧 Files skipped from review as they are similar to previous changes (1)

web/oss/src/components/TemplateStrip/index.tsx

Included review availability: Your plan provides up to 8 included reviews per hour; 6 remain after this review.

📝 Walkthrough

Summary by CodeRabbit

UI Improvements
- Improved header and tab layout behavior on narrow screens.
- Added scrolling with an overflow fade effect for tab navigation.
- Prevented pager controls and tab labels from being compressed or wrapped.
- Standardized button styling across header, pager, and menu controls.
- Improved disabled-state handling for pager arrows.

Walkthrough

TemplateStrip now uses the shared Ant Design Button. Category tabs scroll horizontally within the available header space. Pager controls remain fixed, and control styling uses the updated Button variants.

Changes

Template strip UI

Layer / File(s)	Summary
Shared button contract `web/oss/src/components/TemplateStrip/index.tsx`	`HeaderButton` now uses the shared `Button` with `variant="outline"` and `size="icon-sm"`. Its props use `ButtonProps`. Pager buttons retain primary styling, and the options button uses the ghost variant.
Responsive strip layout `web/oss/src/components/TemplateStrip/index.tsx`	The tab area scrolls horizontally without wrapping or shrinking tabs. The pager cluster remains fixed within the header.

Estimated code review effort: 2 (Simple) | ~10 minutes

Merge Risk: ⚪ Minimal · up to 5a0a3

This localized UI change preserves the Templates header layout and interaction behavior, with no actionable merge-blocking risk remaining after normal checks and review.

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title clearly and concisely identifies the main change: keeping the Templates strip header intact at narrow widths.
Description check	✅ Passed	The description directly explains the narrow-width layout issue, the sizing and scrolling changes, the shared button updates, and the testing and QA scope.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check. Docstring coverage is scoped to functions touched by this diff. Analyzed 0 functions across 1…
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.

Full details: Docstring Coverage

Explanation

No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check. Docstring coverage is scoped to functions touched by this diff. Analyzed 0 functions across 1 files.

✨ Finishing Touches

📝 Generate docstrings

Create stacked PR
Commit on current branch

🧪 Generate unit tests (beta)

Create PR with unit tests
Commit unit tests in branch fix/template-strip-header-responsive

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

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

coderabbitai

Actionable comments posted: 2

ℹ️ Review info

⚙️ Run configuration

Configuration used: Repository YAML (base), Organization UI (inherited)

Review profile: CHILL

Plan: Pro Plus

Run ID: fda08e4e-a60a-4da1-8393-380fb0b3065f

📥 Commits

Reviewing files that changed from the base of the PR and between 83ae42a and 6ced041.

📒 Files selected for processing (1)

web/oss/src/components/TemplateStrip/index.tsx

Included review availability: Your plan provides up to 8 included reviews per hour; 7 remain after this review.

github-actions · 2026-08-27T14:23:34Z

Railway Preview Environment


Preview URL	https://gateway-pr-6325.up.railway.app/w
Project	`agenta-oss-clone-spike`
Image tag	`pr-6325-0bc1a62`
Status	Deployed
Railway logs	Open logs
Workflow logs	View workflow run
Updated at 2026-08-27T14:23:33.599Z

dosubot Bot added the size:M This PR changes 30-99 lines, ignoring generated files. label Aug 27, 2026

dosubot Bot added frontend ui labels Aug 27, 2026

vercel Bot deployed to Preview August 27, 2026 14:00 View deployment

coderabbitai Bot reviewed Aug 27, 2026

View reviewed changes

Comment thread web/oss/src/components/TemplateStrip/index.tsx Outdated

Comment thread web/oss/src/components/TemplateStrip/index.tsx Outdated

chore(frontend): tighten two doc comments per review

5a0a33e

vercel Bot deployed to Preview August 27, 2026 14:13 View deployment

Navigation Menu

Uh oh!

[fix] Keep the Templates strip header intact at narrow widths - #6325

[fix] Keep the Templates strip header intact at narrow widths#6325
ashrafchowdury wants to merge 2 commits into
mainfrom
fix/template-strip-header-responsive

ashrafchowdury commented Aug 27, 2026

Uh oh!

vercel Bot commented Aug 27, 2026 •

edited

Loading

Uh oh!

coderabbitai Bot commented Aug 27, 2026 •

edited

Loading

Summary by CodeRabbit

Walkthrough

Changes

Uh oh!

coderabbitai Bot left a comment

Uh oh!

Uh oh!

Uh oh!

github-actions Bot commented Aug 27, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

Uh oh!

Conversation

ashrafchowdury commented Aug 27, 2026

Context

Changes

Tests

What to QA

Uh oh!

vercel Bot commented Aug 27, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

coderabbitai Bot commented Aug 27, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary by CodeRabbit

Walkthrough

Changes

Uh oh!

coderabbitai Bot left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

github-actions Bot commented Aug 27, 2026

Railway Preview Environment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

vercel Bot commented Aug 27, 2026 •

edited

Loading

coderabbitai Bot commented Aug 27, 2026 •

edited

Loading