Skip to main content

Rentiva v4.34.2 — Transfer-card icon styling hotfix

· 3 min read
MaxHandMade
MaxHandMade
Maintainer

A pure CSS hotfix on top of v4.34.1. The favorite (heart) and compare icons on the transfer-search results page rendered as oversized solid-blue blocks instead of the small round white icons used on the rental grid/list. v4.34.2 restores parity.

What broke​

A user clicked through from a Popular Routes card to the transfer-search results and noticed the heart and compare buttons looked nothing like their rental-grid counterparts:

  • Expected: 32×32 round button, white translucent background, red heart outline icon, top-right of the card image.
  • Got: 100×55px solid-blue block with a tiny white heart inside, padded like a generic CTA button.

PHPUnit was green. PHPCS was clean. But the icons in the live DOM were broken.

Root cause​

vehicle-card.css styles the icon buttons with this rule:

.mhm-vehicle-card .mhm-card-favorite {
  width: 32px; height: 32px; padding: 0;
  border-radius: 50%; background: rgba(255, 255, 255, 0.9);
  /* ...etc */
}

The .mhm-vehicle-card parent prefix is not decorative — it's a deliberate specificity hack. The CSS comment in the file even says so:

Parent selector raises specificity to (0,2,0) — overrides Astra's inline button rule (0,0,1) without needing !important. Works across themes.

Astra (and other themes) ship a generic button style that pads buttons and applies a solid background. The plugin's intent was to outweigh that without an !important arms race, by leaning on selector specificity.

Transfer cards, however, are rendered with .mhm-transfer-card as the parent class — not .mhm-vehicle-card. So the styling rule never matched, the (0,0,1) Astra rule won by default, and you got a 100×55px solid-blue button.

The buttons themselves use the same markup (.mhm-card-favorite / .mhm-card-compare) — only the parent wrapper class differs.

Fix​

List both parents in each selector:

.mhm-vehicle-card .mhm-card-favorite,
.mhm-transfer-card .mhm-card-favorite {
  /* same 32×32 round-icon rules as before */
}

.mhm-vehicle-card .mhm-card-compare,
.mhm-transfer-card .mhm-card-compare {
  /* same */
}

Specificity stays at (0,2,0), Astra's button rule is still outweighed without !important, and the icon styling is now identical across rental and transfer surfaces.

What this taught us​

PHPUnit + PHPCS are necessary but not sufficient gates. CSS scoping bugs slip through both:

  • PHPUnit doesn't see CSS at all.
  • PHPCS sees CSS as text, not as rules-applied-to-DOM.

The only signal that catches this class of bug is looking at the live DOM. v4.34.0 and v4.34.1 ran the runtime smoke test on the homepage Popular Routes section — and that section was correct. The transfer-search results page was a separate surface that the smoke test didn't visit. v4.34.2 closes the loop: when a feature touches multiple downstream surfaces, the smoke test has to follow the click path, not just inspect the entry point.

Compatibility​

  • No license-server upgrade.
  • No breaking changes — the affected CSS only widens the rule set; nothing existing breaks.

— GitHub release