JITMs: Fix styling to work better with a popular plugin

[withinboredom]

@jeffgolenski and I worked together to fix some styling issues.

Fixes #9221

Changes proposed in this Pull Request:

Fix some spacing when a popular plugin is present:

Testing instructions:

1. Turn on Hello Dolly on a site with no plan and akismet inactive
2. View the comments page
3. See a jitm that doesn't collide with the hello dolly text

Proposed changelog entry for your changes:

No changelog entry is needed except maybe: Improved plugin compatibility

[jetpackbot]

	Warnings
⚠️	The PR is missing at least one [Status] label. Suggestions: [Status] In Progress, [Status] Needs Review

This is automated check which relies on PULL_REQUEST_TEMPLATE.We encourage you to follow that template as it helps Jetpack maintainers do their job. If you think 'Testing instructions' or 'Proposed changelog entry' are not needed for your PR - please explain why you think so. Thanks for cooperation 🤖

Generated by 🚫 dangerJS

[jeherve]

It worked well for me in Safari, Firefox, Chrome, and on Chrome for Android. 👍

[keoshi]

Works great in my testing!

[jeffgolenski]

Confirmed: This fix works well on all sized screens — mobile through desktop

[jeherve]

Cherry-picked to branch-6.7 in 1e807b2

[jeherve]

@jeffgolenski @withinboredom I'm seeing some issues now when Hello Dolly isn't installed:

• On the Dashboard > Updates page:

• On the Appearance > Themes page:

It looks like we have some missing padding on the right.

[jeherve]

Until the above is fixed, let's not ship that Hello Dolly fix: I reverted here:
b19f7fb

[jeffgolenski]

I'll take another look at it soon, @jeherve - thanks for the double check

[jeffgolenski]

I just moved this into the early value project to ensure it gets fixed this week!

[jeffgolenski]

@jeherve were you only testing this on Jurassic ninja sites?

I noticed that everything works and looks as intended, except for JN sites, because JN throws some CSS right in-between the screen meta box and the JITM, which is just messing with the JITM styles.

see how it works fine in a sandbox: https://cloudup.com/cMVM6scsT9h

But this CSS messed up the JITM declarations that we have written

because it gets in the way of
#screen-meta-links+.jitm-card { margin: rem( 40px ) 1.5385em 0 auto; }

[jeffgolenski]

@jeherve Here's an example of that I mean: https://cloudup.com/i5wSzcK89pb

[jeherve]

I don't recall, sorry. The screenshot above is from a JN site for sure, but I don't remember if I tested somewhere else as well. I'll test your patch in #10840!