From af4985f8af7307feafe3fedec150bc30bdc1eb74 Mon Sep 17 00:00:00 2001
From: John Haugabook <johnhaugabook@gmail.com>
Date: Tue, 27 Oct 2026 20:04:09 -0400
Subject: [PATCH 1/6] website-feature: widen catalog grids below the filter
 sidebar

Rows that start beside the filter sidebar keep their two columns. Once a
row would start below the end of the filter list, the remaining cards
continue in a grid across the whole catalog frame (three columns in the
1280px frame). Applies to the five resource catalogs and the Learning Hub.

- useCatalogSplit measures where the filter list ends and splits the cards
- each page's card markup moves into a render function both grids share
- wide grid CSS in the six modules
- page-width-regression.mjs includes the new frame in its frame rule

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 website/scripts/page-width-regression.mjs     |   1 +
 .../src/components/brand/AgentsCatalog.tsx    | 151 ++++++-----
 .../components/brand/ExtensionsCatalog.tsx    | 235 ++++++++++--------
 .../components/brand/InstructionsCatalog.tsx  | 163 +++++++-----
 .../src/components/brand/LearningHubIndex.tsx | 105 +++++---
 .../src/components/brand/PluginsCatalog.tsx   | 135 ++++++----
 .../src/components/brand/SkillsCatalog.tsx    | 129 ++++++----
 .../components/brand/styles/agents.module.css |  40 +++
 .../brand/styles/extensions.module.css        |  40 +++
 .../brand/styles/instructions.module.css      |  40 +++
 .../learning-hub-copilot-app.module.css       |  40 +++
 .../brand/styles/plugins.module.css           |  40 +++
 .../components/brand/styles/skills.module.css |  40 +++
 .../src/components/brand/useCatalogSplit.ts   |  75 ++++++
 14 files changed, 868 insertions(+), 366 deletions(-)
 create mode 100644 website/src/components/brand/useCatalogSplit.ts

diff --git a/website/scripts/page-width-regression.mjs b/website/scripts/page-width-regression.mjs
index 861ba58a6e..120cb20fba 100644
--- a/website/scripts/page-width-regression.mjs
+++ b/website/scripts/page-width-regression.mjs
@@ -15,6 +15,7 @@ const frameSelector = [
   '[class*="sectionInner"]', '[class*="_catalog_"]', '[class*="catalogHeader"]',
   '[class*="recommendedInner"]', '[class*="ctaFrameInner"]',
   '#resources [class*="Grid-module__Grid___"]',
+  '[class*="_wideFrame_"]',
 ].join(", ");
 const browser = await chromium.launch();
 
diff --git a/website/src/components/brand/AgentsCatalog.tsx b/website/src/components/brand/AgentsCatalog.tsx
index 04c1871305..88ea916474 100644
--- a/website/src/components/brand/AgentsCatalog.tsx
+++ b/website/src/components/brand/AgentsCatalog.tsx
@@ -31,6 +31,7 @@ import { daysSince, toggleValue, updatedBuckets, updatedBucketOf } from "./catal
 import { pageHref } from "./pageHref";
 import { downloadFile } from "./resourceActions";
 import { useCatalogPageFocus } from "./useCatalogPageFocus";
+import { useCatalogSplit } from "./useCatalogSplit";
 import type { SearchItem } from "./searchIndex";
 import styles from "./styles/agents.module.css";
 
@@ -201,6 +202,69 @@ export function AgentsCatalog({
   const page = Math.min(currentPage, pageCount);
   const visibleAgents = sortedAgents.slice((page - 1) * pageSize, page * pageSize);
 
+  const { filterNavRef, sideGridRef, beside, below } =
+    useCatalogSplit(visibleAgents);
+
+  const renderAgentCard = (agent: AgentItem) => (
+    <Box className={clsx(styles.item, styles.itemHover)}>
+      <Card
+        href={agentDetailHref(agent)}
+        fullWidth
+        ctaVariant="none"
+        backgroundColor="none"
+        className={styles.card}
+      >
+        <Card.Heading as="h2">{agent.title}</Card.Heading>
+        <Card.Description>
+          <span className={styles.cardDescText}>
+            {agent.description}
+          </span>
+        </Card.Description>
+      </Card>
+      <div className={styles.cardActions}>
+        <ActionMenu mode="split-button" menuAlignment="start">
+          <ActionMenu.Button
+            as="a"
+            href={installUrl(agent)}
+            variant="primary"
+          >
+            Install
+          </ActionMenu.Button>
+          <ActionMenu.Overlay
+            aria-label={`Install ${agent.title} to your editor`}
+          >
+            <ActionMenu.Item as="a" href={installUrl(agent, false)}>
+              VS Code
+            </ActionMenu.Item>
+            <ActionMenu.Item as="a" href={installUrl(agent, true)}>
+              VS Code Insiders
+            </ActionMenu.Item>
+          </ActionMenu.Overlay>
+        </ActionMenu>
+        <Button
+          as="button"
+          variant="secondary"
+          onClick={() =>
+            void downloadFile(downloadUrl(agent), agent.filename)
+          }
+          aria-label={`Download ${agent.title} agent file`}
+          className={styles.iconButton}
+        >
+          <DownloadIcon />
+        </Button>
+        <Button
+          as="a"
+          href={agentSourceUrl(agent)}
+          variant="secondary"
+          aria-label={`View ${agent.title} agent on GitHub`}
+          className={styles.iconButton}
+        >
+          <MarkGithubIcon />
+        </Button>
+      </div>
+    </Box>
+  );
+
   return (
     <PageShell
       styles={styles}
@@ -230,7 +294,11 @@ export function AgentsCatalog({
         paddingBlockEnd="none"
       >
         <Box className={styles.catalog}>
-          <aside className={styles.filterNav} aria-label="Filter agents">
+          <aside
+            ref={filterNavRef}
+            className={styles.filterNav}
+            aria-label="Filter agents"
+          >
             <button
               type="button"
               className={styles.filterToggle}
@@ -337,74 +405,22 @@ export function AgentsCatalog({
             <Box className={styles.gridFrame} data-mode={colorMode}>
               <Box className={styles.gridContent}>
                 <Grid
-                  className={styles.threeUp}
+                  ref={sideGridRef}
+                  className={clsx(
+                    styles.threeUp,
+                    below.length > 0 && styles.threeUpSplit,
+                  )}
                   columnGap="none"
                   rowGap="none"
                   enableGutters={false}
                 >
-                  {visibleAgents.map((agent) => (
+                  {beside.map((agent) => (
                     <Grid.Column
                       key={agent.id}
                       span={{ xsmall: 12, medium: 6, large: 6 }}
                       className={styles.col}
                     >
-                      <Box className={clsx(styles.item, styles.itemHover)}>
-                        <Card
-                          href={agentDetailHref(agent)}
-                          fullWidth
-                          ctaVariant="none"
-                          backgroundColor="none"
-                          className={styles.card}
-                        >
-                          <Card.Heading as="h2">{agent.title}</Card.Heading>
-                          <Card.Description>
-                            <span className={styles.cardDescText}>
-                              {agent.description}
-                            </span>
-                          </Card.Description>
-                        </Card>
-                        <div className={styles.cardActions}>
-                          <ActionMenu mode="split-button" menuAlignment="start">
-                            <ActionMenu.Button
-                              as="a"
-                              href={installUrl(agent)}
-                              variant="primary"
-                            >
-                              Install
-                            </ActionMenu.Button>
-                            <ActionMenu.Overlay
-                              aria-label={`Install ${agent.title} to your editor`}
-                            >
-                              <ActionMenu.Item as="a" href={installUrl(agent, false)}>
-                                VS Code
-                              </ActionMenu.Item>
-                              <ActionMenu.Item as="a" href={installUrl(agent, true)}>
-                                VS Code Insiders
-                              </ActionMenu.Item>
-                            </ActionMenu.Overlay>
-                          </ActionMenu>
-                          <Button
-                            as="button"
-                            variant="secondary"
-                            onClick={() =>
-                              void downloadFile(downloadUrl(agent), agent.filename)
-                            }
-                            aria-label={`Download ${agent.title} agent file`}
-                            className={styles.iconButton}
-                          >
-                            <DownloadIcon />
-                          </Button>
-                          <Button
-                            as="a"
-                            href={agentSourceUrl(agent)}
-                            variant="secondary"
-                            aria-label={`View ${agent.title} agent on GitHub`}
-                            className={styles.iconButton}
-                          >
-                            <MarkGithubIcon />
-                          </Button>
-                        </div>
-                      </Box>
+                      {renderAgentCard(agent)}
                     </Grid.Column>
                   ))}
                 </Grid>
@@ -422,6 +438,21 @@ export function AgentsCatalog({
         </Box>
       </Section>
 
+      {below.length > 0 ? (
+        <Box
+          className={clsx(styles.gridFrame, styles.wideFrame)}
+          data-mode={colorMode}
+        >
+          <div className={styles.wideGrid}>
+            {below.map((agent) => (
+              <div key={agent.id} className={styles.col}>
+                {renderAgentCard(agent)}
+              </div>
+            ))}
+          </div>
+        </Box>
+      ) : null}
+
       <div className={styles.rule} aria-hidden="true" />
 
       <Box className={styles.paginationRow}>
diff --git a/website/src/components/brand/ExtensionsCatalog.tsx b/website/src/components/brand/ExtensionsCatalog.tsx
index b2a1457f22..9867957de1 100644
--- a/website/src/components/brand/ExtensionsCatalog.tsx
+++ b/website/src/components/brand/ExtensionsCatalog.tsx
@@ -43,6 +43,7 @@ import { pageHref } from "./pageHref";
 import type { SearchItem } from "./searchIndex";
 import styles from "./styles/extensions.module.css";
 import { useCatalogPageFocus } from "./useCatalogPageFocus";
+import { useCatalogSplit } from "./useCatalogSplit";
 import { buildVSCodePluginInstallUrl } from "../../lib/plugin-install";
 
 const CONTRIBUTE_URL =
@@ -249,6 +250,104 @@ export function ExtensionsCatalog({
     page * pageSize,
   );
 
+  const { filterNavRef, sideGridRef, beside, below } =
+    useCatalogSplit(visibleExtensions);
+
+  const renderExtensionCard = (ext: ExtensionItem, index: number) => {
+    const detailHref = pageHref(`extension/${ext.id}`);
+    const sourceUrl = extensionSourceUrl(ext);
+    const installUrl = appInstallUrl(ext);
+    const vscodeInstallUrl = ext.pluginName
+      ? buildVSCodePluginInstallUrl(ext.pluginName)
+      : null;
+    const safeImageUrl = httpUrl(ext.imageUrl);
+    return (
+      <Box className={clsx(styles.item, styles.itemHover)}>
+        {safeImageUrl ? (
+          <a
+            href={detailHref}
+            className={styles.cardMedia}
+            aria-label={`View ${ext.name}`}
+            tabIndex={-1}
+          >
+            <img
+              className={styles.cardImage}
+              src={safeImageUrl}
+              alt={`${ext.name} preview`}
+              loading={index === 0 ? "eager" : "lazy"}
+              decoding="async"
+              width={1280}
+              height={720}
+            />
+          </a>
+        ) : null}
+        <Card
+          href={detailHref}
+          fullWidth
+          ctaVariant="none"
+          backgroundColor="none"
+          className={styles.card}
+        >
+          <Card.Heading as="h2">{ext.name}</Card.Heading>
+          <Card.Description>
+            <span className={styles.cardDescText}>
+              {ext.description}
+            </span>
+          </Card.Description>
+        </Card>
+        <div className={styles.cardActions}>
+          {installUrl ? (
+            <Button
+              as="a"
+              href={installUrl}
+              variant="primary"
+              hasArrow={false}
+            >
+              Open in Copilot app
+            </Button>
+          ) : null}
+          {vscodeInstallUrl ? (
+            <Button
+              as="a"
+              href={vscodeInstallUrl}
+              variant="secondary"
+              hasArrow={false}
+              aria-label={`Install in VS Code: ${ext.name}`}
+            >
+              Install in VS Code
+            </Button>
+          ) : null}
+          {ext.installCommand ? (
+            <CopyInstallButton
+              ext={ext}
+              command={ext.installCommand}
+              onCopied={showCopiedToast}
+            />
+          ) : null}
+          {sourceUrl ? (
+            <Button
+              as="a"
+              href={sourceUrl}
+              variant="secondary"
+              aria-label={`View ${ext.name} on GitHub`}
+              className={styles.iconButton}
+            >
+              <MarkGithubIcon />
+            </Button>
+          ) : null}
+        </div>
+        {ext.author?.name ? (
+          <Text as="p" size="100" className={styles.cardBadge}>
+            <TypingText
+              text={ext.author.name}
+              className={styles.cardBadgeName}
+            />
+          </Text>
+        ) : null}
+      </Box>
+    );
+  };
+
   return (
     <PageShell
       styles={styles}
@@ -279,7 +378,11 @@ export function ExtensionsCatalog({
         paddingBlockEnd="none"
       >
         <Box className={styles.catalog}>
-          <aside className={styles.filterNav} aria-label="Filter extensions">
+          <aside
+            ref={filterNavRef}
+            className={styles.filterNav}
+            aria-label="Filter extensions"
+          >
             <button
               type="button"
               className={styles.filterToggle}
@@ -386,111 +489,24 @@ export function ExtensionsCatalog({
             <Box className={styles.gridFrame} data-mode={colorMode}>
               <Box className={styles.gridContent}>
                 <Grid
-                  className={styles.threeUp}
+                  ref={sideGridRef}
+                  className={clsx(
+                    styles.threeUp,
+                    below.length > 0 && styles.threeUpSplit,
+                  )}
                   columnGap="none"
                   rowGap="none"
                   enableGutters={false}
                 >
-                  {visibleExtensions.map((ext, index) => {
-                    const detailHref = pageHref(`extension/${ext.id}`);
-                    const sourceUrl = extensionSourceUrl(ext);
-                    const installUrl = appInstallUrl(ext);
-                    const vscodeInstallUrl = ext.pluginName
-                      ? buildVSCodePluginInstallUrl(ext.pluginName)
-                      : null;
-                    const safeImageUrl = httpUrl(ext.imageUrl);
-                    return (
-                      <Grid.Column
-                        key={ext.id}
-                        span={{ xsmall: 12, medium: 6, large: 6 }}
-                        className={styles.col}
-                      >
-                        <Box className={clsx(styles.item, styles.itemHover)}>
-                          {safeImageUrl ? (
-                            <a
-                              href={detailHref}
-                              className={styles.cardMedia}
-                              aria-label={`View ${ext.name}`}
-                              tabIndex={-1}
-                            >
-                              <img
-                                className={styles.cardImage}
-                                src={safeImageUrl}
-                                alt={`${ext.name} preview`}
-                                loading={index === 0 ? "eager" : "lazy"}
-                                decoding="async"
-                                width={1280}
-                                height={720}
-                              />
-                            </a>
-                          ) : null}
-                          <Card
-                            href={detailHref}
-                            fullWidth
-                            ctaVariant="none"
-                            backgroundColor="none"
-                            className={styles.card}
-                          >
-                            <Card.Heading as="h2">{ext.name}</Card.Heading>
-                            <Card.Description>
-                              <span className={styles.cardDescText}>
-                                {ext.description}
-                              </span>
-                            </Card.Description>
-                          </Card>
-                          <div className={styles.cardActions}>
-                            {installUrl ? (
-                              <Button
-                                as="a"
-                                href={installUrl}
-                                variant="primary"
-                                hasArrow={false}
-                              >
-                                Open in Copilot app
-                              </Button>
-                            ) : null}
-                            {vscodeInstallUrl ? (
-                              <Button
-                                as="a"
-                                href={vscodeInstallUrl}
-                                variant="secondary"
-                                hasArrow={false}
-                                aria-label={`Install in VS Code: ${ext.name}`}
-                              >
-                                Install in VS Code
-                              </Button>
-                            ) : null}
-                            {ext.installCommand ? (
-                              <CopyInstallButton
-                                ext={ext}
-                                command={ext.installCommand}
-                                onCopied={showCopiedToast}
-                              />
-                            ) : null}
-                            {sourceUrl ? (
-                              <Button
-                                as="a"
-                                href={sourceUrl}
-                                variant="secondary"
-                                aria-label={`View ${ext.name} on GitHub`}
-                                className={styles.iconButton}
-                              >
-                                <MarkGithubIcon />
-                              </Button>
-                            ) : null}
-                          </div>
-                          {ext.author?.name ? (
-                            <Text as="p" size="100" className={styles.cardBadge}>
-                              <TypingText
-                                text={ext.author.name}
-                                className={styles.cardBadgeName}
-                              />
-                            </Text>
-                          ) : null}
-                        </Box>
-                      </Grid.Column>
-                    );
-                  })}
+                  {beside.map((ext, index) => (
+                    <Grid.Column
+                      key={ext.id}
+                      span={{ xsmall: 12, medium: 6, large: 6 }}
+                      className={styles.col}
+                    >
+                      {renderExtensionCard(ext, index)}
+                    </Grid.Column>
+                  ))}
                 </Grid>
               </Box>
             </Box>
@@ -506,6 +522,21 @@ export function ExtensionsCatalog({
         </Box>
       </Section>
 
+      {below.length > 0 ? (
+        <Box
+          className={clsx(styles.gridFrame, styles.wideFrame)}
+          data-mode={colorMode}
+        >
+          <div className={styles.wideGrid}>
+            {below.map((ext, index) => (
+              <div key={ext.id} className={styles.col}>
+                {renderExtensionCard(ext, beside.length + index)}
+              </div>
+            ))}
+          </div>
+        </Box>
+      ) : null}
+
       <div className={styles.rule} aria-hidden="true" />
 
       <Box className={styles.paginationRow}>
diff --git a/website/src/components/brand/InstructionsCatalog.tsx b/website/src/components/brand/InstructionsCatalog.tsx
index 4d64bd061f..ec17bae920 100644
--- a/website/src/components/brand/InstructionsCatalog.tsx
+++ b/website/src/components/brand/InstructionsCatalog.tsx
@@ -21,6 +21,7 @@ import { useMemo, useState } from "react";
 import { PageShell } from "./PageShell";
 import { InstructionsIcon } from "./InstructionsIcon";
 import { useCatalogPageFocus } from "./useCatalogPageFocus";
+import { useCatalogSplit } from "./useCatalogSplit";
 import { CatalogSortControl, CATALOG_SORT_OPTIONS } from "./CatalogSortControl";
 import {
   CatalogResourceSizeControl,
@@ -208,6 +209,75 @@ export function InstructionsCatalog({
     page * pageSize,
   );
 
+  const { filterNavRef, sideGridRef, beside, below } =
+    useCatalogSplit(visibleInstructions);
+
+  const renderInstructionCard = (item: InstructionItem) => (
+    <Box className={clsx(styles.item, styles.itemHover)}>
+      <Card
+        href={pageHref(`instruction/${item.id}`)}
+        fullWidth
+        ctaVariant="none"
+        backgroundColor="none"
+        className={styles.card}
+      >
+        <Card.Heading as="h2">{item.title}</Card.Heading>
+        <Card.Description>
+          <span className={styles.cardDescText}>
+            {item.description}
+          </span>
+        </Card.Description>
+      </Card>
+      <div className={styles.cardActions}>
+        <ActionMenu mode="split-button" menuAlignment="start">
+          <ActionMenu.Button
+            as="a"
+            href={installUrl(item)}
+            variant="primary"
+          >
+            Install
+          </ActionMenu.Button>
+          <ActionMenu.Overlay
+            aria-label={`Install ${item.title} to your editor`}
+          >
+            <ActionMenu.Item
+              as="a"
+              href={installUrl(item, false)}
+            >
+              VS Code
+            </ActionMenu.Item>
+            <ActionMenu.Item
+              as="a"
+              href={installUrl(item, true)}
+            >
+              VS Code Insiders
+            </ActionMenu.Item>
+          </ActionMenu.Overlay>
+        </ActionMenu>
+        <Button
+          as="button"
+          variant="secondary"
+          onClick={() =>
+            void downloadFile(downloadUrl(item), item.filename)
+          }
+          aria-label={`Download ${item.title} instruction file`}
+          className={styles.iconButton}
+        >
+          <DownloadIcon />
+        </Button>
+        <Button
+          as="a"
+          href={instructionSourceUrl(item)}
+          variant="secondary"
+          aria-label={`View ${item.title} instruction on GitHub`}
+          className={styles.iconButton}
+        >
+          <MarkGithubIcon />
+        </Button>
+      </div>
+    </Box>
+  );
+
   return (
     <PageShell
       styles={styles}
@@ -231,7 +301,11 @@ export function InstructionsCatalog({
 
       <Section id="catalog" tabIndex={-1} paddingBlockStart="none" paddingBlockEnd="none">
         <Box className={styles.catalog}>
-          <aside className={styles.filterNav} aria-label="Filter instructions">
+          <aside
+            ref={filterNavRef}
+            className={styles.filterNav}
+            aria-label="Filter instructions"
+          >
             <button
               type="button"
               className={styles.filterToggle}
@@ -338,80 +412,22 @@ export function InstructionsCatalog({
             <Box className={styles.gridFrame} data-mode={colorMode}>
               <Box className={styles.gridContent}>
                 <Grid
-                  className={styles.threeUp}
+                  ref={sideGridRef}
+                  className={clsx(
+                    styles.threeUp,
+                    below.length > 0 && styles.threeUpSplit,
+                  )}
                   columnGap="none"
                   rowGap="none"
                   enableGutters={false}
                 >
-                  {visibleInstructions.map((item) => (
+                  {beside.map((item) => (
                     <Grid.Column
                       key={item.id}
                       span={{ xsmall: 12, medium: 6, large: 6 }}
                       className={styles.col}
                     >
-                      <Box className={clsx(styles.item, styles.itemHover)}>
-                        <Card
-                          href={pageHref(`instruction/${item.id}`)}
-                          fullWidth
-                          ctaVariant="none"
-                          backgroundColor="none"
-                          className={styles.card}
-                        >
-                          <Card.Heading as="h2">{item.title}</Card.Heading>
-                          <Card.Description>
-                            <span className={styles.cardDescText}>
-                              {item.description}
-                            </span>
-                          </Card.Description>
-                        </Card>
-                        <div className={styles.cardActions}>
-                          <ActionMenu mode="split-button" menuAlignment="start">
-                            <ActionMenu.Button
-                              as="a"
-                              href={installUrl(item)}
-                              variant="primary"
-                            >
-                              Install
-                            </ActionMenu.Button>
-                            <ActionMenu.Overlay
-                              aria-label={`Install ${item.title} to your editor`}
-                            >
-                              <ActionMenu.Item
-                                as="a"
-                                href={installUrl(item, false)}
-                              >
-                                VS Code
-                              </ActionMenu.Item>
-                              <ActionMenu.Item
-                                as="a"
-                                href={installUrl(item, true)}
-                              >
-                                VS Code Insiders
-                              </ActionMenu.Item>
-                            </ActionMenu.Overlay>
-                          </ActionMenu>
-                          <Button
-                            as="button"
-                            variant="secondary"
-                            onClick={() =>
-                              void downloadFile(downloadUrl(item), item.filename)
-                            }
-                            aria-label={`Download ${item.title} instruction file`}
-                            className={styles.iconButton}
-                          >
-                            <DownloadIcon />
-                          </Button>
-                          <Button
-                            as="a"
-                            href={instructionSourceUrl(item)}
-                            variant="secondary"
-                            aria-label={`View ${item.title} instruction on GitHub`}
-                            className={styles.iconButton}
-                          >
-                            <MarkGithubIcon />
-                          </Button>
-                        </div>
-                      </Box>
+                      {renderInstructionCard(item)}
                     </Grid.Column>
                   ))}
                 </Grid>
@@ -429,6 +445,21 @@ export function InstructionsCatalog({
         </Box>
       </Section>
 
+      {below.length > 0 ? (
+        <Box
+          className={clsx(styles.gridFrame, styles.wideFrame)}
+          data-mode={colorMode}
+        >
+          <div className={styles.wideGrid}>
+            {below.map((item) => (
+              <div key={item.id} className={styles.col}>
+                {renderInstructionCard(item)}
+              </div>
+            ))}
+          </div>
+        </Box>
+      ) : null}
+
       <div className={styles.rule} aria-hidden="true" />
 
       <Box className={styles.paginationRow}>
diff --git a/website/src/components/brand/LearningHubIndex.tsx b/website/src/components/brand/LearningHubIndex.tsx
index 45156045f4..95a1fcc791 100644
--- a/website/src/components/brand/LearningHubIndex.tsx
+++ b/website/src/components/brand/LearningHubIndex.tsx
@@ -33,6 +33,7 @@ import { DuckIcon } from "./DuckIcon";
 import { LearningHubIcon } from "./LearningHubIcon";
 import { PageShell } from "./PageShell";
 import { useCatalogPageFocus } from "./useCatalogPageFocus";
+import { useCatalogSplit } from "./useCatalogSplit";
 import { ScrambleText } from "./ScrambleText";
 import { pageHref } from "./pageHref";
 import type { SearchItem } from "./searchIndex";
@@ -432,6 +433,46 @@ function LearningHubIndexBody({
     page * pageSize,
   );
 
+  const { filterNavRef, sideGridRef, beside, below } =
+    useCatalogSplit(visibleEntries);
+
+  const renderEntryCard = (entry: Entry) => (
+    <Box className={clsx(styles.item, styles.itemHover)}>
+      <a href={entry.href} className={styles.catalogCard}>
+        <div className={styles.recCardLabels}>
+          {entry.isNew ? (
+            <span
+              className={clsx(
+                styles.recCardLabel,
+                styles.recCardLabelAccent,
+              )}
+            >
+              New
+            </span>
+          ) : null}
+          <span className={styles.recCardLabel}>
+            {entry.topic}
+          </span>
+          <span
+            className={clsx(
+              styles.recCardLabel,
+              styles.recCardLabelOutline,
+            )}
+          >
+            {entry.kind}
+          </span>
+        </div>
+        <h3 className={styles.recCardHeading}>
+          {entry.title}
+          <ArrowUpRightIcon size={20} />
+        </h3>
+        <p className={styles.recCardDesc}>
+          {entry.description}
+        </p>
+      </a>
+    </Box>
+  );
+
   return (
     <>
       <Box className={clsx(styles.hero, "heading-texture")}>
@@ -757,7 +798,11 @@ function LearningHubIndexBody({
           </button>
         </div>
         <Box className={styles.catalog}>
-          <aside className={styles.filterNav} aria-label="Filter guide sections">
+          <aside
+            ref={filterNavRef}
+            className={styles.filterNav}
+            aria-label="Filter guide sections"
+          >
             <div
               className={clsx(
                 styles.filterBody,
@@ -803,51 +848,22 @@ function LearningHubIndexBody({
             <Box className={styles.gridFrame} data-mode={colorMode}>
               <Box className={styles.gridContent}>
                 <Grid
-                  className={styles.threeUp}
+                  ref={sideGridRef}
+                  className={clsx(
+                    styles.threeUp,
+                    below.length > 0 && styles.threeUpSplit,
+                  )}
                   columnGap="none"
                   rowGap="none"
                   enableGutters={false}
                 >
-                  {visibleEntries.map((entry) => (
+                  {beside.map((entry) => (
                     <Grid.Column
                       key={entry.id}
                       span={{ xsmall: 12, medium: 6, large: 6 }}
                       className={styles.col}
                     >
-                      <Box className={clsx(styles.item, styles.itemHover)}>
-                        <a href={entry.href} className={styles.catalogCard}>
-                          <div className={styles.recCardLabels}>
-                            {entry.isNew ? (
-                              <span
-                                className={clsx(
-                                  styles.recCardLabel,
-                                  styles.recCardLabelAccent,
-                                )}
-                              >
-                                New
-                              </span>
-                            ) : null}
-                            <span className={styles.recCardLabel}>
-                              {entry.topic}
-                            </span>
-                            <span
-                              className={clsx(
-                                styles.recCardLabel,
-                                styles.recCardLabelOutline,
-                              )}
-                            >
-                              {entry.kind}
-                            </span>
-                          </div>
-                          <h3 className={styles.recCardHeading}>
-                            {entry.title}
-                            <ArrowUpRightIcon size={20} />
-                          </h3>
-                          <p className={styles.recCardDesc}>
-                            {entry.description}
-                          </p>
-                        </a>
-                      </Box>
+                      {renderEntryCard(entry)}
                     </Grid.Column>
                   ))}
                 </Grid>
@@ -865,6 +881,21 @@ function LearningHubIndexBody({
         </Box>
       </Section>
 
+      {below.length > 0 ? (
+        <Box
+          className={clsx(styles.gridFrame, styles.wideFrame)}
+          data-mode={colorMode}
+        >
+          <div className={styles.wideGrid}>
+            {below.map((entry) => (
+              <div key={entry.id} className={styles.col}>
+                {renderEntryCard(entry)}
+              </div>
+            ))}
+          </div>
+        </Box>
+      ) : null}
+
       <div className={styles.rule} aria-hidden="true" />
 
       <Box className={styles.paginationRow}>
diff --git a/website/src/components/brand/PluginsCatalog.tsx b/website/src/components/brand/PluginsCatalog.tsx
index 1c51c94251..1c6b099cfe 100644
--- a/website/src/components/brand/PluginsCatalog.tsx
+++ b/website/src/components/brand/PluginsCatalog.tsx
@@ -33,6 +33,7 @@ import { pageHref } from "./pageHref";
 import type { SearchItem } from "./searchIndex";
 import styles from "./styles/plugins.module.css";
 import { useCatalogPageFocus } from "./useCatalogPageFocus";
+import { useCatalogSplit } from "./useCatalogSplit";
 
 const CONTRIBUTE_URL =
   "https://github.com/github/awesome-copilot/blob/main/docs/README.plugins.md#how-to-contribute";
@@ -208,6 +209,61 @@ export function PluginsCatalog({
     page * pageSize,
   );
 
+  const { filterNavRef, sideGridRef, beside, below } =
+    useCatalogSplit(visiblePlugins);
+
+  const renderPluginCard = (plugin: PluginItem) => (
+    <Box className={clsx(styles.item, styles.itemHover)}>
+      <Card
+        href={pageHref(`plugin/${plugin.id}`)}
+        fullWidth
+        ctaVariant="none"
+        backgroundColor="none"
+        className={styles.card}
+      >
+        <Card.Heading as="h2">{plugin.name}</Card.Heading>
+        <Card.Description>
+          <span className={styles.cardDescText}>
+            {plugin.description}
+          </span>
+        </Card.Description>
+      </Card>
+      <div className={styles.cardActions}>
+        <Button
+          as="a"
+          href={buildVSCodePluginInstallUrl(plugin.name)}
+          variant="primary"
+          hasArrow={false}
+          aria-label={`Install in VS Code: ${plugin.name}`}
+        >
+          Install in VS Code
+        </Button>
+        <Button
+          as="a"
+          href={sourceUrlOf(plugin)}
+          variant="secondary"
+          leadingVisual={MarkGithubIcon}
+          target="_blank"
+          rel="noopener noreferrer"
+        >
+          View source
+        </Button>
+      </div>
+      {plugin.author?.name ? (
+        <Text
+          as="p"
+          size="100"
+          className={clsx(
+            styles.cardBadge,
+            styles.cardBadgeAuthor,
+          )}
+        >
+          {plugin.author.name}
+        </Text>
+      ) : null}
+    </Box>
+  );
+
   return (
     <PageShell
       styles={styles}
@@ -237,7 +293,11 @@ export function PluginsCatalog({
         paddingBlockEnd="none"
       >
         <Box className={styles.catalog}>
-          <aside className={styles.filterNav} aria-label="Filter plugins">
+          <aside
+            ref={filterNavRef}
+            className={styles.filterNav}
+            aria-label="Filter plugins"
+          >
             <button
               type="button"
               className={styles.filterToggle}
@@ -344,66 +404,22 @@ export function PluginsCatalog({
             <Box className={styles.gridFrame} data-mode={colorMode}>
               <Box className={styles.gridContent}>
                 <Grid
-                  className={styles.threeUp}
+                  ref={sideGridRef}
+                  className={clsx(
+                    styles.threeUp,
+                    below.length > 0 && styles.threeUpSplit,
+                  )}
                   columnGap="none"
                   rowGap="none"
                   enableGutters={false}
                 >
-                  {visiblePlugins.map((plugin) => (
+                  {beside.map((plugin) => (
                     <Grid.Column
                       key={plugin.id}
                       span={{ xsmall: 12, medium: 6, large: 6 }}
                       className={styles.col}
                     >
-                      <Box className={clsx(styles.item, styles.itemHover)}>
-                        <Card
-                          href={pageHref(`plugin/${plugin.id}`)}
-                          fullWidth
-                          ctaVariant="none"
-                          backgroundColor="none"
-                          className={styles.card}
-                        >
-                          <Card.Heading as="h2">{plugin.name}</Card.Heading>
-                          <Card.Description>
-                            <span className={styles.cardDescText}>
-                              {plugin.description}
-                            </span>
-                          </Card.Description>
-                        </Card>
-                        <div className={styles.cardActions}>
-                          <Button
-                            as="a"
-                            href={buildVSCodePluginInstallUrl(plugin.name)}
-                            variant="primary"
-                            hasArrow={false}
-                            aria-label={`Install in VS Code: ${plugin.name}`}
-                          >
-                            Install in VS Code
-                          </Button>
-                          <Button
-                            as="a"
-                            href={sourceUrlOf(plugin)}
-                            variant="secondary"
-                            leadingVisual={MarkGithubIcon}
-                            target="_blank"
-                            rel="noopener noreferrer"
-                          >
-                            View source
-                          </Button>
-                        </div>
-                        {plugin.author?.name ? (
-                          <Text
-                            as="p"
-                            size="100"
-                            className={clsx(
-                              styles.cardBadge,
-                              styles.cardBadgeAuthor,
-                            )}
-                          >
-                            {plugin.author.name}
-                          </Text>
-                        ) : null}
-                      </Box>
+                      {renderPluginCard(plugin)}
                     </Grid.Column>
                   ))}
                 </Grid>
@@ -421,6 +437,21 @@ export function PluginsCatalog({
         </Box>
       </Section>
 
+      {below.length > 0 ? (
+        <Box
+          className={clsx(styles.gridFrame, styles.wideFrame)}
+          data-mode={colorMode}
+        >
+          <div className={styles.wideGrid}>
+            {below.map((plugin) => (
+              <div key={plugin.id} className={styles.col}>
+                {renderPluginCard(plugin)}
+              </div>
+            ))}
+          </div>
+        </Box>
+      ) : null}
+
       <div className={styles.rule} aria-hidden="true" />
 
       <Box className={styles.paginationRow}>
diff --git a/website/src/components/brand/SkillsCatalog.tsx b/website/src/components/brand/SkillsCatalog.tsx
index a08bcf6cd1..c936c5cb15 100644
--- a/website/src/components/brand/SkillsCatalog.tsx
+++ b/website/src/components/brand/SkillsCatalog.tsx
@@ -19,6 +19,7 @@ import React, { useMemo, useState } from "react";
 
 import { PageShell } from "./PageShell";
 import { useCatalogPageFocus } from "./useCatalogPageFocus";
+import { useCatalogSplit } from "./useCatalogSplit";
 import { CatalogSortControl, CATALOG_SORT_OPTIONS } from "./CatalogSortControl";
 import {
   CatalogResourceSizeControl,
@@ -183,6 +184,58 @@ export function SkillsCatalog({
   const page = Math.min(currentPage, pageCount);
   const visibleSkills = sortedSkills.slice((page - 1) * pageSize, page * pageSize);
 
+  const { filterNavRef, sideGridRef, beside, below } =
+    useCatalogSplit(visibleSkills);
+
+  const renderSkillCard = (skill: SkillItem) => (
+    <Box className={clsx(styles.item, styles.itemHover)}>
+      <Card
+        href={pageHref(`skill/${skill.id}`)}
+        fullWidth
+        ctaVariant="none"
+        backgroundColor="none"
+        className={styles.card}
+      >
+        <Card.Heading as="h2">{skill.title}</Card.Heading>
+        <Card.Description>
+          <span className={styles.cardDescText}>
+            {skill.description}
+          </span>
+        </Card.Description>
+      </Card>
+      <div className={styles.cardActions}>
+        <Button
+          variant="primary"
+          hasArrow={false}
+          leadingVisual={CopyIcon}
+          onClick={() => copyInstall(skill)}
+        >
+          Copy install
+        </Button>
+        <Button
+          as="button"
+          variant="secondary"
+          onClick={() =>
+            void downloadFile(downloadUrl(skill), "SKILL.md")
+          }
+          aria-label={`Download ${skill.title} skill file`}
+          className={styles.iconButton}
+        >
+          <DownloadIcon />
+        </Button>
+        <Button
+          as="a"
+          href={skillSourceUrl(skill)}
+          variant="secondary"
+          aria-label={`View ${skill.title} skill on GitHub`}
+          className={styles.iconButton}
+        >
+          <MarkGithubIcon />
+        </Button>
+      </div>
+    </Box>
+  );
+
   return (
     <PageShell
       styles={styles}
@@ -208,7 +261,11 @@ export function SkillsCatalog({
 
       <Section id="catalog" tabIndex={-1} paddingBlockStart="none" paddingBlockEnd="none">
         <Box className={styles.catalog}>
-          <aside className={styles.filterNav} aria-label="Filter skills">
+          <aside
+            ref={filterNavRef}
+            className={styles.filterNav}
+            aria-label="Filter skills"
+          >
             <button
               type="button"
               className={styles.filterToggle}
@@ -313,63 +370,22 @@ export function SkillsCatalog({
             <Box className={styles.gridFrame} data-mode={colorMode}>
               <Box className={styles.gridContent}>
                 <Grid
-                  className={styles.threeUp}
+                  ref={sideGridRef}
+                  className={clsx(
+                    styles.threeUp,
+                    below.length > 0 && styles.threeUpSplit,
+                  )}
                   columnGap="none"
                   rowGap="none"
                   enableGutters={false}
                 >
-                  {visibleSkills.map((skill) => (
+                  {beside.map((skill) => (
                     <Grid.Column
                       key={skill.id}
                       span={{ xsmall: 12, medium: 6, large: 6 }}
                       className={styles.col}
                     >
-                      <Box className={clsx(styles.item, styles.itemHover)}>
-                        <Card
-                          href={pageHref(`skill/${skill.id}`)}
-                          fullWidth
-                          ctaVariant="none"
-                          backgroundColor="none"
-                          className={styles.card}
-                        >
-                          <Card.Heading as="h2">{skill.title}</Card.Heading>
-                          <Card.Description>
-                            <span className={styles.cardDescText}>
-                              {skill.description}
-                            </span>
-                          </Card.Description>
-                        </Card>
-                        <div className={styles.cardActions}>
-                          <Button
-                            variant="primary"
-                            hasArrow={false}
-                            leadingVisual={CopyIcon}
-                            onClick={() => copyInstall(skill)}
-                          >
-                            Copy install
-                          </Button>
-                          <Button
-                            as="button"
-                            variant="secondary"
-                            onClick={() =>
-                              void downloadFile(downloadUrl(skill), "SKILL.md")
-                            }
-                            aria-label={`Download ${skill.title} skill file`}
-                            className={styles.iconButton}
-                          >
-                            <DownloadIcon />
-                          </Button>
-                          <Button
-                            as="a"
-                            href={skillSourceUrl(skill)}
-                            variant="secondary"
-                            aria-label={`View ${skill.title} skill on GitHub`}
-                            className={styles.iconButton}
-                          >
-                            <MarkGithubIcon />
-                          </Button>
-                        </div>
-                      </Box>
+                      {renderSkillCard(skill)}
                     </Grid.Column>
                   ))}
                 </Grid>
@@ -387,6 +403,21 @@ export function SkillsCatalog({
         </Box>
       </Section>
 
+      {below.length > 0 ? (
+        <Box
+          className={clsx(styles.gridFrame, styles.wideFrame)}
+          data-mode={colorMode}
+        >
+          <div className={styles.wideGrid}>
+            {below.map((skill) => (
+              <div key={skill.id} className={styles.col}>
+                {renderSkillCard(skill)}
+              </div>
+            ))}
+          </div>
+        </Box>
+      ) : null}
+
       <div className={styles.rule} aria-hidden="true" />
 
       <Box className={styles.paginationRow}>
diff --git a/website/src/components/brand/styles/agents.module.css b/website/src/components/brand/styles/agents.module.css
index df8e237fc4..6e99174037 100644
--- a/website/src/components/brand/styles/agents.module.css
+++ b/website/src/components/brand/styles/agents.module.css
@@ -1085,6 +1085,11 @@
       var(--brand-color-border-muted);
   }
 
+  /* Split page: the wide grid below draws the line under these cards. */
+  .threeUpSplit {
+    border-block-end: 0;
+  }
+
   /* Four-up stats row */
   .fourUp .item {
     border-block-start: 0;
@@ -1097,6 +1102,41 @@
   }
 }
 
+/* Cards past the end of the filter list move to a wider grid below the
+   catalog, inside the same frame: as many columns of at least 23rem as fit
+   (three in the 1280px frame). The frame draws the top and left gridlines,
+   and the right one beside an unfilled last row; each cell draws its own
+   right and bottom lines. */
+.wideFrame {
+  width: auto;
+  margin-inline: max(
+    var(--page-gutter),
+    (100% - var(--brand-breakpoint-xlarge)) / 2
+  );
+  border-inline-start: var(--brand-borderWidth-thin) solid
+    var(--brand-color-border-muted);
+  background-image: linear-gradient(
+    var(--brand-color-border-muted),
+    var(--brand-color-border-muted)
+  );
+  background-size: var(--brand-borderWidth-thin) 100%;
+  background-position: 100% 0;
+  background-repeat: no-repeat;
+}
+
+.wideGrid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(23rem, 1fr));
+}
+
+.wideGrid .item {
+  border-block-start: 0;
+  border-inline-end: var(--brand-borderWidth-thin) solid
+    var(--brand-color-border-muted);
+  border-block-end: var(--brand-borderWidth-thin) solid
+    var(--brand-color-border-muted);
+}
+
 /*
  * Responsive page gutters (mirrors styles.module.css; see there for the tier
  * rationale): <768→20 · 768–1279→91 · 1280–1919→at least 152 · ≥1920→native 1280.
diff --git a/website/src/components/brand/styles/extensions.module.css b/website/src/components/brand/styles/extensions.module.css
index 53ba04d965..98ccab5d5d 100644
--- a/website/src/components/brand/styles/extensions.module.css
+++ b/website/src/components/brand/styles/extensions.module.css
@@ -1189,6 +1189,11 @@
       var(--brand-color-border-muted);
   }
 
+  /* Split page: the wide grid below draws the line under these cards. */
+  .threeUpSplit {
+    border-block-end: 0;
+  }
+
   /* Four-up stats row */
   .fourUp .item {
     border-block-start: 0;
@@ -1201,6 +1206,41 @@
   }
 }
 
+/* Cards past the end of the filter list move to a wider grid below the
+   catalog, inside the same frame: as many columns of at least 23rem as fit
+   (three in the 1280px frame). The frame draws the top and left gridlines,
+   and the right one beside an unfilled last row; each cell draws its own
+   right and bottom lines. */
+.wideFrame {
+  width: auto;
+  margin-inline: max(
+    var(--page-gutter),
+    (100% - var(--brand-breakpoint-xlarge)) / 2
+  );
+  border-inline-start: var(--brand-borderWidth-thin) solid
+    var(--brand-color-border-muted);
+  background-image: linear-gradient(
+    var(--brand-color-border-muted),
+    var(--brand-color-border-muted)
+  );
+  background-size: var(--brand-borderWidth-thin) 100%;
+  background-position: 100% 0;
+  background-repeat: no-repeat;
+}
+
+.wideGrid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(23rem, 1fr));
+}
+
+.wideGrid .item {
+  border-block-start: 0;
+  border-inline-end: var(--brand-borderWidth-thin) solid
+    var(--brand-color-border-muted);
+  border-block-end: var(--brand-borderWidth-thin) solid
+    var(--brand-color-border-muted);
+}
+
 /*
  * Responsive page gutters (mirrors styles.module.css; see there for the tier
  * rationale): <768→20 · 768–1279→91 · 1280–1919→at least 152 · ≥1920→native 1280.
diff --git a/website/src/components/brand/styles/instructions.module.css b/website/src/components/brand/styles/instructions.module.css
index feb93ca258..1e38606594 100644
--- a/website/src/components/brand/styles/instructions.module.css
+++ b/website/src/components/brand/styles/instructions.module.css
@@ -1074,6 +1074,11 @@
       var(--brand-color-border-muted);
   }
 
+  /* Split page: the wide grid below draws the line under these cards. */
+  .threeUpSplit {
+    border-block-end: 0;
+  }
+
   /* Four-up stats row */
   .fourUp .item {
     border-block-start: 0;
@@ -1086,6 +1091,41 @@
   }
 }
 
+/* Cards past the end of the filter list move to a wider grid below the
+   catalog, inside the same frame: as many columns of at least 23rem as fit
+   (three in the 1280px frame). The frame draws the top and left gridlines,
+   and the right one beside an unfilled last row; each cell draws its own
+   right and bottom lines. */
+.wideFrame {
+  width: auto;
+  margin-inline: max(
+    var(--page-gutter),
+    (100% - var(--brand-breakpoint-xlarge)) / 2
+  );
+  border-inline-start: var(--brand-borderWidth-thin) solid
+    var(--brand-color-border-muted);
+  background-image: linear-gradient(
+    var(--brand-color-border-muted),
+    var(--brand-color-border-muted)
+  );
+  background-size: var(--brand-borderWidth-thin) 100%;
+  background-position: 100% 0;
+  background-repeat: no-repeat;
+}
+
+.wideGrid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(23rem, 1fr));
+}
+
+.wideGrid .item {
+  border-block-start: 0;
+  border-inline-end: var(--brand-borderWidth-thin) solid
+    var(--brand-color-border-muted);
+  border-block-end: var(--brand-borderWidth-thin) solid
+    var(--brand-color-border-muted);
+}
+
 /*
  * Responsive page gutters (mirrors styles.module.css; see there for the tier
  * rationale): <768→20 · 768–1279→91 · 1280–1919→at least 152 · ≥1920→native 1280.
diff --git a/website/src/components/brand/styles/learning-hub-copilot-app.module.css b/website/src/components/brand/styles/learning-hub-copilot-app.module.css
index 8a86092015..6c6e02b1e3 100644
--- a/website/src/components/brand/styles/learning-hub-copilot-app.module.css
+++ b/website/src/components/brand/styles/learning-hub-copilot-app.module.css
@@ -1919,6 +1919,11 @@
       var(--brand-color-border-muted);
   }
 
+  /* Split page: the wide grid below draws the line under these cards. */
+  .threeUpSplit {
+    border-block-end: 0;
+  }
+
   /* Four-up stats row */
   .fourUp .item {
     border-block-start: 0;
@@ -1931,6 +1936,41 @@
   }
 }
 
+/* Cards past the end of the filter list move to a wider grid below the
+   catalog, inside the same frame: as many columns of at least 23rem as fit
+   (three in the 1280px frame). The frame draws the top and left gridlines,
+   and the right one beside an unfilled last row; each cell draws its own
+   right and bottom lines. */
+.wideFrame {
+  width: auto;
+  margin-inline: max(
+    var(--page-gutter),
+    (100% - var(--brand-breakpoint-xlarge)) / 2
+  );
+  border-inline-start: var(--brand-borderWidth-thin) solid
+    var(--brand-color-border-muted);
+  background-image: linear-gradient(
+    var(--brand-color-border-muted),
+    var(--brand-color-border-muted)
+  );
+  background-size: var(--brand-borderWidth-thin) 100%;
+  background-position: 100% 0;
+  background-repeat: no-repeat;
+}
+
+.wideGrid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(23rem, 1fr));
+}
+
+.wideGrid .item {
+  border-block-start: 0;
+  border-inline-end: var(--brand-borderWidth-thin) solid
+    var(--brand-color-border-muted);
+  border-block-end: var(--brand-borderWidth-thin) solid
+    var(--brand-color-border-muted);
+}
+
 /*
  * Responsive page gutters (mirrors styles.module.css; see there for the tier
  * rationale): <768→20 · 768–1279→91 · 1280–1919→at least 152 · ≥1920→native 1280.
diff --git a/website/src/components/brand/styles/plugins.module.css b/website/src/components/brand/styles/plugins.module.css
index a1a6542491..206f281d45 100644
--- a/website/src/components/brand/styles/plugins.module.css
+++ b/website/src/components/brand/styles/plugins.module.css
@@ -1116,6 +1116,11 @@
       var(--brand-color-border-muted);
   }
 
+  /* Split page: the wide grid below draws the line under these cards. */
+  .threeUpSplit {
+    border-block-end: 0;
+  }
+
   /* Four-up stats row */
   .fourUp .item {
     border-block-start: 0;
@@ -1128,6 +1133,41 @@
   }
 }
 
+/* Cards past the end of the filter list move to a wider grid below the
+   catalog, inside the same frame: as many columns of at least 23rem as fit
+   (three in the 1280px frame). The frame draws the top and left gridlines,
+   and the right one beside an unfilled last row; each cell draws its own
+   right and bottom lines. */
+.wideFrame {
+  width: auto;
+  margin-inline: max(
+    var(--page-gutter),
+    (100% - var(--brand-breakpoint-xlarge)) / 2
+  );
+  border-inline-start: var(--brand-borderWidth-thin) solid
+    var(--brand-color-border-muted);
+  background-image: linear-gradient(
+    var(--brand-color-border-muted),
+    var(--brand-color-border-muted)
+  );
+  background-size: var(--brand-borderWidth-thin) 100%;
+  background-position: 100% 0;
+  background-repeat: no-repeat;
+}
+
+.wideGrid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(23rem, 1fr));
+}
+
+.wideGrid .item {
+  border-block-start: 0;
+  border-inline-end: var(--brand-borderWidth-thin) solid
+    var(--brand-color-border-muted);
+  border-block-end: var(--brand-borderWidth-thin) solid
+    var(--brand-color-border-muted);
+}
+
 /*
  * Responsive page gutters (mirrors styles.module.css; see there for the tier
  * rationale): <768→20 · 768–1279→91 · 1280–1919→at least 152 · ≥1920→native 1280.
diff --git a/website/src/components/brand/styles/skills.module.css b/website/src/components/brand/styles/skills.module.css
index 62754643f8..305b6e3070 100644
--- a/website/src/components/brand/styles/skills.module.css
+++ b/website/src/components/brand/styles/skills.module.css
@@ -1104,6 +1104,11 @@
       var(--brand-color-border-muted);
   }
 
+  /* Split page: the wide grid below draws the line under these cards. */
+  .threeUpSplit {
+    border-block-end: 0;
+  }
+
   /* Four-up stats row */
   .fourUp .item {
     border-block-start: 0;
@@ -1116,6 +1121,41 @@
   }
 }
 
+/* Cards past the end of the filter list move to a wider grid below the
+   catalog, inside the same frame: as many columns of at least 23rem as fit
+   (three in the 1280px frame). The frame draws the top and left gridlines,
+   and the right one beside an unfilled last row; each cell draws its own
+   right and bottom lines. */
+.wideFrame {
+  width: auto;
+  margin-inline: max(
+    var(--page-gutter),
+    (100% - var(--brand-breakpoint-xlarge)) / 2
+  );
+  border-inline-start: var(--brand-borderWidth-thin) solid
+    var(--brand-color-border-muted);
+  background-image: linear-gradient(
+    var(--brand-color-border-muted),
+    var(--brand-color-border-muted)
+  );
+  background-size: var(--brand-borderWidth-thin) 100%;
+  background-position: 100% 0;
+  background-repeat: no-repeat;
+}
+
+.wideGrid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(23rem, 1fr));
+}
+
+.wideGrid .item {
+  border-block-start: 0;
+  border-inline-end: var(--brand-borderWidth-thin) solid
+    var(--brand-color-border-muted);
+  border-block-end: var(--brand-borderWidth-thin) solid
+    var(--brand-color-border-muted);
+}
+
 /*
  * Responsive page gutters (mirrors styles.module.css; see there for the tier
  * rationale): <768→20 · 768–1279→91 · 1280–1919→at least 152 · ≥1920→native 1280.
diff --git a/website/src/components/brand/useCatalogSplit.ts b/website/src/components/brand/useCatalogSplit.ts
new file mode 100644
index 0000000000..1fca663ecb
--- /dev/null
+++ b/website/src/components/brand/useCatalogSplit.ts
@@ -0,0 +1,75 @@
+import {
+  useEffect,
+  useEffectEvent,
+  useLayoutEffect,
+  useRef,
+  useState,
+} from "react";
+
+/**
+ * Splits a catalog page's cards between the grid beside the filter sidebar and
+ * a wider grid below the catalog. A row stays beside the sidebar while it
+ * starts above the end of the filter list, so the wide grid begins with the
+ * first row the sidebar no longer reaches. When the sidebar stacks above the
+ * cards (narrow screens), every card stays beside it.
+ */
+export function useCatalogSplit<T>(items: readonly T[]) {
+  const filterNavRef = useRef<HTMLElement>(null);
+  const sideGridRef = useRef<HTMLDivElement>(null);
+  const [besideCount, setBesideCount] = useState(items.length);
+  const shown = Math.min(besideCount, items.length);
+
+  const measure = useEffectEvent(() => {
+    const nav = filterNavRef.current;
+    const grid = sideGridRef.current;
+    if (!nav || !grid) return;
+    const next = countBeside(nav, grid, shown, items.length);
+    if (next !== shown) setBesideCount(next);
+  });
+
+  // Page, sort, filter, page size, and "Show more" changes all re-render, so
+  // measure after every render, before the browser paints.
+  useLayoutEffect(() => measure());
+
+  // Viewport and font changes resize the side grid without a render.
+  useEffect(() => {
+    const grid = sideGridRef.current;
+    if (!grid) return;
+    const observer = new ResizeObserver(() => measure());
+    observer.observe(grid);
+    return () => observer.disconnect();
+  }, []);
+
+  return {
+    filterNavRef,
+    sideGridRef,
+    beside: items.slice(0, shown),
+    below: items.slice(shown),
+  };
+}
+
+function countBeside(
+  nav: HTMLElement,
+  grid: HTMLElement,
+  shown: number,
+  total: number,
+) {
+  // Stacked layout: the sidebar sits above the cards, not beside them.
+  const gridLeft = grid.getBoundingClientRect().left;
+  if (nav.getBoundingClientRect().right > gridLeft + 1) return total;
+  // The sidebar box stretches to the catalog's height, so the filter list
+  // ends at its last group (or Clear all) plus the sidebar's bottom padding.
+  const list = nav.lastElementChild?.lastElementChild ?? nav;
+  const navEnd =
+    list.getBoundingClientRect().bottom +
+    parseFloat(getComputedStyle(nav).paddingBlockEnd);
+  const cells = Array.from(grid.children);
+  const lastBottom = cells.at(-1)?.getBoundingClientRect().bottom ?? -Infinity;
+  // The side grid ends above the filters' end and cards are left over, so more
+  // rows fit. Rows touch (no row gap), so the next row starts at lastBottom:
+  // show every card for one layout pass, then cut at the first row below.
+  if (shown < total && lastBottom < navEnd) return total;
+  const startsBeside = (cell: Element) =>
+    cell.getBoundingClientRect().top < navEnd;
+  return cells.filter(startsBeside).length;
+}

From 292108d21d9ae3b2008a462b8f50c23c801e1566 Mon Sep 17 00:00:00 2001
From: John Haugabook <johnhaugabook@gmail.com>
Date: Wed, 28 Oct 2026 20:52:04 -0400
Subject: [PATCH 2/6] website-feature: split catalog grids after 14 cards with
 full wide rows

- Split by count: 14 cards (seven rows) stay beside the filters and the
  rest move to the wide grid, shifted to the nearest even count that fills
  every wide row (16 for 100 per page). Lists of 14 or fewer, including
  the default 6, never split.
- useCatalogSplit no longer measures the layout, so resize, zoom, and font
  loads no longer move cards between grids, the scrollbar feedback loop is
  gone, and the server render matches the default page.
- Render the wide grid inside <section id="catalog">, so pagination focus,
  the plugin-install regression's #catalog scope, and the Section's 1280px
  cap cover it. The wide frame takes .catalog's gutter inset instead of
  its own max() formula.
- Extensions picks its eager image by identity instead of a page index.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 .../src/components/brand/AgentsCatalog.tsx    |  39 +++---
 .../components/brand/ExtensionsCatalog.tsx    |  47 ++++----
 .../components/brand/InstructionsCatalog.tsx  |  39 +++---
 .../src/components/brand/LearningHubIndex.tsx |  39 +++---
 .../src/components/brand/PluginsCatalog.tsx   |  39 +++---
 .../src/components/brand/SkillsCatalog.tsx    |  39 +++---
 .../components/brand/styles/agents.module.css |  13 +-
 .../brand/styles/extensions.module.css        |  13 +-
 .../brand/styles/instructions.module.css      |  13 +-
 .../learning-hub-copilot-app.module.css       |  13 +-
 .../brand/styles/plugins.module.css           |  13 +-
 .../components/brand/styles/skills.module.css |  13 +-
 .../src/components/brand/useCatalogSplit.ts   | 111 +++++++-----------
 13 files changed, 193 insertions(+), 238 deletions(-)

diff --git a/website/src/components/brand/AgentsCatalog.tsx b/website/src/components/brand/AgentsCatalog.tsx
index 88ea916474..e5289a6452 100644
--- a/website/src/components/brand/AgentsCatalog.tsx
+++ b/website/src/components/brand/AgentsCatalog.tsx
@@ -202,8 +202,7 @@ export function AgentsCatalog({
   const page = Math.min(currentPage, pageCount);
   const visibleAgents = sortedAgents.slice((page - 1) * pageSize, page * pageSize);
 
-  const { filterNavRef, sideGridRef, beside, below } =
-    useCatalogSplit(visibleAgents);
+  const { beside, below } = useCatalogSplit(visibleAgents);
 
   const renderAgentCard = (agent: AgentItem) => (
     <Box className={clsx(styles.item, styles.itemHover)}>
@@ -294,11 +293,7 @@ export function AgentsCatalog({
         paddingBlockEnd="none"
       >
         <Box className={styles.catalog}>
-          <aside
-            ref={filterNavRef}
-            className={styles.filterNav}
-            aria-label="Filter agents"
-          >
+          <aside className={styles.filterNav} aria-label="Filter agents">
             <button
               type="button"
               className={styles.filterToggle}
@@ -405,7 +400,6 @@ export function AgentsCatalog({
             <Box className={styles.gridFrame} data-mode={colorMode}>
               <Box className={styles.gridContent}>
                 <Grid
-                  ref={sideGridRef}
                   className={clsx(
                     styles.threeUp,
                     below.length > 0 && styles.threeUpSplit,
@@ -436,23 +430,22 @@ export function AgentsCatalog({
             ) : null}
           </Box>
         </Box>
+        {below.length > 0 ? (
+          <Box
+            className={clsx(styles.gridFrame, styles.wideFrame)}
+            data-mode={colorMode}
+          >
+            <div className={styles.wideGrid}>
+              {below.map((agent) => (
+                <div key={agent.id} className={styles.col}>
+                  {renderAgentCard(agent)}
+                </div>
+              ))}
+            </div>
+          </Box>
+        ) : null}
       </Section>
 
-      {below.length > 0 ? (
-        <Box
-          className={clsx(styles.gridFrame, styles.wideFrame)}
-          data-mode={colorMode}
-        >
-          <div className={styles.wideGrid}>
-            {below.map((agent) => (
-              <div key={agent.id} className={styles.col}>
-                {renderAgentCard(agent)}
-              </div>
-            ))}
-          </div>
-        </Box>
-      ) : null}
-
       <div className={styles.rule} aria-hidden="true" />
 
       <Box className={styles.paginationRow}>
diff --git a/website/src/components/brand/ExtensionsCatalog.tsx b/website/src/components/brand/ExtensionsCatalog.tsx
index 9867957de1..dfd2f79073 100644
--- a/website/src/components/brand/ExtensionsCatalog.tsx
+++ b/website/src/components/brand/ExtensionsCatalog.tsx
@@ -250,10 +250,9 @@ export function ExtensionsCatalog({
     page * pageSize,
   );
 
-  const { filterNavRef, sideGridRef, beside, below } =
-    useCatalogSplit(visibleExtensions);
+  const { beside, below } = useCatalogSplit(visibleExtensions);
 
-  const renderExtensionCard = (ext: ExtensionItem, index: number) => {
+  const renderExtensionCard = (ext: ExtensionItem) => {
     const detailHref = pageHref(`extension/${ext.id}`);
     const sourceUrl = extensionSourceUrl(ext);
     const installUrl = appInstallUrl(ext);
@@ -274,7 +273,7 @@ export function ExtensionsCatalog({
               className={styles.cardImage}
               src={safeImageUrl}
               alt={`${ext.name} preview`}
-              loading={index === 0 ? "eager" : "lazy"}
+              loading={ext === visibleExtensions[0] ? "eager" : "lazy"}
               decoding="async"
               width={1280}
               height={720}
@@ -378,11 +377,7 @@ export function ExtensionsCatalog({
         paddingBlockEnd="none"
       >
         <Box className={styles.catalog}>
-          <aside
-            ref={filterNavRef}
-            className={styles.filterNav}
-            aria-label="Filter extensions"
-          >
+          <aside className={styles.filterNav} aria-label="Filter extensions">
             <button
               type="button"
               className={styles.filterToggle}
@@ -489,7 +484,6 @@ export function ExtensionsCatalog({
             <Box className={styles.gridFrame} data-mode={colorMode}>
               <Box className={styles.gridContent}>
                 <Grid
-                  ref={sideGridRef}
                   className={clsx(
                     styles.threeUp,
                     below.length > 0 && styles.threeUpSplit,
@@ -498,13 +492,13 @@ export function ExtensionsCatalog({
                   rowGap="none"
                   enableGutters={false}
                 >
-                  {beside.map((ext, index) => (
+                  {beside.map((ext) => (
                     <Grid.Column
                       key={ext.id}
                       span={{ xsmall: 12, medium: 6, large: 6 }}
                       className={styles.col}
                     >
-                      {renderExtensionCard(ext, index)}
+                      {renderExtensionCard(ext)}
                     </Grid.Column>
                   ))}
                 </Grid>
@@ -520,23 +514,22 @@ export function ExtensionsCatalog({
             ) : null}
           </Box>
         </Box>
+        {below.length > 0 ? (
+          <Box
+            className={clsx(styles.gridFrame, styles.wideFrame)}
+            data-mode={colorMode}
+          >
+            <div className={styles.wideGrid}>
+              {below.map((ext) => (
+                <div key={ext.id} className={styles.col}>
+                  {renderExtensionCard(ext)}
+                </div>
+              ))}
+            </div>
+          </Box>
+        ) : null}
       </Section>
 
-      {below.length > 0 ? (
-        <Box
-          className={clsx(styles.gridFrame, styles.wideFrame)}
-          data-mode={colorMode}
-        >
-          <div className={styles.wideGrid}>
-            {below.map((ext, index) => (
-              <div key={ext.id} className={styles.col}>
-                {renderExtensionCard(ext, beside.length + index)}
-              </div>
-            ))}
-          </div>
-        </Box>
-      ) : null}
-
       <div className={styles.rule} aria-hidden="true" />
 
       <Box className={styles.paginationRow}>
diff --git a/website/src/components/brand/InstructionsCatalog.tsx b/website/src/components/brand/InstructionsCatalog.tsx
index ec17bae920..057ebc7a87 100644
--- a/website/src/components/brand/InstructionsCatalog.tsx
+++ b/website/src/components/brand/InstructionsCatalog.tsx
@@ -209,8 +209,7 @@ export function InstructionsCatalog({
     page * pageSize,
   );
 
-  const { filterNavRef, sideGridRef, beside, below } =
-    useCatalogSplit(visibleInstructions);
+  const { beside, below } = useCatalogSplit(visibleInstructions);
 
   const renderInstructionCard = (item: InstructionItem) => (
     <Box className={clsx(styles.item, styles.itemHover)}>
@@ -301,11 +300,7 @@ export function InstructionsCatalog({
 
       <Section id="catalog" tabIndex={-1} paddingBlockStart="none" paddingBlockEnd="none">
         <Box className={styles.catalog}>
-          <aside
-            ref={filterNavRef}
-            className={styles.filterNav}
-            aria-label="Filter instructions"
-          >
+          <aside className={styles.filterNav} aria-label="Filter instructions">
             <button
               type="button"
               className={styles.filterToggle}
@@ -412,7 +407,6 @@ export function InstructionsCatalog({
             <Box className={styles.gridFrame} data-mode={colorMode}>
               <Box className={styles.gridContent}>
                 <Grid
-                  ref={sideGridRef}
                   className={clsx(
                     styles.threeUp,
                     below.length > 0 && styles.threeUpSplit,
@@ -443,23 +437,22 @@ export function InstructionsCatalog({
             ) : null}
           </Box>
         </Box>
+        {below.length > 0 ? (
+          <Box
+            className={clsx(styles.gridFrame, styles.wideFrame)}
+            data-mode={colorMode}
+          >
+            <div className={styles.wideGrid}>
+              {below.map((item) => (
+                <div key={item.id} className={styles.col}>
+                  {renderInstructionCard(item)}
+                </div>
+              ))}
+            </div>
+          </Box>
+        ) : null}
       </Section>
 
-      {below.length > 0 ? (
-        <Box
-          className={clsx(styles.gridFrame, styles.wideFrame)}
-          data-mode={colorMode}
-        >
-          <div className={styles.wideGrid}>
-            {below.map((item) => (
-              <div key={item.id} className={styles.col}>
-                {renderInstructionCard(item)}
-              </div>
-            ))}
-          </div>
-        </Box>
-      ) : null}
-
       <div className={styles.rule} aria-hidden="true" />
 
       <Box className={styles.paginationRow}>
diff --git a/website/src/components/brand/LearningHubIndex.tsx b/website/src/components/brand/LearningHubIndex.tsx
index 95a1fcc791..84395e9fe2 100644
--- a/website/src/components/brand/LearningHubIndex.tsx
+++ b/website/src/components/brand/LearningHubIndex.tsx
@@ -433,8 +433,7 @@ function LearningHubIndexBody({
     page * pageSize,
   );
 
-  const { filterNavRef, sideGridRef, beside, below } =
-    useCatalogSplit(visibleEntries);
+  const { beside, below } = useCatalogSplit(visibleEntries);
 
   const renderEntryCard = (entry: Entry) => (
     <Box className={clsx(styles.item, styles.itemHover)}>
@@ -798,11 +797,7 @@ function LearningHubIndexBody({
           </button>
         </div>
         <Box className={styles.catalog}>
-          <aside
-            ref={filterNavRef}
-            className={styles.filterNav}
-            aria-label="Filter guide sections"
-          >
+          <aside className={styles.filterNav} aria-label="Filter guide sections">
             <div
               className={clsx(
                 styles.filterBody,
@@ -848,7 +843,6 @@ function LearningHubIndexBody({
             <Box className={styles.gridFrame} data-mode={colorMode}>
               <Box className={styles.gridContent}>
                 <Grid
-                  ref={sideGridRef}
                   className={clsx(
                     styles.threeUp,
                     below.length > 0 && styles.threeUpSplit,
@@ -879,23 +873,22 @@ function LearningHubIndexBody({
             ) : null}
           </Box>
         </Box>
+        {below.length > 0 ? (
+          <Box
+            className={clsx(styles.gridFrame, styles.wideFrame)}
+            data-mode={colorMode}
+          >
+            <div className={styles.wideGrid}>
+              {below.map((entry) => (
+                <div key={entry.id} className={styles.col}>
+                  {renderEntryCard(entry)}
+                </div>
+              ))}
+            </div>
+          </Box>
+        ) : null}
       </Section>
 
-      {below.length > 0 ? (
-        <Box
-          className={clsx(styles.gridFrame, styles.wideFrame)}
-          data-mode={colorMode}
-        >
-          <div className={styles.wideGrid}>
-            {below.map((entry) => (
-              <div key={entry.id} className={styles.col}>
-                {renderEntryCard(entry)}
-              </div>
-            ))}
-          </div>
-        </Box>
-      ) : null}
-
       <div className={styles.rule} aria-hidden="true" />
 
       <Box className={styles.paginationRow}>
diff --git a/website/src/components/brand/PluginsCatalog.tsx b/website/src/components/brand/PluginsCatalog.tsx
index 1c6b099cfe..f546a2a15f 100644
--- a/website/src/components/brand/PluginsCatalog.tsx
+++ b/website/src/components/brand/PluginsCatalog.tsx
@@ -209,8 +209,7 @@ export function PluginsCatalog({
     page * pageSize,
   );
 
-  const { filterNavRef, sideGridRef, beside, below } =
-    useCatalogSplit(visiblePlugins);
+  const { beside, below } = useCatalogSplit(visiblePlugins);
 
   const renderPluginCard = (plugin: PluginItem) => (
     <Box className={clsx(styles.item, styles.itemHover)}>
@@ -293,11 +292,7 @@ export function PluginsCatalog({
         paddingBlockEnd="none"
       >
         <Box className={styles.catalog}>
-          <aside
-            ref={filterNavRef}
-            className={styles.filterNav}
-            aria-label="Filter plugins"
-          >
+          <aside className={styles.filterNav} aria-label="Filter plugins">
             <button
               type="button"
               className={styles.filterToggle}
@@ -404,7 +399,6 @@ export function PluginsCatalog({
             <Box className={styles.gridFrame} data-mode={colorMode}>
               <Box className={styles.gridContent}>
                 <Grid
-                  ref={sideGridRef}
                   className={clsx(
                     styles.threeUp,
                     below.length > 0 && styles.threeUpSplit,
@@ -435,23 +429,22 @@ export function PluginsCatalog({
             ) : null}
           </Box>
         </Box>
+        {below.length > 0 ? (
+          <Box
+            className={clsx(styles.gridFrame, styles.wideFrame)}
+            data-mode={colorMode}
+          >
+            <div className={styles.wideGrid}>
+              {below.map((plugin) => (
+                <div key={plugin.id} className={styles.col}>
+                  {renderPluginCard(plugin)}
+                </div>
+              ))}
+            </div>
+          </Box>
+        ) : null}
       </Section>
 
-      {below.length > 0 ? (
-        <Box
-          className={clsx(styles.gridFrame, styles.wideFrame)}
-          data-mode={colorMode}
-        >
-          <div className={styles.wideGrid}>
-            {below.map((plugin) => (
-              <div key={plugin.id} className={styles.col}>
-                {renderPluginCard(plugin)}
-              </div>
-            ))}
-          </div>
-        </Box>
-      ) : null}
-
       <div className={styles.rule} aria-hidden="true" />
 
       <Box className={styles.paginationRow}>
diff --git a/website/src/components/brand/SkillsCatalog.tsx b/website/src/components/brand/SkillsCatalog.tsx
index c936c5cb15..dd672df1bc 100644
--- a/website/src/components/brand/SkillsCatalog.tsx
+++ b/website/src/components/brand/SkillsCatalog.tsx
@@ -184,8 +184,7 @@ export function SkillsCatalog({
   const page = Math.min(currentPage, pageCount);
   const visibleSkills = sortedSkills.slice((page - 1) * pageSize, page * pageSize);
 
-  const { filterNavRef, sideGridRef, beside, below } =
-    useCatalogSplit(visibleSkills);
+  const { beside, below } = useCatalogSplit(visibleSkills);
 
   const renderSkillCard = (skill: SkillItem) => (
     <Box className={clsx(styles.item, styles.itemHover)}>
@@ -261,11 +260,7 @@ export function SkillsCatalog({
 
       <Section id="catalog" tabIndex={-1} paddingBlockStart="none" paddingBlockEnd="none">
         <Box className={styles.catalog}>
-          <aside
-            ref={filterNavRef}
-            className={styles.filterNav}
-            aria-label="Filter skills"
-          >
+          <aside className={styles.filterNav} aria-label="Filter skills">
             <button
               type="button"
               className={styles.filterToggle}
@@ -370,7 +365,6 @@ export function SkillsCatalog({
             <Box className={styles.gridFrame} data-mode={colorMode}>
               <Box className={styles.gridContent}>
                 <Grid
-                  ref={sideGridRef}
                   className={clsx(
                     styles.threeUp,
                     below.length > 0 && styles.threeUpSplit,
@@ -401,23 +395,22 @@ export function SkillsCatalog({
             ) : null}
           </Box>
         </Box>
+        {below.length > 0 ? (
+          <Box
+            className={clsx(styles.gridFrame, styles.wideFrame)}
+            data-mode={colorMode}
+          >
+            <div className={styles.wideGrid}>
+              {below.map((skill) => (
+                <div key={skill.id} className={styles.col}>
+                  {renderSkillCard(skill)}
+                </div>
+              ))}
+            </div>
+          </Box>
+        ) : null}
       </Section>
 
-      {below.length > 0 ? (
-        <Box
-          className={clsx(styles.gridFrame, styles.wideFrame)}
-          data-mode={colorMode}
-        >
-          <div className={styles.wideGrid}>
-            {below.map((skill) => (
-              <div key={skill.id} className={styles.col}>
-                {renderSkillCard(skill)}
-              </div>
-            ))}
-          </div>
-        </Box>
-      ) : null}
-
       <div className={styles.rule} aria-hidden="true" />
 
       <Box className={styles.paginationRow}>
diff --git a/website/src/components/brand/styles/agents.module.css b/website/src/components/brand/styles/agents.module.css
index 6e99174037..6a552a4c2a 100644
--- a/website/src/components/brand/styles/agents.module.css
+++ b/website/src/components/brand/styles/agents.module.css
@@ -1106,13 +1106,10 @@
    catalog, inside the same frame: as many columns of at least 23rem as fit
    (three in the 1280px frame). The frame draws the top and left gridlines,
    and the right one beside an unfilled last row; each cell draws its own
-   right and bottom lines. */
+   right and bottom lines. It sits in the catalog's Section, so it shares the
+   1280px cap and, below 120rem, the same gutter inset as .catalog. */
 .wideFrame {
   width: auto;
-  margin-inline: max(
-    var(--page-gutter),
-    (100% - var(--brand-breakpoint-xlarge)) / 2
-  );
   border-inline-start: var(--brand-borderWidth-thin) solid
     var(--brand-color-border-muted);
   background-image: linear-gradient(
@@ -1124,6 +1121,12 @@
   background-repeat: no-repeat;
 }
 
+@media screen and (max-width: 119.99rem) {
+  .wideFrame {
+    margin-inline: var(--page-gutter);
+  }
+}
+
 .wideGrid {
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(23rem, 1fr));
diff --git a/website/src/components/brand/styles/extensions.module.css b/website/src/components/brand/styles/extensions.module.css
index 98ccab5d5d..a1f782a501 100644
--- a/website/src/components/brand/styles/extensions.module.css
+++ b/website/src/components/brand/styles/extensions.module.css
@@ -1210,13 +1210,10 @@
    catalog, inside the same frame: as many columns of at least 23rem as fit
    (three in the 1280px frame). The frame draws the top and left gridlines,
    and the right one beside an unfilled last row; each cell draws its own
-   right and bottom lines. */
+   right and bottom lines. It sits in the catalog's Section, so it shares the
+   1280px cap and, below 120rem, the same gutter inset as .catalog. */
 .wideFrame {
   width: auto;
-  margin-inline: max(
-    var(--page-gutter),
-    (100% - var(--brand-breakpoint-xlarge)) / 2
-  );
   border-inline-start: var(--brand-borderWidth-thin) solid
     var(--brand-color-border-muted);
   background-image: linear-gradient(
@@ -1228,6 +1225,12 @@
   background-repeat: no-repeat;
 }
 
+@media screen and (max-width: 119.99rem) {
+  .wideFrame {
+    margin-inline: var(--page-gutter);
+  }
+}
+
 .wideGrid {
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(23rem, 1fr));
diff --git a/website/src/components/brand/styles/instructions.module.css b/website/src/components/brand/styles/instructions.module.css
index 1e38606594..831d1376e2 100644
--- a/website/src/components/brand/styles/instructions.module.css
+++ b/website/src/components/brand/styles/instructions.module.css
@@ -1095,13 +1095,10 @@
    catalog, inside the same frame: as many columns of at least 23rem as fit
    (three in the 1280px frame). The frame draws the top and left gridlines,
    and the right one beside an unfilled last row; each cell draws its own
-   right and bottom lines. */
+   right and bottom lines. It sits in the catalog's Section, so it shares the
+   1280px cap and, below 120rem, the same gutter inset as .catalog. */
 .wideFrame {
   width: auto;
-  margin-inline: max(
-    var(--page-gutter),
-    (100% - var(--brand-breakpoint-xlarge)) / 2
-  );
   border-inline-start: var(--brand-borderWidth-thin) solid
     var(--brand-color-border-muted);
   background-image: linear-gradient(
@@ -1113,6 +1110,12 @@
   background-repeat: no-repeat;
 }
 
+@media screen and (max-width: 119.99rem) {
+  .wideFrame {
+    margin-inline: var(--page-gutter);
+  }
+}
+
 .wideGrid {
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(23rem, 1fr));
diff --git a/website/src/components/brand/styles/learning-hub-copilot-app.module.css b/website/src/components/brand/styles/learning-hub-copilot-app.module.css
index 6c6e02b1e3..2d832183b6 100644
--- a/website/src/components/brand/styles/learning-hub-copilot-app.module.css
+++ b/website/src/components/brand/styles/learning-hub-copilot-app.module.css
@@ -1940,13 +1940,10 @@
    catalog, inside the same frame: as many columns of at least 23rem as fit
    (three in the 1280px frame). The frame draws the top and left gridlines,
    and the right one beside an unfilled last row; each cell draws its own
-   right and bottom lines. */
+   right and bottom lines. It sits in the catalog's Section, so it shares the
+   1280px cap and, below 120rem, the same gutter inset as .catalog. */
 .wideFrame {
   width: auto;
-  margin-inline: max(
-    var(--page-gutter),
-    (100% - var(--brand-breakpoint-xlarge)) / 2
-  );
   border-inline-start: var(--brand-borderWidth-thin) solid
     var(--brand-color-border-muted);
   background-image: linear-gradient(
@@ -1958,6 +1955,12 @@
   background-repeat: no-repeat;
 }
 
+@media screen and (max-width: 119.99rem) {
+  .wideFrame {
+    margin-inline: var(--page-gutter);
+  }
+}
+
 .wideGrid {
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(23rem, 1fr));
diff --git a/website/src/components/brand/styles/plugins.module.css b/website/src/components/brand/styles/plugins.module.css
index 206f281d45..81ccb7c90f 100644
--- a/website/src/components/brand/styles/plugins.module.css
+++ b/website/src/components/brand/styles/plugins.module.css
@@ -1137,13 +1137,10 @@
    catalog, inside the same frame: as many columns of at least 23rem as fit
    (three in the 1280px frame). The frame draws the top and left gridlines,
    and the right one beside an unfilled last row; each cell draws its own
-   right and bottom lines. */
+   right and bottom lines. It sits in the catalog's Section, so it shares the
+   1280px cap and, below 120rem, the same gutter inset as .catalog. */
 .wideFrame {
   width: auto;
-  margin-inline: max(
-    var(--page-gutter),
-    (100% - var(--brand-breakpoint-xlarge)) / 2
-  );
   border-inline-start: var(--brand-borderWidth-thin) solid
     var(--brand-color-border-muted);
   background-image: linear-gradient(
@@ -1155,6 +1152,12 @@
   background-repeat: no-repeat;
 }
 
+@media screen and (max-width: 119.99rem) {
+  .wideFrame {
+    margin-inline: var(--page-gutter);
+  }
+}
+
 .wideGrid {
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(23rem, 1fr));
diff --git a/website/src/components/brand/styles/skills.module.css b/website/src/components/brand/styles/skills.module.css
index 305b6e3070..c36afedd88 100644
--- a/website/src/components/brand/styles/skills.module.css
+++ b/website/src/components/brand/styles/skills.module.css
@@ -1125,13 +1125,10 @@
    catalog, inside the same frame: as many columns of at least 23rem as fit
    (three in the 1280px frame). The frame draws the top and left gridlines,
    and the right one beside an unfilled last row; each cell draws its own
-   right and bottom lines. */
+   right and bottom lines. It sits in the catalog's Section, so it shares the
+   1280px cap and, below 120rem, the same gutter inset as .catalog. */
 .wideFrame {
   width: auto;
-  margin-inline: max(
-    var(--page-gutter),
-    (100% - var(--brand-breakpoint-xlarge)) / 2
-  );
   border-inline-start: var(--brand-borderWidth-thin) solid
     var(--brand-color-border-muted);
   background-image: linear-gradient(
@@ -1143,6 +1140,12 @@
   background-repeat: no-repeat;
 }
 
+@media screen and (max-width: 119.99rem) {
+  .wideFrame {
+    margin-inline: var(--page-gutter);
+  }
+}
+
 .wideGrid {
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(23rem, 1fr));
diff --git a/website/src/components/brand/useCatalogSplit.ts b/website/src/components/brand/useCatalogSplit.ts
index 1fca663ecb..c46a590229 100644
--- a/website/src/components/brand/useCatalogSplit.ts
+++ b/website/src/components/brand/useCatalogSplit.ts
@@ -1,75 +1,54 @@
-import {
-  useEffect,
-  useEffectEvent,
-  useLayoutEffect,
-  useRef,
-  useState,
-} from "react";
+import { useSyncExternalStore } from "react";
+
+/** The catalog stylesheets stack the filter sidebar above the cards here. */
+const STACKED_QUERY = "screen and (max-width: 63.25rem)";
+
+/** Seven rows of two cards stay beside the filter sidebar. */
+const CARDS_BESIDE = 14;
 
 /**
- * Splits a catalog page's cards between the grid beside the filter sidebar and
- * a wider grid below the catalog. A row stays beside the sidebar while it
- * starts above the end of the filter list, so the wide grid begins with the
- * first row the sidebar no longer reaches. When the sidebar stacks above the
- * cards (narrow screens), every card stays beside it.
+ * The wide grid shows two or three columns, so a count of cards below that is
+ * a multiple of six fills every wide row at either width.
  */
-export function useCatalogSplit<T>(items: readonly T[]) {
-  const filterNavRef = useRef<HTMLElement>(null);
-  const sideGridRef = useRef<HTMLDivElement>(null);
-  const [besideCount, setBesideCount] = useState(items.length);
-  const shown = Math.min(besideCount, items.length);
-
-  const measure = useEffectEvent(() => {
-    const nav = filterNavRef.current;
-    const grid = sideGridRef.current;
-    if (!nav || !grid) return;
-    const next = countBeside(nav, grid, shown, items.length);
-    if (next !== shown) setBesideCount(next);
-  });
+const WIDE_ROW_CARDS = 6;
 
-  // Page, sort, filter, page size, and "Show more" changes all re-render, so
-  // measure after every render, before the browser paints.
-  useLayoutEffect(() => measure());
+function subscribe(onChange: () => void) {
+  const query = window.matchMedia(STACKED_QUERY);
+  query.addEventListener("change", onChange);
+  return () => query.removeEventListener("change", onChange);
+}
 
-  // Viewport and font changes resize the side grid without a render.
-  useEffect(() => {
-    const grid = sideGridRef.current;
-    if (!grid) return;
-    const observer = new ResizeObserver(() => measure());
-    observer.observe(grid);
-    return () => observer.disconnect();
-  }, []);
+const isStacked = () => window.matchMedia(STACKED_QUERY).matches;
 
-  return {
-    filterNavRef,
-    sideGridRef,
-    beside: items.slice(0, shown),
-    below: items.slice(shown),
-  };
+/**
+ * Splits a catalog page's cards between the grid beside the filter sidebar and
+ * a wider grid below it. Fourteen cards (seven rows) stay beside the filters
+ * and the rest move to the wide grid, so a page of 14 or fewer cards, such as
+ * the default 6, never splits. When the sidebar stacks above the cards (narrow
+ * screens, and the server render), every card stays in the side grid.
+ */
+export function useCatalogSplit<T>(items: readonly T[]) {
+  const stacked = useSyncExternalStore(subscribe, isStacked, () => true);
+  const beside = stacked ? items.length : cardsBeside(items.length);
+  return { beside: items.slice(0, beside), below: items.slice(beside) };
 }
 
-function countBeside(
-  nav: HTMLElement,
-  grid: HTMLElement,
-  shown: number,
-  total: number,
-) {
-  // Stacked layout: the sidebar sits above the cards, not beside them.
-  const gridLeft = grid.getBoundingClientRect().left;
-  if (nav.getBoundingClientRect().right > gridLeft + 1) return total;
-  // The sidebar box stretches to the catalog's height, so the filter list
-  // ends at its last group (or Clear all) plus the sidebar's bottom padding.
-  const list = nav.lastElementChild?.lastElementChild ?? nav;
-  const navEnd =
-    list.getBoundingClientRect().bottom +
-    parseFloat(getComputedStyle(nav).paddingBlockEnd);
-  const cells = Array.from(grid.children);
-  const lastBottom = cells.at(-1)?.getBoundingClientRect().bottom ?? -Infinity;
-  // The side grid ends above the filters' end and cards are left over, so more
-  // rows fit. Rows touch (no row gap), so the next row starts at lastBottom:
-  // show every card for one layout pass, then cut at the first row below.
-  if (shown < total && lastBottom < navEnd) return total;
-  const startsBeside = (cell: Element) =>
-    cell.getBoundingClientRect().top < navEnd;
-  return cells.filter(startsBeside).length;
+/**
+ * Fourteen cards, or the nearest even count to it that leaves whole rows of
+ * six below, so the wide grid's last row is not left short: 14 for 20 or 50
+ * cards, 16 for 100. An odd count cannot fill both grids, so it keeps 14 and
+ * lets the wide grid end short, the way an odd count ends any grid.
+ */
+function cardsBeside(total: number) {
+  if (total <= CARDS_BESIDE) return total;
+  let best: number | null = null;
+  for (let count = 2; count < total; count += 2) {
+    if ((total - count) % WIDE_ROW_CARDS !== 0) continue;
+    const closer =
+      best === null ||
+      Math.abs(count - CARDS_BESIDE) < Math.abs(best - CARDS_BESIDE);
+    if (closer) best = count;
+  }
+  if (best !== null) return best;
+  return total - CARDS_BESIDE >= WIDE_ROW_CARDS ? CARDS_BESIDE : total;
 }

From 7bb02da06caa1fe3d56ac5a431b7ea195b791f67 Mon Sep 17 00:00:00 2001
From: John Haugabook <johnhaugabook@gmail.com>
Date: Wed, 28 Oct 2026 21:22:29 -0400
Subject: [PATCH 3/6] website-feature: split after four rows at 20 and 50 per
 page, five at 100

Replace the 14-card split with one keyed on the page size: 8 cards (four
rows) stay beside the filters at 20 and 50 per page and 10 (five rows) at
100, so full pages leave 12, 42, or 90 cards for the wide grid and every
wide row fills in two or three columns. 6 per page never splits. A shorter
last page or filtered list moves the cut by at most one row to keep the
wide rows full.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 .../src/components/brand/AgentsCatalog.tsx    |  2 +-
 .../components/brand/ExtensionsCatalog.tsx    |  2 +-
 .../components/brand/InstructionsCatalog.tsx  |  2 +-
 .../src/components/brand/LearningHubIndex.tsx |  2 +-
 .../src/components/brand/PluginsCatalog.tsx   |  2 +-
 .../src/components/brand/SkillsCatalog.tsx    |  2 +-
 .../src/components/brand/useCatalogSplit.ts   | 54 +++++++++++--------
 7 files changed, 37 insertions(+), 29 deletions(-)

diff --git a/website/src/components/brand/AgentsCatalog.tsx b/website/src/components/brand/AgentsCatalog.tsx
index e5289a6452..d54b4c5096 100644
--- a/website/src/components/brand/AgentsCatalog.tsx
+++ b/website/src/components/brand/AgentsCatalog.tsx
@@ -202,7 +202,7 @@ export function AgentsCatalog({
   const page = Math.min(currentPage, pageCount);
   const visibleAgents = sortedAgents.slice((page - 1) * pageSize, page * pageSize);
 
-  const { beside, below } = useCatalogSplit(visibleAgents);
+  const { beside, below } = useCatalogSplit(visibleAgents, pageSize);
 
   const renderAgentCard = (agent: AgentItem) => (
     <Box className={clsx(styles.item, styles.itemHover)}>
diff --git a/website/src/components/brand/ExtensionsCatalog.tsx b/website/src/components/brand/ExtensionsCatalog.tsx
index dfd2f79073..3b7c628bf2 100644
--- a/website/src/components/brand/ExtensionsCatalog.tsx
+++ b/website/src/components/brand/ExtensionsCatalog.tsx
@@ -250,7 +250,7 @@ export function ExtensionsCatalog({
     page * pageSize,
   );
 
-  const { beside, below } = useCatalogSplit(visibleExtensions);
+  const { beside, below } = useCatalogSplit(visibleExtensions, pageSize);
 
   const renderExtensionCard = (ext: ExtensionItem) => {
     const detailHref = pageHref(`extension/${ext.id}`);
diff --git a/website/src/components/brand/InstructionsCatalog.tsx b/website/src/components/brand/InstructionsCatalog.tsx
index 057ebc7a87..586727dadc 100644
--- a/website/src/components/brand/InstructionsCatalog.tsx
+++ b/website/src/components/brand/InstructionsCatalog.tsx
@@ -209,7 +209,7 @@ export function InstructionsCatalog({
     page * pageSize,
   );
 
-  const { beside, below } = useCatalogSplit(visibleInstructions);
+  const { beside, below } = useCatalogSplit(visibleInstructions, pageSize);
 
   const renderInstructionCard = (item: InstructionItem) => (
     <Box className={clsx(styles.item, styles.itemHover)}>
diff --git a/website/src/components/brand/LearningHubIndex.tsx b/website/src/components/brand/LearningHubIndex.tsx
index 84395e9fe2..ed2f5f75c4 100644
--- a/website/src/components/brand/LearningHubIndex.tsx
+++ b/website/src/components/brand/LearningHubIndex.tsx
@@ -433,7 +433,7 @@ function LearningHubIndexBody({
     page * pageSize,
   );
 
-  const { beside, below } = useCatalogSplit(visibleEntries);
+  const { beside, below } = useCatalogSplit(visibleEntries, pageSize);
 
   const renderEntryCard = (entry: Entry) => (
     <Box className={clsx(styles.item, styles.itemHover)}>
diff --git a/website/src/components/brand/PluginsCatalog.tsx b/website/src/components/brand/PluginsCatalog.tsx
index f546a2a15f..cbfaedde0b 100644
--- a/website/src/components/brand/PluginsCatalog.tsx
+++ b/website/src/components/brand/PluginsCatalog.tsx
@@ -209,7 +209,7 @@ export function PluginsCatalog({
     page * pageSize,
   );
 
-  const { beside, below } = useCatalogSplit(visiblePlugins);
+  const { beside, below } = useCatalogSplit(visiblePlugins, pageSize);
 
   const renderPluginCard = (plugin: PluginItem) => (
     <Box className={clsx(styles.item, styles.itemHover)}>
diff --git a/website/src/components/brand/SkillsCatalog.tsx b/website/src/components/brand/SkillsCatalog.tsx
index dd672df1bc..a4a85a4c47 100644
--- a/website/src/components/brand/SkillsCatalog.tsx
+++ b/website/src/components/brand/SkillsCatalog.tsx
@@ -184,7 +184,7 @@ export function SkillsCatalog({
   const page = Math.min(currentPage, pageCount);
   const visibleSkills = sortedSkills.slice((page - 1) * pageSize, page * pageSize);
 
-  const { beside, below } = useCatalogSplit(visibleSkills);
+  const { beside, below } = useCatalogSplit(visibleSkills, pageSize);
 
   const renderSkillCard = (skill: SkillItem) => (
     <Box className={clsx(styles.item, styles.itemHover)}>
diff --git a/website/src/components/brand/useCatalogSplit.ts b/website/src/components/brand/useCatalogSplit.ts
index c46a590229..5eaecf20b6 100644
--- a/website/src/components/brand/useCatalogSplit.ts
+++ b/website/src/components/brand/useCatalogSplit.ts
@@ -1,10 +1,17 @@
 import { useSyncExternalStore } from "react";
 
+import type { CatalogResourceSize } from "./CatalogResourceSizeControl";
+
 /** The catalog stylesheets stack the filter sidebar above the cards here. */
 const STACKED_QUERY = "screen and (max-width: 63.25rem)";
 
-/** Seven rows of two cards stay beside the filter sidebar. */
-const CARDS_BESIDE = 14;
+/** Rows of two cards that stay beside the filter sidebar, by page size. */
+const ROWS_BESIDE: Record<CatalogResourceSize, number> = {
+  6: 0,
+  20: 4,
+  50: 4,
+  100: 5,
+};
 
 /**
  * The wide grid shows two or three columns, so a count of cards below that is
@@ -22,33 +29,34 @@ const isStacked = () => window.matchMedia(STACKED_QUERY).matches;
 
 /**
  * Splits a catalog page's cards between the grid beside the filter sidebar and
- * a wider grid below it. Fourteen cards (seven rows) stay beside the filters
- * and the rest move to the wide grid, so a page of 14 or fewer cards, such as
- * the default 6, never splits. When the sidebar stacks above the cards (narrow
- * screens, and the server render), every card stays in the side grid.
+ * a wider grid below it: four rows stay beside the filters at 20 and 50 per
+ * page, five at 100, and the default 6 never splits. When the sidebar stacks
+ * above the cards (narrow screens, and the server render), every card stays
+ * in the side grid.
  */
-export function useCatalogSplit<T>(items: readonly T[]) {
+export function useCatalogSplit<T>(
+  items: readonly T[],
+  pageSize: CatalogResourceSize,
+) {
   const stacked = useSyncExternalStore(subscribe, isStacked, () => true);
-  const beside = stacked ? items.length : cardsBeside(items.length);
+  const beside = stacked
+    ? items.length
+    : cardsBeside(items.length, ROWS_BESIDE[pageSize] * 2);
   return { beside: items.slice(0, beside), below: items.slice(beside) };
 }
 
 /**
- * Fourteen cards, or the nearest even count to it that leaves whole rows of
- * six below, so the wide grid's last row is not left short: 14 for 20 or 50
- * cards, 16 for 100. An odd count cannot fill both grids, so it keeps 14 and
- * lets the wide grid end short, the way an odd count ends any grid.
+ * A full page leaves a multiple of six below the cut: 20 - 8, 50 - 8, and
+ * 100 - 10. A shorter list (a last page or a filter) moves the cut by at most
+ * one row to keep that, and a list within a row of the cut stays beside. An
+ * odd count cannot fill rows of two and of three at once, so it keeps the cut
+ * and lets the wide grid end short, the way an odd count ends any grid.
  */
-function cardsBeside(total: number) {
-  if (total <= CARDS_BESIDE) return total;
-  let best: number | null = null;
-  for (let count = 2; count < total; count += 2) {
-    if ((total - count) % WIDE_ROW_CARDS !== 0) continue;
-    const closer =
-      best === null ||
-      Math.abs(count - CARDS_BESIDE) < Math.abs(best - CARDS_BESIDE);
-    if (closer) best = count;
+function cardsBeside(total: number, cut: number) {
+  if (cut === 0 || total <= cut) return total;
+  for (const count of [cut, cut + 2, cut - 2]) {
+    if (count >= total) return total;
+    if ((total - count) % WIDE_ROW_CARDS === 0) return count;
   }
-  if (best !== null) return best;
-  return total - CARDS_BESIDE >= WIDE_ROW_CARDS ? CARDS_BESIDE : total;
+  return total - cut >= WIDE_ROW_CARDS ? cut : total;
 }

From 955cb9503d527fd9baf4075cbd50058d677d13a3 Mon Sep 17 00:00:00 2001
From: John Haugabook <johnhaugabook@gmail.com>
Date: Wed, 28 Oct 2026 21:59:04 -0400
Subject: [PATCH 4/6] website-feature: split where the filter list ends, center
 short wide rows

- Pages of 20, 50, and 100 split where the filter list ends again: a row
  stays beside the filters while it starts above the list's end, so pages
  with short filter lists widen sooner. 6 per page never splits.
- useCatalogSplit measures again, with the review fixes: it grows or cuts
  one whole row at a time, starts at Infinity so stacked layouts never
  mount a wide grid, keeps the split when a change would only undo the
  previous one (the scrollbar loop), and watches the filter groups.
- On every page but the last, a short last row in the three-column wide
  grid is centered: one card under the middle column, or two cards
  shifted half a column. CSS only, with :nth-child, a container query on
  the wide frame, and relative positioning.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 .../src/components/brand/AgentsCatalog.tsx    |  17 +-
 .../components/brand/ExtensionsCatalog.tsx    |  17 +-
 .../components/brand/InstructionsCatalog.tsx  |  17 +-
 .../src/components/brand/LearningHubIndex.tsx |  17 +-
 .../src/components/brand/PluginsCatalog.tsx   |  17 +-
 .../src/components/brand/SkillsCatalog.tsx    |  17 +-
 .../components/brand/styles/agents.module.css |  26 +++
 .../brand/styles/extensions.module.css        |  26 +++
 .../brand/styles/instructions.module.css      |  26 +++
 .../learning-hub-copilot-app.module.css       |  26 +++
 .../brand/styles/plugins.module.css           |  26 +++
 .../components/brand/styles/skills.module.css |  26 +++
 .../src/components/brand/useCatalogSplit.ts   | 187 +++++++++++++-----
 13 files changed, 382 insertions(+), 63 deletions(-)

diff --git a/website/src/components/brand/AgentsCatalog.tsx b/website/src/components/brand/AgentsCatalog.tsx
index d54b4c5096..1cf2c2c61e 100644
--- a/website/src/components/brand/AgentsCatalog.tsx
+++ b/website/src/components/brand/AgentsCatalog.tsx
@@ -202,7 +202,8 @@ export function AgentsCatalog({
   const page = Math.min(currentPage, pageCount);
   const visibleAgents = sortedAgents.slice((page - 1) * pageSize, page * pageSize);
 
-  const { beside, below } = useCatalogSplit(visibleAgents, pageSize);
+  const { filterNavRef, sideGridRef, beside, below } =
+    useCatalogSplit(visibleAgents, pageSize);
 
   const renderAgentCard = (agent: AgentItem) => (
     <Box className={clsx(styles.item, styles.itemHover)}>
@@ -293,7 +294,11 @@ export function AgentsCatalog({
         paddingBlockEnd="none"
       >
         <Box className={styles.catalog}>
-          <aside className={styles.filterNav} aria-label="Filter agents">
+          <aside
+            ref={filterNavRef}
+            className={styles.filterNav}
+            aria-label="Filter agents"
+          >
             <button
               type="button"
               className={styles.filterToggle}
@@ -400,6 +405,7 @@ export function AgentsCatalog({
             <Box className={styles.gridFrame} data-mode={colorMode}>
               <Box className={styles.gridContent}>
                 <Grid
+                  ref={sideGridRef}
                   className={clsx(
                     styles.threeUp,
                     below.length > 0 && styles.threeUpSplit,
@@ -435,7 +441,12 @@ export function AgentsCatalog({
             className={clsx(styles.gridFrame, styles.wideFrame)}
             data-mode={colorMode}
           >
-            <div className={styles.wideGrid}>
+            <div
+              className={clsx(
+                styles.wideGrid,
+                page < pageCount && styles.wideGridCentered,
+              )}
+            >
               {below.map((agent) => (
                 <div key={agent.id} className={styles.col}>
                   {renderAgentCard(agent)}
diff --git a/website/src/components/brand/ExtensionsCatalog.tsx b/website/src/components/brand/ExtensionsCatalog.tsx
index 3b7c628bf2..b34e91f793 100644
--- a/website/src/components/brand/ExtensionsCatalog.tsx
+++ b/website/src/components/brand/ExtensionsCatalog.tsx
@@ -250,7 +250,8 @@ export function ExtensionsCatalog({
     page * pageSize,
   );
 
-  const { beside, below } = useCatalogSplit(visibleExtensions, pageSize);
+  const { filterNavRef, sideGridRef, beside, below } =
+    useCatalogSplit(visibleExtensions, pageSize);
 
   const renderExtensionCard = (ext: ExtensionItem) => {
     const detailHref = pageHref(`extension/${ext.id}`);
@@ -377,7 +378,11 @@ export function ExtensionsCatalog({
         paddingBlockEnd="none"
       >
         <Box className={styles.catalog}>
-          <aside className={styles.filterNav} aria-label="Filter extensions">
+          <aside
+            ref={filterNavRef}
+            className={styles.filterNav}
+            aria-label="Filter extensions"
+          >
             <button
               type="button"
               className={styles.filterToggle}
@@ -484,6 +489,7 @@ export function ExtensionsCatalog({
             <Box className={styles.gridFrame} data-mode={colorMode}>
               <Box className={styles.gridContent}>
                 <Grid
+                  ref={sideGridRef}
                   className={clsx(
                     styles.threeUp,
                     below.length > 0 && styles.threeUpSplit,
@@ -519,7 +525,12 @@ export function ExtensionsCatalog({
             className={clsx(styles.gridFrame, styles.wideFrame)}
             data-mode={colorMode}
           >
-            <div className={styles.wideGrid}>
+            <div
+              className={clsx(
+                styles.wideGrid,
+                page < pageCount && styles.wideGridCentered,
+              )}
+            >
               {below.map((ext) => (
                 <div key={ext.id} className={styles.col}>
                   {renderExtensionCard(ext)}
diff --git a/website/src/components/brand/InstructionsCatalog.tsx b/website/src/components/brand/InstructionsCatalog.tsx
index 586727dadc..5d02409bbb 100644
--- a/website/src/components/brand/InstructionsCatalog.tsx
+++ b/website/src/components/brand/InstructionsCatalog.tsx
@@ -209,7 +209,8 @@ export function InstructionsCatalog({
     page * pageSize,
   );
 
-  const { beside, below } = useCatalogSplit(visibleInstructions, pageSize);
+  const { filterNavRef, sideGridRef, beside, below } =
+    useCatalogSplit(visibleInstructions, pageSize);
 
   const renderInstructionCard = (item: InstructionItem) => (
     <Box className={clsx(styles.item, styles.itemHover)}>
@@ -300,7 +301,11 @@ export function InstructionsCatalog({
 
       <Section id="catalog" tabIndex={-1} paddingBlockStart="none" paddingBlockEnd="none">
         <Box className={styles.catalog}>
-          <aside className={styles.filterNav} aria-label="Filter instructions">
+          <aside
+            ref={filterNavRef}
+            className={styles.filterNav}
+            aria-label="Filter instructions"
+          >
             <button
               type="button"
               className={styles.filterToggle}
@@ -407,6 +412,7 @@ export function InstructionsCatalog({
             <Box className={styles.gridFrame} data-mode={colorMode}>
               <Box className={styles.gridContent}>
                 <Grid
+                  ref={sideGridRef}
                   className={clsx(
                     styles.threeUp,
                     below.length > 0 && styles.threeUpSplit,
@@ -442,7 +448,12 @@ export function InstructionsCatalog({
             className={clsx(styles.gridFrame, styles.wideFrame)}
             data-mode={colorMode}
           >
-            <div className={styles.wideGrid}>
+            <div
+              className={clsx(
+                styles.wideGrid,
+                page < pageCount && styles.wideGridCentered,
+              )}
+            >
               {below.map((item) => (
                 <div key={item.id} className={styles.col}>
                   {renderInstructionCard(item)}
diff --git a/website/src/components/brand/LearningHubIndex.tsx b/website/src/components/brand/LearningHubIndex.tsx
index ed2f5f75c4..0895244ee6 100644
--- a/website/src/components/brand/LearningHubIndex.tsx
+++ b/website/src/components/brand/LearningHubIndex.tsx
@@ -433,7 +433,8 @@ function LearningHubIndexBody({
     page * pageSize,
   );
 
-  const { beside, below } = useCatalogSplit(visibleEntries, pageSize);
+  const { filterNavRef, sideGridRef, beside, below } =
+    useCatalogSplit(visibleEntries, pageSize);
 
   const renderEntryCard = (entry: Entry) => (
     <Box className={clsx(styles.item, styles.itemHover)}>
@@ -797,7 +798,11 @@ function LearningHubIndexBody({
           </button>
         </div>
         <Box className={styles.catalog}>
-          <aside className={styles.filterNav} aria-label="Filter guide sections">
+          <aside
+            ref={filterNavRef}
+            className={styles.filterNav}
+            aria-label="Filter guide sections"
+          >
             <div
               className={clsx(
                 styles.filterBody,
@@ -843,6 +848,7 @@ function LearningHubIndexBody({
             <Box className={styles.gridFrame} data-mode={colorMode}>
               <Box className={styles.gridContent}>
                 <Grid
+                  ref={sideGridRef}
                   className={clsx(
                     styles.threeUp,
                     below.length > 0 && styles.threeUpSplit,
@@ -878,7 +884,12 @@ function LearningHubIndexBody({
             className={clsx(styles.gridFrame, styles.wideFrame)}
             data-mode={colorMode}
           >
-            <div className={styles.wideGrid}>
+            <div
+              className={clsx(
+                styles.wideGrid,
+                page < pageCount && styles.wideGridCentered,
+              )}
+            >
               {below.map((entry) => (
                 <div key={entry.id} className={styles.col}>
                   {renderEntryCard(entry)}
diff --git a/website/src/components/brand/PluginsCatalog.tsx b/website/src/components/brand/PluginsCatalog.tsx
index cbfaedde0b..daba481746 100644
--- a/website/src/components/brand/PluginsCatalog.tsx
+++ b/website/src/components/brand/PluginsCatalog.tsx
@@ -209,7 +209,8 @@ export function PluginsCatalog({
     page * pageSize,
   );
 
-  const { beside, below } = useCatalogSplit(visiblePlugins, pageSize);
+  const { filterNavRef, sideGridRef, beside, below } =
+    useCatalogSplit(visiblePlugins, pageSize);
 
   const renderPluginCard = (plugin: PluginItem) => (
     <Box className={clsx(styles.item, styles.itemHover)}>
@@ -292,7 +293,11 @@ export function PluginsCatalog({
         paddingBlockEnd="none"
       >
         <Box className={styles.catalog}>
-          <aside className={styles.filterNav} aria-label="Filter plugins">
+          <aside
+            ref={filterNavRef}
+            className={styles.filterNav}
+            aria-label="Filter plugins"
+          >
             <button
               type="button"
               className={styles.filterToggle}
@@ -399,6 +404,7 @@ export function PluginsCatalog({
             <Box className={styles.gridFrame} data-mode={colorMode}>
               <Box className={styles.gridContent}>
                 <Grid
+                  ref={sideGridRef}
                   className={clsx(
                     styles.threeUp,
                     below.length > 0 && styles.threeUpSplit,
@@ -434,7 +440,12 @@ export function PluginsCatalog({
             className={clsx(styles.gridFrame, styles.wideFrame)}
             data-mode={colorMode}
           >
-            <div className={styles.wideGrid}>
+            <div
+              className={clsx(
+                styles.wideGrid,
+                page < pageCount && styles.wideGridCentered,
+              )}
+            >
               {below.map((plugin) => (
                 <div key={plugin.id} className={styles.col}>
                   {renderPluginCard(plugin)}
diff --git a/website/src/components/brand/SkillsCatalog.tsx b/website/src/components/brand/SkillsCatalog.tsx
index a4a85a4c47..e6eb9785c5 100644
--- a/website/src/components/brand/SkillsCatalog.tsx
+++ b/website/src/components/brand/SkillsCatalog.tsx
@@ -184,7 +184,8 @@ export function SkillsCatalog({
   const page = Math.min(currentPage, pageCount);
   const visibleSkills = sortedSkills.slice((page - 1) * pageSize, page * pageSize);
 
-  const { beside, below } = useCatalogSplit(visibleSkills, pageSize);
+  const { filterNavRef, sideGridRef, beside, below } =
+    useCatalogSplit(visibleSkills, pageSize);
 
   const renderSkillCard = (skill: SkillItem) => (
     <Box className={clsx(styles.item, styles.itemHover)}>
@@ -260,7 +261,11 @@ export function SkillsCatalog({
 
       <Section id="catalog" tabIndex={-1} paddingBlockStart="none" paddingBlockEnd="none">
         <Box className={styles.catalog}>
-          <aside className={styles.filterNav} aria-label="Filter skills">
+          <aside
+            ref={filterNavRef}
+            className={styles.filterNav}
+            aria-label="Filter skills"
+          >
             <button
               type="button"
               className={styles.filterToggle}
@@ -365,6 +370,7 @@ export function SkillsCatalog({
             <Box className={styles.gridFrame} data-mode={colorMode}>
               <Box className={styles.gridContent}>
                 <Grid
+                  ref={sideGridRef}
                   className={clsx(
                     styles.threeUp,
                     below.length > 0 && styles.threeUpSplit,
@@ -400,7 +406,12 @@ export function SkillsCatalog({
             className={clsx(styles.gridFrame, styles.wideFrame)}
             data-mode={colorMode}
           >
-            <div className={styles.wideGrid}>
+            <div
+              className={clsx(
+                styles.wideGrid,
+                page < pageCount && styles.wideGridCentered,
+              )}
+            >
               {below.map((skill) => (
                 <div key={skill.id} className={styles.col}>
                   {renderSkillCard(skill)}
diff --git a/website/src/components/brand/styles/agents.module.css b/website/src/components/brand/styles/agents.module.css
index 6a552a4c2a..69c8f9c087 100644
--- a/website/src/components/brand/styles/agents.module.css
+++ b/website/src/components/brand/styles/agents.module.css
@@ -1110,6 +1110,7 @@
    1280px cap and, below 120rem, the same gutter inset as .catalog. */
 .wideFrame {
   width: auto;
+  container-type: inline-size;
   border-inline-start: var(--brand-borderWidth-thin) solid
     var(--brand-color-border-muted);
   background-image: linear-gradient(
@@ -1140,6 +1141,31 @@
     var(--brand-color-border-muted);
 }
 
+/* Except on the last page, a short last row in the three-column wide grid
+   (3 x 23rem of frame) 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 first shifted card draws its own left
+   line. Two columns never end short before the last page, because page sizes
+   are even and the side grid holds whole rows of two. */
+@container (width >= 69rem) {
+  .wideGridCentered > .col:nth-child(3n + 1):last-child {
+    position: relative;
+    inset-inline-start: 100%;
+  }
+
+  .wideGridCentered > .col:nth-child(3n + 1):nth-last-child(2),
+  .wideGridCentered > .col:nth-child(3n + 2):last-child {
+    position: relative;
+    inset-inline-start: 50%;
+  }
+
+  .wideGridCentered > .col:nth-child(3n + 1):last-child .item,
+  .wideGridCentered > .col:nth-child(3n + 1):nth-last-child(2) .item {
+    border-inline-start: var(--brand-borderWidth-thin) solid
+      var(--brand-color-border-muted);
+  }
+}
+
 /*
  * Responsive page gutters (mirrors styles.module.css; see there for the tier
  * rationale): <768→20 · 768–1279→91 · 1280–1919→at least 152 · ≥1920→native 1280.
diff --git a/website/src/components/brand/styles/extensions.module.css b/website/src/components/brand/styles/extensions.module.css
index a1f782a501..545d4f3df3 100644
--- a/website/src/components/brand/styles/extensions.module.css
+++ b/website/src/components/brand/styles/extensions.module.css
@@ -1214,6 +1214,7 @@
    1280px cap and, below 120rem, the same gutter inset as .catalog. */
 .wideFrame {
   width: auto;
+  container-type: inline-size;
   border-inline-start: var(--brand-borderWidth-thin) solid
     var(--brand-color-border-muted);
   background-image: linear-gradient(
@@ -1244,6 +1245,31 @@
     var(--brand-color-border-muted);
 }
 
+/* Except on the last page, a short last row in the three-column wide grid
+   (3 x 23rem of frame) 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 first shifted card draws its own left
+   line. Two columns never end short before the last page, because page sizes
+   are even and the side grid holds whole rows of two. */
+@container (width >= 69rem) {
+  .wideGridCentered > .col:nth-child(3n + 1):last-child {
+    position: relative;
+    inset-inline-start: 100%;
+  }
+
+  .wideGridCentered > .col:nth-child(3n + 1):nth-last-child(2),
+  .wideGridCentered > .col:nth-child(3n + 2):last-child {
+    position: relative;
+    inset-inline-start: 50%;
+  }
+
+  .wideGridCentered > .col:nth-child(3n + 1):last-child .item,
+  .wideGridCentered > .col:nth-child(3n + 1):nth-last-child(2) .item {
+    border-inline-start: var(--brand-borderWidth-thin) solid
+      var(--brand-color-border-muted);
+  }
+}
+
 /*
  * Responsive page gutters (mirrors styles.module.css; see there for the tier
  * rationale): <768→20 · 768–1279→91 · 1280–1919→at least 152 · ≥1920→native 1280.
diff --git a/website/src/components/brand/styles/instructions.module.css b/website/src/components/brand/styles/instructions.module.css
index 831d1376e2..c6723042d5 100644
--- a/website/src/components/brand/styles/instructions.module.css
+++ b/website/src/components/brand/styles/instructions.module.css
@@ -1099,6 +1099,7 @@
    1280px cap and, below 120rem, the same gutter inset as .catalog. */
 .wideFrame {
   width: auto;
+  container-type: inline-size;
   border-inline-start: var(--brand-borderWidth-thin) solid
     var(--brand-color-border-muted);
   background-image: linear-gradient(
@@ -1129,6 +1130,31 @@
     var(--brand-color-border-muted);
 }
 
+/* Except on the last page, a short last row in the three-column wide grid
+   (3 x 23rem of frame) 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 first shifted card draws its own left
+   line. Two columns never end short before the last page, because page sizes
+   are even and the side grid holds whole rows of two. */
+@container (width >= 69rem) {
+  .wideGridCentered > .col:nth-child(3n + 1):last-child {
+    position: relative;
+    inset-inline-start: 100%;
+  }
+
+  .wideGridCentered > .col:nth-child(3n + 1):nth-last-child(2),
+  .wideGridCentered > .col:nth-child(3n + 2):last-child {
+    position: relative;
+    inset-inline-start: 50%;
+  }
+
+  .wideGridCentered > .col:nth-child(3n + 1):last-child .item,
+  .wideGridCentered > .col:nth-child(3n + 1):nth-last-child(2) .item {
+    border-inline-start: var(--brand-borderWidth-thin) solid
+      var(--brand-color-border-muted);
+  }
+}
+
 /*
  * Responsive page gutters (mirrors styles.module.css; see there for the tier
  * rationale): <768→20 · 768–1279→91 · 1280–1919→at least 152 · ≥1920→native 1280.
diff --git a/website/src/components/brand/styles/learning-hub-copilot-app.module.css b/website/src/components/brand/styles/learning-hub-copilot-app.module.css
index 2d832183b6..cca3c69a26 100644
--- a/website/src/components/brand/styles/learning-hub-copilot-app.module.css
+++ b/website/src/components/brand/styles/learning-hub-copilot-app.module.css
@@ -1944,6 +1944,7 @@
    1280px cap and, below 120rem, the same gutter inset as .catalog. */
 .wideFrame {
   width: auto;
+  container-type: inline-size;
   border-inline-start: var(--brand-borderWidth-thin) solid
     var(--brand-color-border-muted);
   background-image: linear-gradient(
@@ -1974,6 +1975,31 @@
     var(--brand-color-border-muted);
 }
 
+/* Except on the last page, a short last row in the three-column wide grid
+   (3 x 23rem of frame) 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 first shifted card draws its own left
+   line. Two columns never end short before the last page, because page sizes
+   are even and the side grid holds whole rows of two. */
+@container (width >= 69rem) {
+  .wideGridCentered > .col:nth-child(3n + 1):last-child {
+    position: relative;
+    inset-inline-start: 100%;
+  }
+
+  .wideGridCentered > .col:nth-child(3n + 1):nth-last-child(2),
+  .wideGridCentered > .col:nth-child(3n + 2):last-child {
+    position: relative;
+    inset-inline-start: 50%;
+  }
+
+  .wideGridCentered > .col:nth-child(3n + 1):last-child .item,
+  .wideGridCentered > .col:nth-child(3n + 1):nth-last-child(2) .item {
+    border-inline-start: var(--brand-borderWidth-thin) solid
+      var(--brand-color-border-muted);
+  }
+}
+
 /*
  * Responsive page gutters (mirrors styles.module.css; see there for the tier
  * rationale): <768→20 · 768–1279→91 · 1280–1919→at least 152 · ≥1920→native 1280.
diff --git a/website/src/components/brand/styles/plugins.module.css b/website/src/components/brand/styles/plugins.module.css
index 81ccb7c90f..dca7ce5167 100644
--- a/website/src/components/brand/styles/plugins.module.css
+++ b/website/src/components/brand/styles/plugins.module.css
@@ -1141,6 +1141,7 @@
    1280px cap and, below 120rem, the same gutter inset as .catalog. */
 .wideFrame {
   width: auto;
+  container-type: inline-size;
   border-inline-start: var(--brand-borderWidth-thin) solid
     var(--brand-color-border-muted);
   background-image: linear-gradient(
@@ -1171,6 +1172,31 @@
     var(--brand-color-border-muted);
 }
 
+/* Except on the last page, a short last row in the three-column wide grid
+   (3 x 23rem of frame) 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 first shifted card draws its own left
+   line. Two columns never end short before the last page, because page sizes
+   are even and the side grid holds whole rows of two. */
+@container (width >= 69rem) {
+  .wideGridCentered > .col:nth-child(3n + 1):last-child {
+    position: relative;
+    inset-inline-start: 100%;
+  }
+
+  .wideGridCentered > .col:nth-child(3n + 1):nth-last-child(2),
+  .wideGridCentered > .col:nth-child(3n + 2):last-child {
+    position: relative;
+    inset-inline-start: 50%;
+  }
+
+  .wideGridCentered > .col:nth-child(3n + 1):last-child .item,
+  .wideGridCentered > .col:nth-child(3n + 1):nth-last-child(2) .item {
+    border-inline-start: var(--brand-borderWidth-thin) solid
+      var(--brand-color-border-muted);
+  }
+}
+
 /*
  * Responsive page gutters (mirrors styles.module.css; see there for the tier
  * rationale): <768→20 · 768–1279→91 · 1280–1919→at least 152 · ≥1920→native 1280.
diff --git a/website/src/components/brand/styles/skills.module.css b/website/src/components/brand/styles/skills.module.css
index c36afedd88..54092099e4 100644
--- a/website/src/components/brand/styles/skills.module.css
+++ b/website/src/components/brand/styles/skills.module.css
@@ -1129,6 +1129,7 @@
    1280px cap and, below 120rem, the same gutter inset as .catalog. */
 .wideFrame {
   width: auto;
+  container-type: inline-size;
   border-inline-start: var(--brand-borderWidth-thin) solid
     var(--brand-color-border-muted);
   background-image: linear-gradient(
@@ -1159,6 +1160,31 @@
     var(--brand-color-border-muted);
 }
 
+/* Except on the last page, a short last row in the three-column wide grid
+   (3 x 23rem of frame) 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 first shifted card draws its own left
+   line. Two columns never end short before the last page, because page sizes
+   are even and the side grid holds whole rows of two. */
+@container (width >= 69rem) {
+  .wideGridCentered > .col:nth-child(3n + 1):last-child {
+    position: relative;
+    inset-inline-start: 100%;
+  }
+
+  .wideGridCentered > .col:nth-child(3n + 1):nth-last-child(2),
+  .wideGridCentered > .col:nth-child(3n + 2):last-child {
+    position: relative;
+    inset-inline-start: 50%;
+  }
+
+  .wideGridCentered > .col:nth-child(3n + 1):last-child .item,
+  .wideGridCentered > .col:nth-child(3n + 1):nth-last-child(2) .item {
+    border-inline-start: var(--brand-borderWidth-thin) solid
+      var(--brand-color-border-muted);
+  }
+}
+
 /*
  * Responsive page gutters (mirrors styles.module.css; see there for the tier
  * rationale): <768→20 · 768–1279→91 · 1280–1919→at least 152 · ≥1920→native 1280.
diff --git a/website/src/components/brand/useCatalogSplit.ts b/website/src/components/brand/useCatalogSplit.ts
index 5eaecf20b6..ae0b4adcf5 100644
--- a/website/src/components/brand/useCatalogSplit.ts
+++ b/website/src/components/brand/useCatalogSplit.ts
@@ -1,62 +1,159 @@
-import { useSyncExternalStore } from "react";
+import {
+  useEffect,
+  useEffectEvent,
+  useLayoutEffect,
+  useRef,
+  useState,
+} from "react";
 
-import type { CatalogResourceSize } from "./CatalogResourceSizeControl";
+import {
+  DEFAULT_CATALOG_RESOURCE_SIZE,
+  type CatalogResourceSize,
+} from "./CatalogResourceSizeControl";
 
-/** The catalog stylesheets stack the filter sidebar above the cards here. */
-const STACKED_QUERY = "screen and (max-width: 63.25rem)";
-
-/** Rows of two cards that stay beside the filter sidebar, by page size. */
-const ROWS_BESIDE: Record<CatalogResourceSize, number> = {
-  6: 0,
-  20: 4,
-  50: 4,
-  100: 5,
+/** Everything a split decision depends on, apart from the page's scrollbar. */
+type SplitInputs = {
+  viewport: string;
+  navEnd: number;
+  length: number;
+  first: unknown;
+  last: unknown;
 };
 
-/**
- * The wide grid shows two or three columns, so a count of cards below that is
- * a multiple of six fills every wide row at either width.
- */
-const WIDE_ROW_CARDS = 6;
-
-function subscribe(onChange: () => void) {
-  const query = window.matchMedia(STACKED_QUERY);
-  query.addEventListener("change", onChange);
-  return () => query.removeEventListener("change", onChange);
-}
-
-const isStacked = () => window.matchMedia(STACKED_QUERY).matches;
-
 /**
  * Splits a catalog page's cards between the grid beside the filter sidebar and
- * a wider grid below it: four rows stay beside the filters at 20 and 50 per
- * page, five at 100, and the default 6 never splits. When the sidebar stacks
- * above the cards (narrow screens, and the server render), every card stays
- * in the side grid.
+ * a wider grid below it. A row stays beside the sidebar while it starts above
+ * the end of the filter list, so the wide grid begins with the first row the
+ * sidebar no longer reaches. The default page size never splits, and when the
+ * sidebar stacks above the cards (narrow screens), every card stays in the
+ * side grid.
  */
 export function useCatalogSplit<T>(
   items: readonly T[],
   pageSize: CatalogResourceSize,
 ) {
-  const stacked = useSyncExternalStore(subscribe, isStacked, () => true);
-  const beside = stacked
-    ? items.length
-    : cardsBeside(items.length, ROWS_BESIDE[pageSize] * 2);
-  return { beside: items.slice(0, beside), below: items.slice(beside) };
+  const filterNavRef = useRef<HTMLElement>(null);
+  const sideGridRef = useRef<HTMLDivElement>(null);
+  const splits = pageSize !== DEFAULT_CATALOG_RESOURCE_SIZE;
+  // Infinity until a measurement cuts the list, so a stacked layout or a
+  // longer list never mounts a wide grid only to tear it down again.
+  const [besideCount, setBesideCount] = useState(Infinity);
+  const shown = splits ? Math.min(besideCount, items.length) : items.length;
+  const lastChange = useRef<{
+    inputs: SplitInputs;
+    from: number;
+    to: number;
+  } | null>(null);
+
+  const measure = useEffectEvent(() => {
+    const nav = filterNavRef.current;
+    const grid = sideGridRef.current;
+    if (!splits || !nav || !grid || items.length === 0) return;
+    const navEnd = filterListEnd(nav);
+    const next = countBeside(nav, grid, navEnd, shown, items.length);
+    if (next === besideCount) return;
+    // Keep a larger stored count when it already shows the right cards, but
+    // store the first finite count, so a longer list later grows row by row.
+    if (next === shown && besideCount !== Infinity) return;
+    // Moving cards changes the page height, which can add or remove the
+    // vertical scrollbar and so the grid's width. If a change would only undo
+    // the previous one while nothing else moved, keep the current split.
+    const inputs: SplitInputs = {
+      viewport: `${window.innerWidth}x${window.innerHeight}`,
+      navEnd: Math.round(navEnd - nav.getBoundingClientRect().top),
+      length: items.length,
+      first: items[0],
+      last: items[items.length - 1],
+    };
+    const previous = lastChange.current;
+    if (
+      previous &&
+      previous.from === next &&
+      previous.to === besideCount &&
+      sameInputs(previous.inputs, inputs)
+    ) {
+      return;
+    }
+    lastChange.current = { inputs, from: besideCount, to: next };
+    setBesideCount(next);
+  });
+
+  // Page, sort, filter, page size, and "Show more" changes all re-render, so
+  // measure after every render, before the browser paints.
+  useLayoutEffect(() => measure());
+
+  // Viewport changes resize the side grid, and font loads can reflow the
+  // filter groups without a render, so watch both.
+  useEffect(() => {
+    const grid = sideGridRef.current;
+    const nav = filterNavRef.current;
+    if (!grid || !nav) return;
+    const observer = new ResizeObserver(() => measure());
+    observer.observe(grid);
+    for (const group of nav.lastElementChild?.children ?? []) {
+      observer.observe(group);
+    }
+    return () => observer.disconnect();
+  }, []);
+
+  return {
+    filterNavRef,
+    sideGridRef,
+    beside: items.slice(0, shown),
+    below: items.slice(shown),
+  };
 }
 
 /**
- * A full page leaves a multiple of six below the cut: 20 - 8, 50 - 8, and
- * 100 - 10. A shorter list (a last page or a filter) moves the cut by at most
- * one row to keep that, and a list within a row of the cut stays beside. An
- * odd count cannot fill rows of two and of three at once, so it keeps the cut
- * and lets the wide grid end short, the way an odd count ends any grid.
+ * The sidebar box stretches to the catalog's height, so the filter list ends
+ * at its last group (or Clear all) plus the sidebar's bottom padding.
  */
-function cardsBeside(total: number, cut: number) {
-  if (cut === 0 || total <= cut) return total;
-  for (const count of [cut, cut + 2, cut - 2]) {
-    if (count >= total) return total;
-    if ((total - count) % WIDE_ROW_CARDS === 0) return count;
+function filterListEnd(nav: HTMLElement) {
+  const list = nav.lastElementChild?.lastElementChild ?? nav;
+  return (
+    list.getBoundingClientRect().bottom +
+    parseFloat(getComputedStyle(nav).paddingBlockEnd)
+  );
+}
+
+function countBeside(
+  nav: HTMLElement,
+  grid: HTMLElement,
+  navEnd: number,
+  shown: number,
+  total: number,
+) {
+  // Stacked layout: the sidebar sits above the cards, not beside them.
+  const gridLeft = grid.getBoundingClientRect().left;
+  if (nav.getBoundingClientRect().right > gridLeft + 1) return Infinity;
+  const cells = Array.from(grid.children, (cell) =>
+    cell.getBoundingClientRect(),
+  );
+  if (cells.length === 0) return Math.min(total, 1);
+  const columns = cells.filter((cell) => cell.top === cells[0].top).length;
+  const rows = Math.ceil(cells.length / columns);
+  const rowsBeside = new Set(
+    cells.filter((cell) => cell.top < navEnd).map((cell) => cell.top),
+  ).size;
+  // Cut whole rows that start at or below the end of the filter list.
+  if (rowsBeside < rows) return rowsBeside * columns;
+  if (shown >= total) return shown;
+  // Every row shown so far starts beside the filters. Fill a short last row,
+  // or add one more row while the grid still ends above the filters' end
+  // (rows touch, so the next row would start where this one ends).
+  if (cells.length % columns !== 0) return Math.min(total, rows * columns);
+  if (cells[cells.length - 1].bottom < navEnd) {
+    return Math.min(total, shown + columns);
   }
-  return total - cut >= WIDE_ROW_CARDS ? cut : total;
+  return shown;
+}
+
+function sameInputs(a: SplitInputs, b: SplitInputs) {
+  return (
+    a.viewport === b.viewport &&
+    a.navEnd === b.navEnd &&
+    a.length === b.length &&
+    a.first === b.first &&
+    a.last === b.last
+  );
 }

From ad53702dac479c9bfb06e280cf9e309de8fe888b Mon Sep 17 00:00:00 2001
From: John Haugabook <johnhaugabook@gmail.com>
Date: Wed, 28 Oct 2026 23:26:57 -0400
Subject: [PATCH 5/6] website-feature: keep focus on moved cards, check the
 wide frame at 50 per page

- A card that changes grids remounts, so a resize or zoom that moved a
  focused card dropped focus to the page. useCatalogSplit now notes the
  focused card and control before the split changes and refocuses the
  same control afterwards, unless focus has moved on. The catalogs pass
  it a ref for the wide grid.
- page-width-regression.mjs also loads the six catalogs at 50 per page.
  6 per page never splits, so the wide frame selector matched nothing
  and the frame rule never saw the wide grid.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 website/scripts/page-width-regression.mjs     | 62 ++++++++++++-------
 .../src/components/brand/AgentsCatalog.tsx    |  3 +-
 .../components/brand/ExtensionsCatalog.tsx    |  3 +-
 .../components/brand/InstructionsCatalog.tsx  |  3 +-
 .../src/components/brand/LearningHubIndex.tsx |  3 +-
 .../src/components/brand/PluginsCatalog.tsx   |  3 +-
 .../src/components/brand/SkillsCatalog.tsx    |  3 +-
 .../src/components/brand/useCatalogSplit.ts   | 40 ++++++++++++
 8 files changed, 92 insertions(+), 28 deletions(-)

diff --git a/website/scripts/page-width-regression.mjs b/website/scripts/page-width-regression.mjs
index 120cb20fba..f9525ec508 100644
--- a/website/scripts/page-width-regression.mjs
+++ b/website/scripts/page-width-regression.mjs
@@ -17,8 +17,39 @@ const frameSelector = [
   '#resources [class*="Grid-module__Grid___"]',
   '[class*="_wideFrame_"]',
 ].join(", ");
+// Catalogs beside their filter rail. 6 per page never splits, so these also run
+// at 50 per page, where the wide grid below the filters is a frame too.
+const splitRoutes = new Set([
+  "agents/", "instructions/", "skills/", "plugins/", "extensions/", "learning-hub/",
+]);
 const browser = await chromium.launch();
 
+async function checkFrames(page, colorScheme, width, route) {
+  const frames = await page.locator(frameSelector).evaluateAll(elements =>
+    elements.map(element => {
+      const box = element.getBoundingClientRect();
+      return { name: element.className, x: box.x, right: box.right, width: box.width };
+    }),
+  );
+  assert.ok(frames.length > 0, `${route}: content frames found`);
+  const header = await page.getByRole("navigation", { name: "Primary", exact: true }).boundingBox();
+  const expected = Math.min(1280, header.width);
+  for (const frame of frames) {
+    const label = `${colorScheme} ${width}px ${route || "homepage"} ${frame.name}`;
+    assert.ok(frame.width <= 1281, `${label}: maximum width is 1280px, got ${frame.width}`);
+    assert.ok(frame.x >= -1 && frame.right <= width + 1, `${label}: within viewport`);
+    if (width >= 768) {
+      assert.ok(Math.abs(frame.width - expected) <= 1, `${label}: matches header width ${expected}`);
+      assert.ok(Math.abs(frame.x - header.x) <= 1, `${label}: aligns with header`);
+    }
+  }
+  if (width >= 1600) {
+    assert.ok(Math.abs(header.width - 1280) <= 1, `${route}: desktop frame fills the 1280px cap`);
+  }
+  assert.equal(await page.evaluate(() => document.documentElement.scrollWidth > innerWidth), false,
+    `${route}: no horizontal overflow`);
+}
+
 try {
   for (const colorScheme of ["light", "dark"]) {
     const page = await browser.newPage({ colorScheme, reducedMotion: "reduce" });
@@ -29,29 +60,16 @@ try {
         assert.equal(response.status(), 200, route);
         await page.waitForFunction(() => !document.querySelector("astro-island[ssr]"));
         await page.addStyleTag({ content: "html { scrollbar-gutter: stable; }" });
-        const frames = await page.locator(frameSelector).evaluateAll(elements =>
-          elements.map(element => {
-            const box = element.getBoundingClientRect();
-            return { name: element.className, x: box.x, right: box.right, width: box.width };
-          }),
-        );
-        assert.ok(frames.length > 0, `${route}: content frames found`);
-        const header = await page.getByRole("navigation", { name: "Primary", exact: true }).boundingBox();
-        const expected = Math.min(1280, header.width);
-        for (const frame of frames) {
-          const label = `${colorScheme} ${width}px ${route || "homepage"} ${frame.name}`;
-          assert.ok(frame.width <= 1281, `${label}: maximum width is 1280px, got ${frame.width}`);
-          assert.ok(frame.x >= -1 && frame.right <= width + 1, `${label}: within viewport`);
-          if (width >= 768) {
-            assert.ok(Math.abs(frame.width - expected) <= 1, `${label}: matches header width ${expected}`);
-            assert.ok(Math.abs(frame.x - header.x) <= 1, `${label}: aligns with header`);
-          }
-        }
-        if (width >= 1600) {
-          assert.ok(Math.abs(header.width - 1280) <= 1, `${route}: desktop frame fills the 1280px cap`);
+        await checkFrames(page, colorScheme, width, route);
+        // The rail stacks above the cards below 1012px, so nothing splits there.
+        if (width >= 1024 && splitRoutes.has(route)) {
+          const trigger = page.locator('summary[aria-label^="Resource page size"]');
+          await trigger.click();
+          await page.locator("details", { has: trigger })
+            .getByRole("menuitemradio", { name: "50", exact: true }).click();
+          await page.locator('[class*="_wideFrame_"]').waitFor();
+          await checkFrames(page, colorScheme, width, `${route} at 50 per page`);
         }
-        assert.equal(await page.evaluate(() => document.documentElement.scrollWidth > innerWidth), false,
-          `${route}: no horizontal overflow`);
       }
       console.log(`PASS ${colorScheme} ${width}px: ${routes.length} page layouts share the 1280px cap`);
     }
diff --git a/website/src/components/brand/AgentsCatalog.tsx b/website/src/components/brand/AgentsCatalog.tsx
index 1cf2c2c61e..81e4bed8ac 100644
--- a/website/src/components/brand/AgentsCatalog.tsx
+++ b/website/src/components/brand/AgentsCatalog.tsx
@@ -202,7 +202,7 @@ export function AgentsCatalog({
   const page = Math.min(currentPage, pageCount);
   const visibleAgents = sortedAgents.slice((page - 1) * pageSize, page * pageSize);
 
-  const { filterNavRef, sideGridRef, beside, below } =
+  const { filterNavRef, sideGridRef, wideGridRef, beside, below } =
     useCatalogSplit(visibleAgents, pageSize);
 
   const renderAgentCard = (agent: AgentItem) => (
@@ -442,6 +442,7 @@ export function AgentsCatalog({
             data-mode={colorMode}
           >
             <div
+              ref={wideGridRef}
               className={clsx(
                 styles.wideGrid,
                 page < pageCount && styles.wideGridCentered,
diff --git a/website/src/components/brand/ExtensionsCatalog.tsx b/website/src/components/brand/ExtensionsCatalog.tsx
index b34e91f793..4f821cac74 100644
--- a/website/src/components/brand/ExtensionsCatalog.tsx
+++ b/website/src/components/brand/ExtensionsCatalog.tsx
@@ -250,7 +250,7 @@ export function ExtensionsCatalog({
     page * pageSize,
   );
 
-  const { filterNavRef, sideGridRef, beside, below } =
+  const { filterNavRef, sideGridRef, wideGridRef, beside, below } =
     useCatalogSplit(visibleExtensions, pageSize);
 
   const renderExtensionCard = (ext: ExtensionItem) => {
@@ -526,6 +526,7 @@ export function ExtensionsCatalog({
             data-mode={colorMode}
           >
             <div
+              ref={wideGridRef}
               className={clsx(
                 styles.wideGrid,
                 page < pageCount && styles.wideGridCentered,
diff --git a/website/src/components/brand/InstructionsCatalog.tsx b/website/src/components/brand/InstructionsCatalog.tsx
index 5d02409bbb..5b829f344c 100644
--- a/website/src/components/brand/InstructionsCatalog.tsx
+++ b/website/src/components/brand/InstructionsCatalog.tsx
@@ -209,7 +209,7 @@ export function InstructionsCatalog({
     page * pageSize,
   );
 
-  const { filterNavRef, sideGridRef, beside, below } =
+  const { filterNavRef, sideGridRef, wideGridRef, beside, below } =
     useCatalogSplit(visibleInstructions, pageSize);
 
   const renderInstructionCard = (item: InstructionItem) => (
@@ -449,6 +449,7 @@ export function InstructionsCatalog({
             data-mode={colorMode}
           >
             <div
+              ref={wideGridRef}
               className={clsx(
                 styles.wideGrid,
                 page < pageCount && styles.wideGridCentered,
diff --git a/website/src/components/brand/LearningHubIndex.tsx b/website/src/components/brand/LearningHubIndex.tsx
index 0895244ee6..ef2154d183 100644
--- a/website/src/components/brand/LearningHubIndex.tsx
+++ b/website/src/components/brand/LearningHubIndex.tsx
@@ -433,7 +433,7 @@ function LearningHubIndexBody({
     page * pageSize,
   );
 
-  const { filterNavRef, sideGridRef, beside, below } =
+  const { filterNavRef, sideGridRef, wideGridRef, beside, below } =
     useCatalogSplit(visibleEntries, pageSize);
 
   const renderEntryCard = (entry: Entry) => (
@@ -885,6 +885,7 @@ function LearningHubIndexBody({
             data-mode={colorMode}
           >
             <div
+              ref={wideGridRef}
               className={clsx(
                 styles.wideGrid,
                 page < pageCount && styles.wideGridCentered,
diff --git a/website/src/components/brand/PluginsCatalog.tsx b/website/src/components/brand/PluginsCatalog.tsx
index daba481746..a4376f94ff 100644
--- a/website/src/components/brand/PluginsCatalog.tsx
+++ b/website/src/components/brand/PluginsCatalog.tsx
@@ -209,7 +209,7 @@ export function PluginsCatalog({
     page * pageSize,
   );
 
-  const { filterNavRef, sideGridRef, beside, below } =
+  const { filterNavRef, sideGridRef, wideGridRef, beside, below } =
     useCatalogSplit(visiblePlugins, pageSize);
 
   const renderPluginCard = (plugin: PluginItem) => (
@@ -441,6 +441,7 @@ export function PluginsCatalog({
             data-mode={colorMode}
           >
             <div
+              ref={wideGridRef}
               className={clsx(
                 styles.wideGrid,
                 page < pageCount && styles.wideGridCentered,
diff --git a/website/src/components/brand/SkillsCatalog.tsx b/website/src/components/brand/SkillsCatalog.tsx
index e6eb9785c5..d6e98272d0 100644
--- a/website/src/components/brand/SkillsCatalog.tsx
+++ b/website/src/components/brand/SkillsCatalog.tsx
@@ -184,7 +184,7 @@ export function SkillsCatalog({
   const page = Math.min(currentPage, pageCount);
   const visibleSkills = sortedSkills.slice((page - 1) * pageSize, page * pageSize);
 
-  const { filterNavRef, sideGridRef, beside, below } =
+  const { filterNavRef, sideGridRef, wideGridRef, beside, below } =
     useCatalogSplit(visibleSkills, pageSize);
 
   const renderSkillCard = (skill: SkillItem) => (
@@ -407,6 +407,7 @@ export function SkillsCatalog({
             data-mode={colorMode}
           >
             <div
+              ref={wideGridRef}
               className={clsx(
                 styles.wideGrid,
                 page < pageCount && styles.wideGridCentered,
diff --git a/website/src/components/brand/useCatalogSplit.ts b/website/src/components/brand/useCatalogSplit.ts
index ae0b4adcf5..339b9e779f 100644
--- a/website/src/components/brand/useCatalogSplit.ts
+++ b/website/src/components/brand/useCatalogSplit.ts
@@ -34,6 +34,9 @@ export function useCatalogSplit<T>(
 ) {
   const filterNavRef = useRef<HTMLElement>(null);
   const sideGridRef = useRef<HTMLDivElement>(null);
+  const wideGridRef = useRef<HTMLDivElement>(null);
+  // A card that changes grids remounts, so its focused control is lost.
+  const pendingFocus = useRef<FocusSpot | null>(null);
   const splits = pageSize !== DEFAULT_CATALOG_RESOURCE_SIZE;
   // Infinity until a measurement cuts the list, so a stacked layout or a
   // longer list never mounts a wide grid only to tear it down again.
@@ -75,9 +78,19 @@ export function useCatalogSplit<T>(
       return;
     }
     lastChange.current = { inputs, from: besideCount, to: next };
+    pendingFocus.current = focusSpot([grid, wideGridRef.current]);
     setBesideCount(next);
   });
 
+  // Put focus back on the same card and control after a move, unless the
+  // reader has already focused something else.
+  useLayoutEffect(() => {
+    const spot = pendingFocus.current;
+    pendingFocus.current = null;
+    if (!spot || document.activeElement !== document.body) return;
+    restoreFocus([sideGridRef.current, wideGridRef.current], spot);
+  });
+
   // Page, sort, filter, page size, and "Show more" changes all re-render, so
   // measure after every render, before the browser paints.
   useLayoutEffect(() => measure());
@@ -99,6 +112,7 @@ export function useCatalogSplit<T>(
   return {
     filterNavRef,
     sideGridRef,
+    wideGridRef,
     beside: items.slice(0, shown),
     below: items.slice(shown),
   };
@@ -148,6 +162,32 @@ function countBeside(
   return shown;
 }
 
+const FOCUSABLE = "a[href], button, [tabindex]";
+
+/** Which card (counting across both grids) and which of its controls. */
+type FocusSpot = { card: number; control: number };
+
+function focusSpot(grids: (Element | null)[]): FocusSpot | null {
+  const active = document.activeElement;
+  let card = 0;
+  for (const grid of grids) {
+    for (const cell of grid?.children ?? []) {
+      if (active && cell.contains(active)) {
+        const controls = Array.from(cell.querySelectorAll(FOCUSABLE));
+        return { card, control: controls.indexOf(active) };
+      }
+      card += 1;
+    }
+  }
+  return null;
+}
+
+function restoreFocus(grids: (Element | null)[], spot: FocusSpot) {
+  const cells = grids.flatMap((grid) => Array.from(grid?.children ?? []));
+  const controls = cells[spot.card]?.querySelectorAll<HTMLElement>(FOCUSABLE);
+  controls?.[spot.control]?.focus();
+}
+
 function sameInputs(a: SplitInputs, b: SplitInputs) {
   return (
     a.viewport === b.viewport &&

From 5fe942d3e572b3451ba060f82ba2924a82c98fd8 Mon Sep 17 00:00:00 2001
From: John Haugabook <johnhaugabook@gmail.com>
Date: Wed, 28 Oct 2026 23:52:09 -0400
Subject: [PATCH 6/6] Refactor column calculation for grid layout

Co-authored-by: Copilot Autofix powered by AI <175728472+Copilot@users.noreply.github.com>
---
 website/src/components/brand/useCatalogSplit.ts | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/website/src/components/brand/useCatalogSplit.ts b/website/src/components/brand/useCatalogSplit.ts
index 339b9e779f..70539703df 100644
--- a/website/src/components/brand/useCatalogSplit.ts
+++ b/website/src/components/brand/useCatalogSplit.ts
@@ -144,7 +144,10 @@ function countBeside(
     cell.getBoundingClientRect(),
   );
   if (cells.length === 0) return Math.min(total, 1);
-  const columns = cells.filter((cell) => cell.top === cells[0].top).length;
+  const columns = Math.max(
+    1,
+    Math.round(grid.getBoundingClientRect().width / cells[0].width),
+  );
   const rows = Math.ceil(cells.length / columns);
   const rowsBeside = new Set(
     cells.filter((cell) => cell.top < navEnd).map((cell) => cell.top),