Dismiss notice overlap fix

[ianbelanger79]

Better targets the dismissable notices to add more padding to the right side to avoid overlaping of the text.

Fixes #11156

[desrosj]

I was able to replicate the issue described in #11156. Tested this branch and it fixed the issue for me! Changes look good.

[youknowriad]

components is a generic package, we should avoid using classNames inserted in other packages that are not dependencies of the current pages. For instance, this component can be used in pages outside the Gutenberg page.

[youknowriad]

Why is this className needed here? Ideally if the fix here is generic, we can do it without this className, if it's specific to the notices used in the editor, we should override the default styles in the edit-post package instead.

[ianbelanger79]

That className is needed because the original class of .components-notice.is-dismissible, which adds the right padding, gets overridden by this .edit-post-layout .components-notice-list .components-notice. So the idea was to more specifically target the dismissable notices with .edit-post-layout .components-notice-list .components-notice.is-dismissible. You can see the issue here #11156. I'm all for putting this in another place if that makes more sense, I just wasn't sure where it should go.

[youknowriad]

Yes, let's move it to where the overriding ( .edit-post-layout .components-notice-list .components-notice ) happens :)

[youknowriad]

https://github.com/WordPress/gutenberg/blob/master/packages/edit-post/src/components/layout/style.scss this file I think.

[gziolo]

@ianbelanger79 do you plan to address the feedback shared by @youknowriad?

[gziolo]

After some more in-depth check, I figured out that this PR was recently fixed by @Naerriel in #13371. I'm closing this one as a duplicate. @ianbelanger79 thank you for the time spent on this code change.