RRM setup banner image doesn't appear on some breakpoints

[kelvinballoo]

Bug Description

While testing RRM, I noticed that on Desktop Safari, there are some breakpoints that will not show the image at all.

• Refer to the video below for the desktop safari

  Safari.image.disappears.mov

• I went on to test this on smaller breakpoint on an iPhone 15 Pro max (real) on Safari and Chrome browser. I could not see the graphic

  Safari

  

  Chrome
  

Steps to reproduce

1. Enable RRM feature flag
2. Go to SK dashboard on Desktop Safari (or any of the devices mentioned in the description)to spot the RRM setup banner and resize the window to a smaller breakpoint until the image disappears.

Screenshots

Additional Context

• PHP Version:
• OS: [e.g. iOS]
• Browser: [e.g. chrome, safari]
• Plugin Version: [e.g. 22]
• Device: [e.g. iPhone6]

---

Do not alter or remove anything below. The following sections will be managed by moderators only.

Acceptance criteria

• When viewing the RRM Setup CTA Banner at narrow breakpoints on the devices/browsers listed above, the banner should be displayed with its graphic below the buttons, as seen for example here in Chrome:

Implementation Brief

• Add flex: 1 to the .googlesitekit-setup-cta-banner__svg-wrapper svg rule:
  

  site-kit-wp/assets/sass/components/reader-revenue-manager/_googlesitekit-rrm-setup-cta-banner.scss

  Lines 65 to 68 in ffe957d

  	.googlesitekit-setup-cta-banner__svg-wrapper {
  	svg {
  	max-height: 143px;

Test Coverage

• No new tests needed.

QA Brief

• Follow the steps to reproduce and verify the graphic does appear below the buttons as expected.

Changelog entry

• Fix a bug that prevented the appearance of the Reader Revenue Manager setup banner graphic.

[nfmohit]

IB ✅

[kelvinballoo]

QA Update ✅

• Verified on Desktop Safari (on MacOS Sonoma) across a few breakpoints and the image is appearing accordingly.

  

  

• Verified on iPhone 15 Pro Max (Safari) and the graphic is showing as expected.

  

• Verified on other browsers to ensure no regression : Chrome, Firefox, Edge. All are showing the graphic as expected.

  Edge:

  

  Firefox:

  

  Chrome:

  

Moving ticket to approval.