fix: #3622949 Lay out the shipped podcast pages the way the design does (!27) · Merge requests · project / rightup

Problem

The RightUp site template ships /podcasts and /podcasts/last-call as Canvas pages, and ships the podcast episode's full content template. All three differ from the design frames they came from in ways a visitor sees.

Show page (/podcasts/last-call)

The episode list sits on a black band. The design puts it on the page's white ground, with black titles and a 60%-black summary.
The episode eyebrow and the circular play control are the mint accent. The design uses brand tertiary for both.
The row rules are border-light, a hairline meant for dark bands.
The design's View More Episodes action under the list is missing entirely.
All three "More Podcasts" cards carry an empty Button text, so none renders the design's "View Show →".
The cover art is in the leading column; the design puts the copy first and the cover art at the end.

Landing page (/podcasts)

Five of the six show cards carry an empty Button text, so only "Last Call" renders a "View Show →".
The "Last Call" card carries a four-line summary where every other card has two, so its meta line and action sit lower than the rest of the row and the grid reads as broken.

Episode page (the node.podcast.full template)

The episode number is stored on every episode but never rendered. The design shows it as an "EPISODE 17" eyebrow above the title.
Both audio players carry the node title as their own label, so the episode title is printed twice — once as the h1 and again immediately under it. The design has no label above the player.

Solution

Config only. No component is added, and every value below was already an option on the components these pages use.

Drop background_color / text_color from the episodes section so it takes the page's white ground, and drop text-white from the titles and summaries inside it. White copy is kept everywhere the band is genuinely dark — the banner and the newsletter band both sit inside these pages.
Episode eyebrow to text-tertiary, the card's Icon color to bg-tertiary.
The "Hosted by … · N Mins" line to text-subtle-text, the enum value that matches the design's 60% black.
Row rules to border-black; the two section labels' rules to border-tertiary.
Add the View More Episodes action: atoms/button, btn-dark, rounded-0, left-aligned.
Give every podcast card on both pages a "View Show" Button text and a URL.
Flip the show banner to 80-20 and move the cover art to the trailing column.
Shorten the "Last Call" card summary to the design's one sentence, which is what makes the grid line up.
Size the show page's episode eyebrows taxonomy-lg: the design has one taxonomy size, 12px, and they were set to the 10px small modifier.
Add an atoms/taxonomy eyebrow to the episode banner, bound to field_episode_number with a Prefix of Episode, and remove the duplicated title input from both players.

Depends on

The eyebrow needs the prefix prop and the integer-capable label added to atoms/taxonomy in the theme. Without that MR the eyebrow's pinned component_version does not resolve and the episode banner renders a Twig error, so that one merges first.

Issue

https://www.drupal.org/project/rightup/issues/3622949

Testing

Verified in Chromium on a Drupal CMS + RightUp site, reading computed styles rather than class names.

	before	after	design
episode band	`rgb(0, 0, 0)`	the page's white ground	white
episode eyebrow	mint	`rgb(79, 70, 225)`	`#4f46e1`
play control	mint, 48px	`rgb(79, 70, 225)`, 48px circle	`#4f46e1`, 48px
"Hosted by …" line	`text-secondary`, too faint on white	`rgba(0, 29, 56, 0.7)`	60% black
View More Episodes	absent	`rgb(0, 29, 56)`, white ink, `border-radius: 0`	black, square
show cards with an action	1 of 3 / 1 of 6	3 of 3 / 6 of 6	all
landing card heights	ragged	all six 556px, two clean rows	even grid
show page eyebrow size	10px	12px, `letter-spacing: 0.96px`, weight 500, `rgb(79, 70, 225)` on all seven	12px, Medium, 0.96px
episode eyebrow text	absent	`EPISODE 17`, `rgb(0, 245, 212)`, 12px, weight 500, `letter-spacing: 0.96px`	`#00f5d4`, 12px, Medium, 0.96px
episode title	printed twice	once	once

A scripted sweep over every section on the show page found no text/background pair within 60 points of luminance of each other, which is how the two dark bands were confirmed to have kept their white copy.

At 375px: no horizontal overflow (document.documentElement.scrollWidth 360 against a 375 viewport), the six landing cards stack to full width, the episode rows keep the play control at the end as the mobile frame does, and the player's transport group and scrubber wrap onto two rows.

All three URLs return 200 to an anonymous request, with 6 / 3 / 0 "View Show" actions and the View More Episodes action where expected. Zero console errors on all three; the only console output is the known drimage-srcset and font-preload warnings.

"Testing to ensure no regression" is left unticked — the remote pipeline decides that.

AI-Generated: Yes

Evidence

Captured as an anonymous visitor at 1920x1080 on a fresh Drupal CMS site with the RightUp site template, scrolled first so every Drimage placeholder had been swapped for its derivative.

Landing page — all six show cards carry the design's "View Show →", and the Last Call summary is two lines like the rest, so the row no longer reads as broken.

Show page — the episode list sits on the page's white ground with black titles, the eyebrow and circular play control are brand tertiary, the row rules are tertiary rather than the dark-band hairline, View More Episodes is present, and all three More Podcasts cards render their action. The banner keeps its white copy, since that band is genuinely dark.

Episode page — the stored episode number renders as the design's eyebrow, and the title appears once. Measured on this render: the eyebrow reads EPISODE 16, the h1 text occurs exactly once in main, and the player is a single <audio preload="none">.

Checkpoints:

Edited Sep 14, 2026 by Rajab Natshah

fix: #3622949 Lay out the shipped podcast pages the way the design does