Style the search results page listing and filter rail

Problem/Motivation

The Search-Listing page of the VBN Stylesheet design (node 13058:23852) lists each result as a horizontal row — an image beside a category eyebrow, a title, a summary and a byline — with the filter rail alongside it.

The row itself needs no new component (see the proposed resolution). What the theme does not provide is the page's own furniture. Measured on a fresh install at 1440px:

• The results page's search field does not match the design's 864x46 group.
• Date Published is a Views grouped exposed filter, and its fieldset renders as a card, so its radio rows sit indented and out of rhythm with the facet checkboxes above them.
• Listing rows run together with no separation.
• Facet widgets keep the browser's 32px list indent, so Category and Content Type sit offset from their own headings.

Steps to reproduce

1. Install the RightUp site template from 1.0.x-dev on Varbase 11 (Drupal ~11.4, PHP 8.4), or on Drupal CMS.
2. Open /search in a 1440px viewport and run a search.
3. Compare the search field, the row rhythm and the three filter groups against the Search-Listing page in the design.

Proposed resolution

Reuse the theme's existing Featured Card; add no new component. sdc.vartheme_bs5_rightup.card-featured is already a horizontal image-and-text row — media_position: start | end, media_image, ratio, fit, stretched_link and a content slot, with no icon — and at columns_*_size: 04_08 it renders the image at 261x196 against the design's 260x195. One pixel, from rounding, and with no hard-coded width.

Neither of the other candidates can do it: Impressed Card is media_position: top | bottom only, and Horizontal Text Icon Card forces a play icon — which is why #3621523 was closed won't fix for trying to extend it.

So this change adds only what the card does not own:

• The results page's own search field, as the design's 864x46 group: the field at 762 and the submit at 103 butted against it, square, sharing the header bar's metrics. Keyed on the form id, because the results page is a Drupal Canvas page whose body carries canvas-page path-page, never path-search.
• The Date Published group: the fieldset's card chrome is dropped, and Drupal's radio rows are given the same Bootstrap .form-check geometry the facet checkboxes above them already use, so the third group keeps the rhythm of the first two.
• 32px and a hairline rule between listing rows — listing rhythm, rather than anything a card should carry.
• A facet widget is a list of filters, not a bulleted list, so it loses the 32px list indent that left Category and Content Type offset from their own headings.

Two files, 271 insertions, zero deletions. CSS is rebuilt through the theme's own webpack and stylelint chain, and stylelint is clean.

Screenshots

Captured anonymously on a fresh Drupal CMS build and install of the packaged RightUp recipe.

The results page — keyword bar, result rows and the filter rail:

Scrolled, so the three filter groups and the row rhythm are visible together:

Relationship to the RightUp site template. The page itself is built in rightup#3622804. This theme change should merge first so the page lands styled, but it is not a blocker: a fresh install of the site template without it renders the page unstyled rather than failing, because no component is missing.

Remaining tasks

• ✅ File an issue
• ✅ Addition/Change/Update/Fix
• ✅ Testing to ensure no regression — verified on a fresh Drupal CMS build and install: the results page renders 10 rows and 42 facet items with zero errors.
• ❌ Automated unit/functional testing coverage
• ➖ Developer Documentation support
• ➖ User Guide Documentation support
• ❌ UX/UI designer responsibilities
• ❌ Accessibility and Readability
• ❌ Reviewed by a human
• ❌ Code review by maintainers
• ❌ Full testing and approval
• ❌ Credit contributors
• ❌ Review with the product owner
• ✅ Update Release Notes
• ✅ Release

User interface changes

• The search results page's field, row rhythm and filter rail follow the design.

API changes

• N/A — no component is added, removed or changed. The change is CSS only.

Data model changes

• N/A

Release notes snippet

• Styled the search results page: the search field as the design's group, listing rows separated by a hairline rule, and the Category, Content Type and Date Published filter groups aligned to their headings.

AI-Generated: Yes