[jhauga]

Pull Request Checklist

• I have read and followed the CONTRIBUTING.md guidelines.
• I have read and followed the Guidance for submissions involving paid services.
• My contribution adds a new instruction, prompt, agent, skill, workflow, or canvas extension file in the correct directory.
• The file follows the required naming convention.
• The content is clearly structured and follows the example format.
• I have tested my instructions, prompt, agent, skill, workflow, or canvas extension with GitHub Copilot.
  • • Website feature
• I have run npm start and verified that README.md is up to date.
• I am targeting the main branch for this pull request.

---

Description

Demo

Note

Minified version of site. Enough to get the gist across

• Compressed site build of feature results (ctrl + click) at support repo.
• ctrl + click instructions resource, then pick 50 from Resource page size and scroll past the filters.

More screenshots from the same run, in the support branch's resize-col-harness/:

• shot-plugins-end.png: Plugins at 50 per page, page 1 of 4. The last wide row holds two cards, centered under the row above.
• shot-agents-end.png: Agents at 50 per page, page 1 of 5. One card in the last wide row, under the middle column.
• shot-instructions-junction-light.png: the junction in light mode.
• shot-instructions-end.png: the last wide rows, then pagination.
• shot-skills-6.png: Skills at the default 6, unchanged: no wide grid.
• shot-instructions-phone.png: a 390px phone, one column as before.

Widen catalog grids below the filter sidebar

On the Agents, Extensions, Instructions, Plugins, and Skills catalogs and the Learning Hub's Articles list, pages of 20, 50, or 100 no longer stay in two columns all the way down. Rows that start beside the filter sidebar keep their two columns. Once a row would start below the end of the filter list, the rest continue in a grid that spans the whole catalog frame, rail included: three columns in the 1280px frame, and two below a 1408px window. So a page whose filter list is short widens sooner. The default 6 per page is unchanged.

If that wide grid's last row is short on any page but the last, it is centered: one card sits under the middle column, and two cards shift half a column, so the middle card's sides above meet the middle of their top edges. The last page keeps its last row at the left, to mark the end of the list. The order stays A-Z across each row. Phones and tablets are unchanged, because the sidebar stacks above the cards there.

• A new useCatalogSplit hook measures where the filter list ends and splits the page's cards into those beside it and those below. It measures in a layout effect after every render (page, page size, sort, filter, and Show more changes) and on a ResizeObserver for the side grid and the filter groups, grows or cuts one whole row at a time, and keeps the split steady when a change would only undo the previous one (the vertical scrollbar can otherwise flip it back and forth). A card that changes grids remounts, so when a resize or zoom moves a focused card, the hook puts focus back on the same control.
• Each page's card markup moves, unchanged, into a local render function that both grids use, so git diff -w --color-moved shows it as a move.
• The wide grid renders inside <section id="catalog">, after the filters and the side grid, so pagination focus and the Section's 1280px cap cover it. It reuses .gridFrame for its top gridline and the dark-mode Install menu hook, takes .catalog's gutter inset below 120rem, and draws its right edge beside a last row that is not full.
• The centering is CSS only: :nth-child selectors pick out a short last row, a container query on the wide frame tells three columns from two, and relative positioning shifts the cards (a transform would make each shifted card a stacking context around its Install menu).
• page-width-regression.mjs now lists the wide frame in its frame selector and also loads the six catalogs at 50 per page (6 per page never splits), so the 1280px frame rule and its overflow check cover the wide grid.

Testing

• npm run --prefix website build passes (1,572 pages).
• npm run --prefix website a11y: 24 routes, dark and light, 0 violations (at the default page size, which does not split).
• The website regression scripts in website/scripts pass: page-width (now also at 50 per page, where it checks the wide frame), plugin-install, reading-catalog, resource-card-layout, and site-refinement.
• Playwright checks on all six pages (766 of 766): no split at 6 per page; at 20, 50, and 100 per page every side row starts above the end of the filter list and the side grid reaches it; a short last wide row is centered on pages before the last (one and two cards both seen) and left-aligned on the last page; frame edges from 1000 to 2560px; the wide frame starting on the catalog's bottom edge with one gridline there; no horizontal overflow; the stacked layout at 1000px with the same card order; Show more and Show less, a filter and Clear all, page 2; focus kept on the same link or button when a resize moves its card to the other grid, in both directions; and no console errors.
• tsc --noEmit shows no new errors (the same 30 as main).

---

Type of Contribution

• New instruction file.
• New prompt file.
• New agent file.
• New plugin.
• New skill file.
• New agentic workflow.
• New canvas extension.
• Update to existing instruction, prompt, agent, plugin, skill, workflow, or canvas extension.
• Other (please specify): Website feature request

---

By submitting this pull request, I confirm that my contribution abides by the Code of Conduct and will be licensed under the MIT License.

🤖 Generated with Claude Code

[github-actions]

🚦 Submission status: 👀 Ready for review

Risk tier: merge-risk:medium — New or substantially changed resource without privileged execution
Required to merge: passing submission-gate checks plus 1 approval from reviewers with write access.

Why this tier

• Adds 1 file(s), e.g. website/src/components/brand/useCatalogSplit.ts
• Changes 1627 lines (low-risk limit is 40)

Automated checks

Check	Status	Details
Line endings	✅ Passed	Passed · logs
Spelling	✅ Passed	Passed · logs
Contributor reputation	✅ Passed	Passed · logs
Duplicate resource scan	✅ Passed	Passed · logs
PR quality signal	⏭️ Skipped	Skipped by its workflow · logs

Review

• Approvals: 0/1
• Assigned reviewer: not assigned yet — comment /request-review to ask for one
• Review target date: not set
• Still needed: 1 more approval(s)
• No staffed reviewer pool owns these files yet; any reviewer with write access counts as the domain reviewer.

Commands

Command	Who	What it does
/rerun-checks	PR author, maintainers	Re-runs failed or incomplete checks and re-evaluates this gate
/request-review	PR author, maintainers	Asks the review rotation to assign a reviewer (adds needs-reviewer)

_{Updated for 5fe942d · gate run · This comment is maintained automatically — see submission gate docs.}

[Copilot]

🟡 Changes recommended

The column-count logic mistakes a single filtered card for a one-column grid after the filter is cleared, leaving a side-column slot empty and moving remaining cards into the wide grid.

1 open issue

• Measure grid capacity from dimensions instead of mounted card count · New

What changed in this PR

This PR widens website catalog grids below the filter sidebar, making better use of desktop space on larger result pages while preserving the default six-item and stacked layouts.

Changes:

• Adds a shared measurement hook to split cards between side and full-width grids and restore focus when cards move.
• Updates six catalogs and their styles, including centering incomplete wide rows before the last page.
• Extends page-width regression checks to cover split grids at 50 items per page.

File	Description
website/​src/​components/​brand/​useCatalogSplit.ts	Adds split measurement, resize handling, and focus restoration.
website/​src/​components/​brand/​styles/​skills.module.css	Styles wide skill rows and their borders.
website/​src/​components/​brand/​styles/​plugins.module.css	Styles wide plugin rows and their borders.
website/​src/​components/​brand/​styles/​learning-hub-copilot-app.module.css	Styles wide article rows and their borders.
website/​src/​components/​brand/​styles/​instructions.module.css	Styles wide instruction rows and their borders.
website/​src/​components/​brand/​styles/​extensions.module.css	Styles wide extension rows and their borders.
website/​src/​components/​brand/​styles/​agents.module.css	Styles wide agent rows and their borders.
website/​src/​components/​brand/​SkillsCatalog.tsx	Integrates split grids with shared skill-card rendering.
website/​src/​components/​brand/​PluginsCatalog.tsx	Integrates split grids with shared plugin-card rendering.
website/​src/​components/​brand/​LearningHubIndex.tsx	Integrates split grids into the Articles list.
website/​src/​components/​brand/​InstructionsCatalog.tsx	Integrates split grids with shared instruction-card rendering.
website/​src/​components/​brand/​ExtensionsCatalog.tsx	Integrates split grids with shared extension-card rendering.
website/​src/​components/​brand/​AgentsCatalog.tsx	Integrates split grids with shared agent-card rendering.
website/​scripts/​page-width-regression.mjs	Checks wide frames, alignment, and overflow at larger page sizes.

_{Review effort: Balanced}

[Copilot]

🟢 Approval recommended

No active review issues remain for the catalog layout changes.

No open issues 🎉

1 resolved since last review

• Measure grid capacity from dimensions instead of mounted card count

_{Review effort: Balanced}

[Copilot]

🟢 Approval recommended

The review reports no active issues with the catalog layout changes.

No open issues 🎉

_{Review effort: Balanced}

[aaronpowell]

We won't be accepting this PR - the change to go from a two to three column span results in a jarring UI layout where items are no longer aligned in the consistent columns. It also deviates a bit too far from the design from GitHub brand.