From fe87b75c5baeaee05726eb94d5a2ff957db67731 Mon Sep 17 00:00:00 2001
From: Thomas Jung <thomas.jung@sap.com>
Date: Wed, 11 Nov 2026 14:06:01 -0500
Subject: [PATCH 1/2] fix(#3095): add 1280px container base rule for
 concept/topic/channel/channels page roots

---
 .../plans/2026-11-11-concept-page-layout.md   | 236 ++++++++++++++++++
 .../2026-11-11-concept-page-layout-design.md  | 186 ++++++++++++++
 hugo/assets/css/sap-fundamental.src.css       |  19 +-
 test/concept-page-container.test.js           |  41 +++
 4 files changed, 481 insertions(+), 1 deletion(-)
 create mode 100644 docs/superpowers/plans/2026-11-11-concept-page-layout.md
 create mode 100644 docs/superpowers/specs/2026-11-11-concept-page-layout-design.md
 create mode 100644 test/concept-page-container.test.js

diff --git a/docs/superpowers/plans/2026-11-11-concept-page-layout.md b/docs/superpowers/plans/2026-11-11-concept-page-layout.md
new file mode 100644
index 000000000..a15424a04
--- /dev/null
+++ b/docs/superpowers/plans/2026-11-11-concept-page-layout.md
@@ -0,0 +1,236 @@
+# Concept / topic / channel page layout fixes — Implementation Plan
+
+> **For agentic workers:** REQUIRED SUB-SKILL: Use superpowers:subagent-driven-development (recommended) or superpowers:executing-plans to implement this plan task-by-task. Steps use checkbox (`- [ ]`) syntax for tracking.
+
+**Goal:** Fix flush-left rendering on four CAP/Hugo page types and cap the hundreds-of-tiles relationship walls on concept hub pages (issue #3095).
+
+**Architecture:** Two independent changes. (A) One grouped CSS base rule (desktop + mobile media query) in the git-tracked CSS *source*, giving `.concept-page`, `.topic-detail`, `.channel-detail`, `.channels-page` the site-standard 1280px/centered/padded container. (B) An EJS change in `concept-detail.ejs` that moves KG-relationship tile overflow (past N) into a no-JS `<details>` collapse.
+
+**Tech Stack:** CSS (`hugo/assets/css/sap-fundamental.src.css`, compiled by postcss `build:css`), EJS (`srv/lib/templates/concept-detail.ejs` via `srv/lib/concept-detail-render.js`), vitest unit tests.
+
+**Spec:** `docs/superpowers/specs/2026-11-11-concept-page-layout-design.md`
+
+## Global Constraints
+
+- **CSS edits go ONLY in `hugo/assets/css/sap-fundamental.src.css`** (git-tracked source). NEVER edit `hugo/assets/css/sap-fundamental.css` (gitignored build output since #2896; editing it causes Hugo-fingerprint drift → blocked publish).
+- **Container values copied verbatim from the sibling rule:** desktop `max-width: 1280px; margin: 0 auto; padding: 1.5rem 2rem 3rem;` (`src.css:2402-2407`); mobile `padding: 1rem;` inside the existing `@media` block (`src.css:2774-2777`).
+- **No new global container class and no `main { … }` rule** — scope strictly to the four named root classes.
+- **Cap mechanism is CSS-only `<details>`/`<summary>`** — no island, no JS, overflow moved server-side (not hidden client-side).
+- **Cap scope = KG-relationship sections only** (`teaches`, `requires`, `requiredBy`, `relatedTo`); leave phase-4 external sections (learningJourneys, helpDocs, blogPosts, discoveryMissions, videos, apiDocs, samples, communityEvents) uncapped — corpus data shows only these grow unbounded.
+- **Cap threshold N = 24.**
+- **Test runner:** `npx vitest run --project unit <file>` (scoped — full suite is hook-blocked locally).
+- **Windows worktree:** CSS/EJS files are LF. After edits run `file <path>`; if it flips to CRLF, normalize before commit.
+- **Activation is two-step:** the CSS fix (Task 1) activates on deploy; the EJS cap (Task 2) changes body bytes → needs a concepts re-publish after deploy. Note this in the PR body. One PR.
+
+## Review Focus
+
+- **Concept with zero `requiredBy` but non-empty other sections** — the cap helper must still render normal sections untouched and emit no empty `<details>`. Covered in Task 2 tests.
+- **`requiredBy.length` exactly === N (24)** — boundary: no `<details>` should appear (nothing overflows). Covered in Task 2 tests.
+- **`requiredBy.length` === N+1 (25)** — boundary: exactly one item inside `<details>`, summary count correct. Covered in Task 2 tests.
+- **Title values needing HTML-escape inside the collapsed overflow** — escaping must hold for items rendered in the `<details>` half, not just the visible half. Covered in Task 2 tests.
+- **Concept index / topic index already-padded pages** — the new grouped rule must not double-apply to `.concepts-index`/`.topics-index` (different classes; verify by inspection that the selector list contains only the four intended classes). Covered in Task 1 review.
+
+---
+
+## Task 1: Container base rule for the four flush-left roots (CSS)
+
+**Files:**
+- Modify: `hugo/assets/css/sap-fundamental.src.css` (add desktop rule near `:3069` `.concept-page__*` block; add the four classes to the mobile `@media` block at `:2774-2777`)
+- Test: `test/concept-page-container.test.js` (create — source-string guard, same style as `test/hugo-css-fingerprint.test.js`)
+
+**Interfaces:**
+- Produces: CSS classes `.concept-page`, `.topic-detail`, `.channel-detail`, `.channels-page` each resolving to `max-width:1280px; margin:0 auto; padding:1.5rem 2rem 3rem` on desktop and `padding:1rem` under the mobile media query. No JS/HTML interface.
+
+- [ ] **Step 1: Write the failing test**
+
+Create `test/concept-page-container.test.js` (vitest, source-string guard — reads `sap-fundamental.src.css` as text, mirroring `hugo-css-fingerprint.test.js`):
+
+```js
+import { describe, it, expect } from 'vitest';
+import { readFileSync } from 'node:fs';
+import { join } from 'node:path';
+const src = readFileSync(join(import.meta.dirname, '..', 'hugo/assets/css/sap-fundamental.src.css'), 'utf8');
+
+describe('#3095 — concept/topic/channel container base rule', () => {
+  const ROOTS = ['.concept-page', '.topic-detail', '.channel-detail', '.channels-page'];
+  it('declares a desktop container rule with 1280px/centered/padded for all four roots', () => {
+    // one grouped rule block containing all four selectors + the sibling values
+    const rule = src.match(/\.concept-page,\s*\.topic-detail,\s*\.channel-detail,\s*\.channels-page\s*\{[^}]*\}/);
+    expect(rule, 'grouped base rule present').not.toBeNull();
+    expect(rule[0]).toMatch(/max-width:\s*1280px/);
+    expect(rule[0]).toMatch(/margin:\s*0 auto/);
+    expect(rule[0]).toMatch(/padding:\s*1\.5rem 2rem 3rem/);
+  });
+  it('adds the four roots to the mobile padding override', () => {
+    // the four classes appear alongside .group-body inside a rule setting padding:1rem
+    for (const r of ROOTS) {
+      expect(src, `${r} in a 1rem padding rule`).toMatch(
+        new RegExp(`${r.replace('.', '\\.')}[\\s\\S]{0,400}padding:\\s*1rem`)
+      );
+    }
+  });
+  it('does NOT introduce a bare `main {` width rule or touch the index classes', () => {
+    expect(src).not.toMatch(/\.concept-page,\s*\.topic-detail,\s*\.channel-detail,\s*\.channels-page,\s*\.concepts-index/);
+  });
+});
+```
+
+- [ ] **Step 2: Run test to verify it fails**
+
+Run: `npx vitest run --project unit test/concept-page-container.test.js`
+Expected: FAIL (no grouped rule yet).
+
+- [ ] **Step 3: Add the CSS rules in `sap-fundamental.src.css`**
+
+Desktop: insert a grouped rule immediately before the first `.concept-page__*` rule (≈`:3069`):
+```css
+.concept-page,
+.topic-detail,
+.channel-detail,
+.channels-page {
+  max-width: 1280px;
+  margin: 0 auto;
+  padding: 1.5rem 2rem 3rem;
+}
+```
+Mobile: in the existing `@media` block containing `.mission-body, .group-body { padding: 1rem; }` (`:2774-2777`), add the four selectors to that same declaration (or a sibling declaration in the same media block) so they also get `padding: 1rem`.
+
+- [ ] **Step 4: Run the test + verify CSS still compiles**
+
+Run: `npx vitest run --project unit test/concept-page-container.test.js`
+Expected: PASS.
+Run: `npm run build:css`
+Expected: exits 0, regenerates `sap-fundamental.css` (gitignored — do not stage it).
+
+- [ ] **Step 5: Verify line endings, then commit**
+
+Run: `file hugo/assets/css/sap-fundamental.src.css test/concept-page-container.test.js` (expect "ASCII text", not "CRLF"); normalize if flipped.
+```bash
+git add hugo/assets/css/sap-fundamental.src.css test/concept-page-container.test.js
+git commit -m "fix(#3095): add 1280px container base rule for concept/topic/channel/channels page roots"
+```
+
+---
+
+## Task 2: Cap KG-relationship tile walls with a no-JS `<details>` collapse (EJS)
+
+**Files:**
+- Modify: `srv/lib/concept-detail-render.js` (add a cap helper into the template context)
+- Modify: `srv/lib/templates/concept-detail.ejs` (render the four KG sections' `<ul>` via the helper)
+- Test: `test/concept-detail-cap.test.js` (create)
+
+**Interfaces:**
+- Consumes: `renderConceptDetail(concept, phase4)` from `srv/lib/concept-detail-render.js:52` → returns `{ body, contentHash }`.
+- Produces: a template-context helper `renderCappedGrid(items, renderItem, { visible = 24, label })` → string of `<ul class="concept-card-grid">` markup where the first `visible` items are direct `<li>` children and any overflow is wrapped in `<details class="concept-card-grid__more"><summary>Show all <N> …</summary><ul class="concept-card-grid">…rest…</ul></details>`. `renderItem(item)` returns the `<li>…</li>` for one item (reuses the existing per-section markup). When `items.length <= visible`, no `<details>` is emitted.
+
+- [ ] **Step 1: Write the failing tests**
+
+Create `test/concept-detail-cap.test.js` (vitest). Build a concept with N-boundary `requiredBy` arrays and assert on the returned `body` string:
+
+```js
+import { describe, it, expect } from 'vitest';
+import { renderConceptDetail } from '../srv/lib/concept-detail-render.js';
+const mk = (n) => Array.from({ length: n }, (_, i) => ({ slug: `c${i}`, title: `Concept ${i}` }));
+const base = { slug: 'x', name: 'X', description: '' };
+
+describe('#3095 — KG relationship cap', () => {
+  it('no <details> when requiredBy.length === 24 (boundary)', () => {
+    const { body } = renderConceptDetail({ ...base, requiredBy: mk(24) }, {});
+    const sec = body.match(/Concepts that build on this[\s\S]*?<\/section>/)[0];
+    expect(sec).not.toMatch(/<details/);
+    expect((sec.match(/<li>/g) || []).length).toBe(24);
+  });
+  it('one item inside <details> when requiredBy.length === 25 (boundary)', () => {
+    const { body } = renderConceptDetail({ ...base, requiredBy: mk(25) }, {});
+    const sec = body.match(/Concepts that build on this[\s\S]*?<\/section>/)[0];
+    expect(sec).toMatch(/<details/);
+    const inside = sec.match(/<details[\s\S]*?<\/details>/)[0];
+    expect((inside.match(/<li>/g) || []).length).toBe(1);
+    expect(sec).toMatch(/Show all 25/);
+  });
+  it('235-item hub collapses overflow (24 visible, 211 in details)', () => {
+    const { body } = renderConceptDetail({ ...base, requiredBy: mk(235) }, {});
+    const sec = body.match(/Concepts that build on this[\s\S]*?<\/section>/)[0];
+    const inside = sec.match(/<details[\s\S]*?<\/details>/)[0];
+    expect((inside.match(/<li>/g) || []).length).toBe(211);
+  });
+  it('escapes titles rendered inside the collapsed overflow half', () => {
+    const items = mk(25); items[24].title = '<script>x</script>';
+    const { body } = renderConceptDetail({ ...base, requiredBy: items }, {});
+    expect(body).not.toMatch(/<script>x<\/script>/);
+    expect(body).toMatch(/&lt;script&gt;/);
+  });
+  it('leaves an uncapped external section (phase4) untouched', () => {
+    const { body } = renderConceptDetail(
+      { ...base }, { videos: mk(30).map(v => ({ ...v, url: 'https://x' })) });
+    const sec = body.match(/Videos teaching this[\s\S]*?<\/section>/);
+    if (sec) expect(sec[0]).not.toMatch(/<details/);
+  });
+});
+```
+
+- [ ] **Step 2: Run tests to verify they fail**
+
+Run: `npx vitest run --project unit test/concept-detail-cap.test.js`
+Expected: FAIL (no cap yet; 235 renders 235 `<li>`, no `<details>`).
+
+- [ ] **Step 3: Implement the cap helper in `concept-detail-render.js`**
+
+Add `renderCappedGrid(items, renderItem, { visible = 24, label })` (signature in Interfaces) and inject it into `ctx` alongside `escapeHtml`/`renderMarkdown`. First `visible` items render as direct `<li>` inside `<ul class="concept-card-grid">`; overflow goes in `<details class="concept-card-grid__more"><summary>Show all <%= items.length %> <%= label %></summary><ul class="concept-card-grid">…</ul></details>`. `renderItem` is the existing per-item `<li>` markup for that section (escaping via the existing `escapeHtml`/`<%= %>` path).
+
+- [ ] **Step 4: Rewire the four KG sections in `concept-detail.ejs`**
+
+Replace the bare `<ul class="concept-card-grid"><% arr.forEach(… ) %></ul>` in the `teaches`, `requires`, `requiredBy`, `relatedTo` sections with a call to `renderCappedGrid(arr, itemFn, { label: '<section noun>' })`. Leave all phase-4 external sections exactly as they are. Keep each section's existing `<li>` inner markup identical (move it into the `itemFn`).
+
+- [ ] **Step 5: Run tests to verify they pass**
+
+Run: `npx vitest run --project unit test/concept-detail-cap.test.js`
+Expected: PASS (all five).
+
+- [ ] **Step 6: Add collapse-affordance CSS (source) + verify line endings**
+
+In `sap-fundamental.src.css`, add a small rule for `.concept-card-grid__more` (and its `summary`) — Horizon tokens, e.g. `summary` styled as a text button, top margin. Run `npm run build:css` (exit 0).
+Run: `file srv/lib/templates/concept-detail.ejs srv/lib/concept-detail-render.js test/concept-detail-cap.test.js` — normalize any CRLF flip.
+
+- [ ] **Step 7: Commit**
+
+```bash
+git add srv/lib/concept-detail-render.js srv/lib/templates/concept-detail.ejs test/concept-detail-cap.test.js hugo/assets/css/sap-fundamental.src.css
+git commit -m "fix(#3095): cap KG-relationship tile lists at 24 with no-JS <details> collapse"
+```
+
+---
+
+## Task 3: Local verification + PR
+
+**Files:** none (verification + PR only)
+
+- [ ] **Step 1: Scoped test run**
+
+Run: `npx vitest run --project unit test/concept-page-container.test.js test/concept-detail-cap.test.js`
+Expected: all PASS.
+
+- [ ] **Step 2: Confirm no built CSS or stray files staged**
+
+Run: `git status --porcelain` — expect only the four source files across the two commits; `hugo/assets/css/sap-fundamental.css` must NOT appear (gitignored).
+
+- [ ] **Step 3: Push branch + open PR to DEV**
+
+```bash
+git push -u origin fix-concept-page-layout-3095
+gh pr create --base DEV --title "fix(#3095): concept/topic/channel page layout — container padding + cap relationship walls" --body "<summary + two-step activation note + verification plan>"
+```
+PR body MUST state the two-step activation: CSS fixes activate on deploy for all four pages; the concept relationship cap needs a concepts re-publish (`rebuild-content.yml`) after deploy to reach served BLOBs. Link issue #3095 and the design spec.
+
+- [ ] **Step 4: Post-deploy verification (record in PR, do not mark done until confirmed)**
+
+After the change is deployed to DEV + concepts re-published, curl `/concepts/sap-btp-fundamentals/`, `/concepts/cap-golden-path-best-practices/`, `/topics/<slug>/`, `/channels/`, `/channels/<slug>/`; confirm (a) container padding present on all, (b) the "Concepts that build on this" section on the hub page shows 24 tiles + a "Show all 235" `<details>`. Compare against #3095 screenshots.
+
+---
+
+## Self-review notes
+
+- **Spec coverage:** bug class A (4 roots) → Task 1; bug B (cap) → Task 2; deploy/publish sequencing + verification → Task 3. All spec sections mapped.
+- **Type consistency:** `renderCappedGrid(items, renderItem, {visible,label})` defined in Task 2 Interfaces and used identically in Steps 3–4; `renderConceptDetail` signature matches `concept-detail-render.js:52`.
+- **Review Focus:** all five boundary/escape/non-regression cases have owning tests in Task 1/2.
+- **Proportion:** plan carries decisions (selectors, values, N=24, helper signature, boundary assertions); implementers write the EJS/CSS bodies and the helper body.
diff --git a/docs/superpowers/specs/2026-11-11-concept-page-layout-design.md b/docs/superpowers/specs/2026-11-11-concept-page-layout-design.md
new file mode 100644
index 000000000..56d21cb11
--- /dev/null
+++ b/docs/superpowers/specs/2026-11-11-concept-page-layout-design.md
@@ -0,0 +1,186 @@
+# Concept / topic / channel page layout fixes (issue #3095)
+
+**Date:** 2026-11-11
+**Issue:** [#3095 — Layout of concept pages](https://github.com/sap-tutorials/tutorials-ims/issues/3095)
+**Branch target:** DEV (feature PR → DEV, per repo branching model)
+**Branch:** `fix-concept-page-layout-3095`
+
+## Intent and the why
+
+A reporter filed #3095: on concept **detail** pages "the layout of the content /
+tiles looks like some space between the end of the page / browser and the content
+is missing" — content sits **flush against the left browser edge**, hard to read.
+Tom confirmed the left-flush reading problem and, during investigation, pointed
+out `/channels/` has the same issue.
+
+Investigation (this session, two audit passes) found this is **one root-cause bug
+class** affecting four pages, plus a separate content-density problem:
+
+### Bug class A — missing root width/padding (flush-left)
+
+CAP serves these page bodies spliced into a **bare `<main>`** at the shell's
+`<!-- MAIN -->` marker (`composeShell` is pure string concatenation — no shared
+container, no padding, no max-width). The site has **no global container class**;
+by convention **each body's root element class must carry its own
+`max-width + margin:0 auto + padding`**. Four pages forgot, so they render
+flush-left:
+
+| Page | URL | Root class | Renderer | Serve path |
+|---|---|---|---|---|
+| Concept detail | `/concepts/<slug>/` | `.concept-page` | `srv/lib/templates/concept-detail.ejs:1` (`<article>`), via `concept-detail-render.js:81` | CAP |
+| Topic detail | `/topics/<slug>/` | `.topic-detail` | `srv/lib/topic-detail-render.js:56` | CAP |
+| Channel detail | `/channels/<slug>/` | `.channel-detail` | `packages/channels/channel-detail-render.js:53` | CAP |
+| Channels index | `/channels/` | `.channels-page` | `hugo/layouts/channels/list.html:3` | **Hugo-static** |
+
+None of these four classes has a base rule in the CSS source, and none ships an
+inline `<style>` fallback. All four flush-left.
+
+**Not bugs (already safe):** `.concepts-index` (`concept-list-page.js:133`) and
+`.topics-index` (`topic-list-page.js:53`) have no CSS-file rule but DO ship their
+own inline `<style>` with width+padding. `.group-body`/`.mission-body` have a
+PRESENT rule (`max-width:1280px; margin:0 auto; padding:1.5rem 2rem 3rem`).
+
+### Bug B — unbounded relationship lists ("not 100% ready")
+
+Every relationship section in `concept-detail.ejs` renders with a bare `.forEach`
+— no cap, no collapse. Hub concepts dump hundreds of tiles: `sap-btp-fundamentals`
+renders **235** "Concepts that build on this" tiles. A wall of hundreds of cards
+is the most likely cause of the reporter's vague "looks not like it is 100% ready"
+remark. Leaf concepts (e.g. `cap-golden-path-best-practices`, single-digit lists)
+look fine — which is why the problem is intermittent and hard for the reporter to
+pin down.
+
+Why now: #3095 is an open user-facing feedback item on PROD pages ahead of the
+end-of-July-2026 PROD cutover.
+
+## CRITICAL build-system fact
+
+The `.concept-page__*` rules live in **`hugo/assets/css/sap-fundamental.src.css`**
+(git-tracked SOURCE). The minified `hugo/assets/css/sap-fundamental.css` is a
+**build output, gitignored since #2896** — `build:css` runs postcss
+(`src.css → sap-fundamental.css`). **All CSS edits go in `.src.css` only.** Editing
+the built file causes Hugo-fingerprint drift vs the rebuild path and blocks content
+publish. (`package.json:81` `build:css`; `scripts/sync-approuter-css.cjs`.)
+
+## Goals
+
+- All four flush-left pages get comfortable left/right breathing room and a
+  sensible max content width, consistent with the rest of the site.
+- Hub concepts no longer dump hundreds of relationship tiles; long sections cap
+  at N with a no-JS affordance to reveal the rest.
+
+## Non-goals
+
+- `.concepts-index` / `.topics-index` — already safe via inline style.
+- `.group-body` / `.mission-body` — already have the rule.
+- Redesigning page IA, card visuals, or the KG relationship model. Layout/polish
+  only, not a redesign.
+- Changing which relationships/links are shown, their ranking, or ordering.
+- Homepage `/` flip or any other content-flip work.
+
+## Anti-goals (failure even if it "technically works")
+
+- A **new global container class** or a `main { max-width }` rule — would silently
+  reflow every other CAP-served page. Scope strictly to the four named root classes.
+- Editing the **built** `sap-fundamental.css` instead of `.src.css` (fingerprint
+  drift → blocked publish).
+- Capping relationship lists so hard that useful links become unreachable, or
+  hiding the total count so users can't tell more exist.
+- A JS-only "show more" that still ships all 235 tiles in the initial visible DOM
+  (no polish win, breaks no-JS). The cap must move the overflow into a collapsed
+  element server-side.
+
+## Constraints
+
+- **CSS fix (bug class A) needs NO body re-publish** — CSS is served separately
+  (`/css/sap-fundamental.css`), regenerated from `.src.css` by the build. A deploy
+  that ships the rebuilt CSS is enough for all four pages, including the
+  Hugo-static channels index (it references the same stylesheet).
+- **Template cap (bug B) IS a body-bytes change** in `concept-detail.ejs` →
+  requires a **concept re-publish** (`rebuild-content.yml` concepts render-set)
+  after deploy to take effect on served BLOBs, not a deploy alone.
+- No-JS-resilient: collapse via CSS-only `<details>`/`<summary>`, no island, no JS.
+- Horizon theme tokens (`var(--sap…)`) for any new visible chrome; match the
+  sibling `.group-body` / `.concepts-index` rules.
+- Windows worktree: CSS/EJS files are LF — verify with `file <path>` after edits,
+  normalize any CRLF flip before commit.
+
+## Decisions made (settled "how")
+
+- **Detail/page width = 1280px** (Tom's call), matching `.group-body`/`.mission-body`
+  (`max-width:1280px; margin:0 auto; padding:1.5rem 2rem 3rem`) rather than the
+  960px index. Applied to all four root classes for site consistency:
+  ```css
+  .concept-page,
+  .topic-detail,
+  .channel-detail,
+  .channels-page { max-width: 1280px; margin: 0 auto; padding: 1.5rem 2rem 3rem; }
+  ```
+  (One grouped rule or four rules — builder's style call; grouped is fine. Placed
+  near the existing `.concept-page__*` block in `sap-fundamental.src.css`.)
+- **Mobile parity = TWO rules, not one.** `.group-body`/`.mission-body` also have a
+  mobile override (`@media` block, `sap-fundamental.src.css:2774-2777`:
+  `padding: 1rem`). For true sibling parity the four classes must be added to BOTH
+  the desktop rule AND that mobile media-query block — otherwise phones get 2rem
+  side padding vs the siblings' 1rem. (Resolved from builder-check Q1.)
+- **Relationship cap mechanism = CSS-only `<details>` collapse.** Render the first
+  N tiles always-visible; the remainder inside a `<details>` whose `<summary>` shows
+  the total, e.g. "Show all 235". No island, no JS.
+- **Cap scope (resolved from corpus data) = KG-relationship sections only.** A live
+  sample of the concept corpus shows only **"Concepts that build on this"
+  (`requiredBy`)** balloons (235, 20, 11, 7, 5 across samples); every other
+  section — tutorials, learning journeys, docs, videos, samples, prerequisites,
+  missions — stays single-digit to low-teens. So cap the KG-relationship sections
+  (`requiredBy`, `relatedTo`, `requires`, `teaches`) and leave the naturally-small
+  phase-4 external sections uncapped. In practice only `requiredBy` collapses
+  anything on hub concepts; with N≈24 all sampled non-hub pages are untouched.
+  (Resolves builder-check Q4/Q5.)
+- **Padding fix = base rule on the existing root classes**, not a markup/wrapper
+  change — matches the per-component convention, no body re-publish for class A.
+
+## Left to the builder
+
+- **Cap threshold N** — initial-visible count (data suggests ~24 keeps all sampled
+  non-hub pages uncollapsed). Builder finalizes; document the chosen value.
+- **`<summary>` copy + a11y label** and how the count is shown.
+- **Channel detail (`.channel-detail`) tile lists** — the only list is "Topics
+  covered" (`channel-topics__list`); builder confirms whether it can grow enough to
+  warrant the cap (padding fix applies regardless). No corpus evidence it balloons.
+- **Deploy/publish sequence** — CSS lands via deploy (fixes all four flush-left
+  pages); the template cap needs a concepts re-publish after deploy. Builder
+  confirms the rebuild mode and notes the two-step activation in the PR body.
+  One PR recommended.
+- **Verification (test the actual deployed thing):** curl the cited URLs after
+  deploy+publish; confirm left padding present on all four and the big "build on
+  this" section is collapsed; re-check against the #3095 screenshots.
+
+## Resolved during builder-check (no longer open)
+
+- **Q2 — channels index is a Vue island, does padding `.channels-page` fix it? YES.**
+  The island root `.channels-directory` is only `display:flex; flex-direction:column;
+  gap` — no width/margin/padding of its own (`ChannelsDirectory.vue:109`), so it
+  fills its `.channels-page` host and padding the host pushes the whole grid inward.
+  Single grouped rule suffices; no island override needed.
+- **Q3 — channel detail emits a nested `<main>`** (`channel-detail-render.js:52`
+  `<main><article class="channel-detail">`, which the shell then wraps in another
+  `<main>` → `<main>`-in-`<main>`). Known structural oddity. Out of scope
+  (layout/polish, not redesign); padding `.channel-detail` works regardless. Left
+  as-is; flagged here so the builder doesn't "fix" it unprompted.
+
+## Files in play
+
+- `hugo/assets/css/sap-fundamental.src.css` — add grouped base rule for
+  `.concept-page, .topic-detail, .channel-detail, .channels-page` (near the
+  existing `.concept-page__*` block). **Source file only — never the built `.css`.**
+- `srv/lib/templates/concept-detail.ejs` — cap relationship `.forEach` loops with
+  the `<details>` collapse helper.
+- (Possibly) `srv/lib/concept-detail-render.js` — small helper if the first-N/rest
+  split is cleaner in JS than inline EJS.
+- (Possibly) `packages/channels/channel-detail-render.js` — only if channel detail
+  tile lists also need the cap.
+
+## Deferred / separate
+
+- The reporter's "not 100% ready" is treated as bug B (tile wall). If, after the
+  fix, Tom or the reporter identifies a different specific defect, that's a new
+  ticket — this PR does not chase the vague remark further.
diff --git a/hugo/assets/css/sap-fundamental.src.css b/hugo/assets/css/sap-fundamental.src.css
index 22b17b25c..004faeb55 100644
--- a/hugo/assets/css/sap-fundamental.src.css
+++ b/hugo/assets/css/sap-fundamental.src.css
@@ -2772,7 +2772,11 @@ html.dark .tutorial-main img:hover {
     font-size: 1.5rem;
   }
   .mission-body,
-  .group-body {
+  .group-body,
+  .concept-page,
+  .topic-detail,
+  .channel-detail,
+  .channels-page {
     padding: 1rem;
   }
   .group-card {
@@ -3060,6 +3064,19 @@ html.dark .chroma .nd { color: #e2c5ff; font-weight: bold; }
 }
 
 
+/* #3095: container base rule for CAP/Hugo page bodies that render into the
+   shell's bare <main> with no shared wrapper. Without this the article/section
+   root sits flush to the viewport edge (reported on /concepts/, /channels/).
+   Values match the sibling .group-body/.mission-body rule for site consistency. */
+.concept-page,
+.topic-detail,
+.channel-detail,
+.channels-page {
+  max-width: 1280px;
+  margin: 0 auto;
+  padding: 1.5rem 2rem 3rem;
+}
+
 /* Phase 4.4 (#447 §9): concept-page "Videos teaching this" inline
    thumbnail. 120×68 hot-linked from i.ytimg.com (CSP `img-src` already
    allows). Sits inline with the row text — title + meta render to the
diff --git a/test/concept-page-container.test.js b/test/concept-page-container.test.js
new file mode 100644
index 000000000..73fa9a33d
--- /dev/null
+++ b/test/concept-page-container.test.js
@@ -0,0 +1,41 @@
+import { describe, it, expect } from 'vitest';
+import { readFileSync } from 'node:fs';
+import { join } from 'node:path';
+
+// #3095 — source-string guard (same style as test/hugo-css-fingerprint.test.js):
+// the repo has no CSS-render harness, so we assert on the CSS SOURCE file.
+// NOTE: edits must land in sap-fundamental.src.css (git-tracked source), never
+// the gitignored build output sap-fundamental.css.
+const src = readFileSync(
+  join(import.meta.dirname, '..', 'hugo/assets/css/sap-fundamental.src.css'),
+  'utf8',
+);
+
+describe('#3095 — concept/topic/channel container base rule', () => {
+  it('declares a desktop container rule with 1280px/centered/padded for all four roots', () => {
+    // Match the grouped rule that carries max-width (the desktop rule) — the
+    // mobile @media block lists the same four selectors but only sets padding,
+    // so anchor on a block containing max-width to avoid matching that one.
+    const rule = src.match(
+      /\.concept-page,\s*\.topic-detail,\s*\.channel-detail,\s*\.channels-page\s*\{[^}]*max-width[^}]*\}/,
+    );
+    expect(rule, 'grouped desktop base rule present').not.toBeNull();
+    expect(rule[0]).toMatch(/max-width:\s*1280px/);
+    expect(rule[0]).toMatch(/margin:\s*0 auto/);
+    expect(rule[0]).toMatch(/padding:\s*1\.5rem 2rem 3rem/);
+  });
+
+  it('adds the four roots to a mobile 1rem padding override', () => {
+    for (const r of ['.concept-page', '.topic-detail', '.channel-detail', '.channels-page']) {
+      expect(src, `${r} in a 1rem padding rule`).toMatch(
+        new RegExp(`${r.replace('.', '\\.')}[\\s\\S]{0,400}padding:\\s*1rem`),
+      );
+    }
+  });
+
+  it('does NOT fold the already-padded index classes into the grouped rule', () => {
+    expect(src).not.toMatch(
+      /\.concept-page,\s*\.topic-detail,\s*\.channel-detail,\s*\.channels-page,\s*\.concepts-index/,
+    );
+  });
+});

From 577b8297e6373d0515e9b9f18fb9b7d202e1456d Mon Sep 17 00:00:00 2001
From: Thomas Jung <thomas.jung@sap.com>
Date: Wed, 11 Nov 2026 14:10:52 -0500
Subject: [PATCH 2/2] fix(#3095): cap KG-relationship tile lists at 24 with
 no-JS <details> collapse

---
 hugo/assets/css/sap-fundamental.src.css | 19 +++++++
 srv/lib/concept-detail-render.js        | 25 +++++++++
 srv/lib/templates/concept-detail.ejs    | 73 ++++++++++---------------
 test/concept-detail-cap.test.js         | 54 ++++++++++++++++++
 4 files changed, 127 insertions(+), 44 deletions(-)
 create mode 100644 test/concept-detail-cap.test.js

diff --git a/hugo/assets/css/sap-fundamental.src.css b/hugo/assets/css/sap-fundamental.src.css
index 004faeb55..8b417750d 100644
--- a/hugo/assets/css/sap-fundamental.src.css
+++ b/hugo/assets/css/sap-fundamental.src.css
@@ -3077,6 +3077,25 @@ html.dark .chroma .nd { color: #e2c5ff; font-weight: bold; }
   padding: 1.5rem 2rem 3rem;
 }
 
+/* #3095: no-JS collapse for capped KG-relationship sections. The overflow past
+   the first N tiles lives in a <details>; style the summary as a text button. */
+.concept-card-grid__more {
+  margin-top: 0.75rem;
+}
+.concept-card-grid__more > summary {
+  cursor: pointer;
+  display: inline-block;
+  padding: 0.375rem 0.75rem;
+  font-weight: 600;
+  color: var(--sapButton_Emphasized_Background, var(--sapLinkColor, #0070f2));
+}
+.concept-card-grid__more > summary:hover {
+  text-decoration: underline;
+}
+.concept-card-grid__more[open] > summary {
+  margin-bottom: 0.75rem;
+}
+
 /* Phase 4.4 (#447 §9): concept-page "Videos teaching this" inline
    thumbnail. 120×68 hot-linked from i.ytimg.com (CSP `img-src` already
    allows). Sits inline with the row text — title + meta render to the
diff --git a/srv/lib/concept-detail-render.js b/srv/lib/concept-detail-render.js
index 1c04819e0..56197f6c7 100644
--- a/srv/lib/concept-detail-render.js
+++ b/srv/lib/concept-detail-render.js
@@ -24,6 +24,30 @@ function escapeHtml(value) {
     .replace(/'/g, '&#39;');
 }
 
+// #3095: KG-relationship sections (teaches/requires/requiredBy/relatedTo) can
+// grow unbounded — hub concepts render hundreds of tiles (e.g. 235 on
+// sap-btp-fundamentals). renderCappedGrid renders the first `visible` items as
+// direct <li> children and moves any overflow into a no-JS <details> collapse,
+// so the initial view stays readable while every link remains reachable with
+// JS disabled. renderItem(item) returns the <li>…</li> HTML for one item and is
+// responsible for its own escaping (callers use escapeHtml). Returns the full
+// `<ul class="concept-card-grid">…</ul>` markup. No <details> when the list
+// fits within `visible`.
+function renderCappedGrid(items, renderItem, { visible = 24, label = 'items' } = {}) {
+  const list = Array.isArray(items) ? items : [];
+  const head = list.slice(0, visible);
+  const rest = list.slice(visible);
+  const liOf = (arr) => arr.map(renderItem).join('');
+  let out = `<ul class="concept-card-grid">${liOf(head)}</ul>`;
+  if (rest.length) {
+    out += `<details class="concept-card-grid__more">`
+      + `<summary>Show all ${escapeHtml(String(list.length))} ${escapeHtml(label)}</summary>`
+      + `<ul class="concept-card-grid">${liOf(rest)}</ul>`
+      + `</details>`;
+  }
+  return out;
+}
+
 /**
  * Renders one concept detail page BODY — the `<article class="concept-page">`
  * fragment that goes inside `<main>`. The full document is produced by the
@@ -72,6 +96,7 @@ export function renderConceptDetail(concept, phase4) {
     communityEvents: p4.communityEvents || [],
     escapeHtml,
     renderMarkdown,
+    renderCappedGrid,
   };
   // Wrap in <main> so the served concept page has a top-level landmark. The
   // __shell__ chrome only provides a <!-- MAIN --> marker (its own <main> was
diff --git a/srv/lib/templates/concept-detail.ejs b/srv/lib/templates/concept-detail.ejs
index 5c729b91b..35e4b3431 100644
--- a/srv/lib/templates/concept-detail.ejs
+++ b/srv/lib/templates/concept-detail.ejs
@@ -50,19 +50,19 @@
   <% if (teaches.length) { %>
   <section class="concept-page__section">
     <h2>Tutorials that teach this</h2>
-    <ul class="concept-card-grid">
-      <% teaches.forEach(t => { %>
-      <li>
-        <a class="concept-card" href="/tutorials/<%= t.slug %>/">
-          <span class="concept-card__type concept-card__type--tutorial">Tutorial</span>
-          <span class="concept-card__title"><%= t.title %></span>
-          <% if (t.experienceTag || t.stepCount) { %>
-          <span class="concept-card__meta"><% if (t.experienceTag) { %><span class="kg-difficulty"><%= t.experienceTag %></span><% } %><% if (t.experienceTag && t.stepCount) { %> · <% } %><% if (t.stepCount) { %><%= t.stepCount %> step<%= t.stepCount === 1 ? '' : 's' %><% } %></span>
-          <% } %>
-        </a>
-      </li>
-      <% }) %>
-    </ul>
+    <%- renderCappedGrid(teaches, t => {
+      const meta = (t.experienceTag || t.stepCount)
+        ? `<span class="concept-card__meta">`
+          + (t.experienceTag ? `<span class="kg-difficulty">${escapeHtml(t.experienceTag)}</span>` : ``)
+          + (t.experienceTag && t.stepCount ? ` · ` : ``)
+          + (t.stepCount ? `${escapeHtml(String(t.stepCount))} step${t.stepCount === 1 ? '' : 's'}` : ``)
+          + `</span>`
+        : ``;
+      return `<li><a class="concept-card" href="/tutorials/${escapeHtml(t.slug)}/">`
+        + `<span class="concept-card__type concept-card__type--tutorial">Tutorial</span>`
+        + `<span class="concept-card__title">${escapeHtml(t.title)}</span>`
+        + meta + `</a></li>`;
+    }, { label: 'tutorials' }) %>
   </section>
   <% } %>
 
@@ -171,49 +171,34 @@
   <% if (requires.length) { %>
   <section class="concept-page__section">
     <h2>Prerequisites</h2>
-    <ul class="concept-card-grid">
-      <% requires.forEach(r => { %>
-      <li>
-        <a class="concept-card" href="/concepts/<%= r.slug %>/">
-          <span class="concept-card__type concept-card__type--concept">Concept</span>
-          <span class="concept-card__title"><%= r.title %></span>
-          <% if (r.description) { %><span class="concept-card__body"><%= r.description %></span><% } %>
-        </a>
-      </li>
-      <% }) %>
-    </ul>
+    <%- renderCappedGrid(requires, r =>
+      `<li><a class="concept-card" href="/concepts/${escapeHtml(r.slug)}/">`
+      + `<span class="concept-card__type concept-card__type--concept">Concept</span>`
+      + `<span class="concept-card__title">${escapeHtml(r.title)}</span>`
+      + (r.description ? `<span class="concept-card__body">${escapeHtml(r.description)}</span>` : ``)
+      + `</a></li>`, { label: 'prerequisites' }) %>
   </section>
   <% } %>
 
   <% if (requiredBy.length) { %>
   <section class="concept-page__section">
     <h2>Concepts that build on this</h2>
-    <ul class="concept-card-grid">
-      <% requiredBy.forEach(r => { %>
-      <li>
-        <a class="concept-card" href="/concepts/<%= r.slug %>/">
-          <span class="concept-card__type concept-card__type--concept">Concept</span>
-          <span class="concept-card__title"><%= r.title %></span>
-        </a>
-      </li>
-      <% }) %>
-    </ul>
+    <%- renderCappedGrid(requiredBy, r =>
+      `<li><a class="concept-card" href="/concepts/${escapeHtml(r.slug)}/">`
+      + `<span class="concept-card__type concept-card__type--concept">Concept</span>`
+      + `<span class="concept-card__title">${escapeHtml(r.title)}</span>`
+      + `</a></li>`, { label: 'concepts' }) %>
   </section>
   <% } %>
 
   <% if (relatedTo.length) { %>
   <section class="concept-page__section">
     <h2>Related concepts</h2>
-    <ul class="concept-card-grid">
-      <% relatedTo.forEach(r => { %>
-      <li>
-        <a class="concept-card" href="/concepts/<%= r.slug %>/">
-          <span class="concept-card__type concept-card__type--concept">Concept</span>
-          <span class="concept-card__title"><%= r.title %></span>
-        </a>
-      </li>
-      <% }) %>
-    </ul>
+    <%- renderCappedGrid(relatedTo, r =>
+      `<li><a class="concept-card" href="/concepts/${escapeHtml(r.slug)}/">`
+      + `<span class="concept-card__type concept-card__type--concept">Concept</span>`
+      + `<span class="concept-card__title">${escapeHtml(r.title)}</span>`
+      + `</a></li>`, { label: 'related concepts' }) %>
   </section>
   <% } %>
 
diff --git a/test/concept-detail-cap.test.js b/test/concept-detail-cap.test.js
new file mode 100644
index 000000000..488b63947
--- /dev/null
+++ b/test/concept-detail-cap.test.js
@@ -0,0 +1,54 @@
+import { describe, it, expect } from 'vitest';
+import { renderConceptDetail } from '../srv/lib/concept-detail-render.js';
+
+// #3095 — hub concepts (e.g. sap-btp-fundamentals, 235 "build on this") dump
+// hundreds of tiles. KG-relationship sections cap at N=24; overflow moves into
+// a no-JS <details>. Phase-4 external sections are left uncapped.
+const mk = (n) => Array.from({ length: n }, (_, i) => ({ slug: `c${i}`, title: `Concept ${i}` }));
+const base = { slug: 'x', name: 'X', description: '' };
+const sectionOf = (body, heading) =>
+  body.match(new RegExp(`${heading}[\\s\\S]*?</section>`))?.[0] ?? '';
+
+describe('#3095 — KG relationship cap (N=24)', () => {
+  it('no <details> when requiredBy.length === 24 (boundary)', () => {
+    const { body } = renderConceptDetail({ ...base, requiredBy: mk(24) }, {});
+    const sec = sectionOf(body, 'Concepts that build on this');
+    expect(sec).not.toMatch(/<details/);
+    expect((sec.match(/<li>/g) || []).length).toBe(24);
+  });
+
+  it('one item inside <details> when requiredBy.length === 25 (boundary)', () => {
+    const { body } = renderConceptDetail({ ...base, requiredBy: mk(25) }, {});
+    const sec = sectionOf(body, 'Concepts that build on this');
+    expect(sec).toMatch(/<details/);
+    const inside = sec.match(/<details[\s\S]*?<\/details>/)[0];
+    expect((inside.match(/<li>/g) || []).length).toBe(1);
+    expect(sec).toMatch(/Show all 25/);
+  });
+
+  it('235-item hub collapses overflow (24 visible, 211 in details)', () => {
+    const { body } = renderConceptDetail({ ...base, requiredBy: mk(235) }, {});
+    const sec = sectionOf(body, 'Concepts that build on this');
+    const inside = sec.match(/<details[\s\S]*?<\/details>/)[0];
+    expect((inside.match(/<li>/g) || []).length).toBe(211);
+    // total visible + collapsed === 235
+    expect((sec.match(/<li>/g) || []).length).toBe(235);
+  });
+
+  it('escapes titles rendered inside the collapsed overflow half', () => {
+    const items = mk(25);
+    items[24].title = '<script>x</script>';
+    const { body } = renderConceptDetail({ ...base, requiredBy: items }, {});
+    expect(body).not.toMatch(/<script>x<\/script>/);
+    expect(body).toMatch(/&lt;script&gt;/);
+  });
+
+  it('leaves an uncapped external section (phase4 videos) untouched', () => {
+    const { body } = renderConceptDetail(
+      { ...base },
+      { videos: mk(30).map((v) => ({ ...v, url: 'https://example.test' })) },
+    );
+    const sec = sectionOf(body, 'Videos teaching this');
+    if (sec) expect(sec).not.toMatch(/<details/);
+  });
+});