feat: #3614494 Match the More Events block to the design

Follows the design for the event full page's More Events block: three cards in one row, above a See All Events action.

Continues the event full page added in MR !16 on the same issue, #3614494.

What was wrong

• The related grid capped at two cards per row. Its prop_mappings set col_md-6 and left col_lg / col_xl / col_xxl empty, so three cards wrapped 2 + 1. ComponentsViewsStyle reads the column classes only from prop_mappings — nothing else on the style options is consulted. The grid now uses the same 3-up mapping as the events listing.
• The pager returned two items, the design shows three.
• There was no See All Events button.
• The cards sat flush against the button (0px), and overlapped the heading by 16px. The grid is a Bootstrap .row, which carries margin-top: calc(-1 * var(--bs-gutter-y)) = -24px; mt-0 removes that. mb-block supplies the design's 40px block rhythm below the cards.

Changes

All in recipe.yml, as config actions:

Key	Change
display.related.display_options.style	3-up prop_mappings, grid_utility_classes: gy-4 mt-0 mb-block
display.related.display_options.pager	items_per_page 2 → 3
canvas.content_template.node.event.full	adds the See All Events button (btn-primary, pill, → /events)

Verified in a real browser

Check	Result
Cards per row	3 (was 2 + 1)
Cell classes	col-12 col-sm-6 col-md-6 col-lg-4 col-xl-4 col-xxl-4
Equal card heights	yes
Cards → See All Events	40px (was 0px)
Heading → grid	+8px (was -16px, overlapping)
Content template validation	0 violations
Horizontal overflow	none

Depends on a theme change

mb-block is a 40px spacer added to Vartheme BS5 Horizon Aid for the design system's --spacing/block — Bootstrap's own scale jumps 24px to 48px, so no 40px step existed. That change ships separately in the theme; until it lands, mb-block is an unknown class and the gap falls back to 0.

Two things not done here

• Heading → grid is 8px, not the design's 40px. That 8px is the h2's own margin-bottom and the heading component exposes no spacing prop. Fixing it needs either the section's header_slot or a utility-classes prop on the heading component.
• I first placed the button in the section's footer_slot (semantically right, and it already carries the block rhythm). Canvas rendered that slot empty, so the button is in col_1 and the spacing comes from the grid's mb-block. The empty footer_slot looks like a genuine Canvas/section limitation worth its own issue.

Issue: https://www.drupal.org/i/3614494 MR: !17 (merged)

AI-Generated: Yes

---

---

Checkpoints:

• File an issue
• Addition/Change/Update/Fix
• Testing to ensure no regression
• Automated unit testing coverage
• Automated functional testing coverage
• UX/UI designer responsibilities
• Readability
• Accessibility
• Performance
• Security
• Documentation
• Code review by maintainers
• Full testing and approval
• Credit contributors
• Review with the product owner
• Release notes snippet
• Release