Improve check message

[ernilambar]

Tasks:

• Show check message above the result table (Fixes #200)

[ernilambar]

Before:

After:

cc: @swissspidy @felixarntz @mukeshpanchal27

[mukeshpanchal27]

Recoding for small plugin checks:

https://github.com/WordPress/plugin-check/assets/10103365/5dd24770-871e-4794-b832-81f658ccb607

[ernilambar]

To address this, we should consider adding error messages at the bottom as well, allowing users to view them without having to scroll back to the top. What do you think?

But also this wont fix the issue of shifting of output.

[felixarntz]

@ernilambar @mukeshpanchal27

To address this, we should consider adding error messages at the bottom as well, allowing users to view them without having to scroll back to the top. What do you think?

But also this wont fix the issue of shifting of output.

Both of this can be addressed. We can keep the notice only at the top, but we need to "reserve" the appropriate space for the notice. We can print a <style> tag on the page to make that happen (and also address https://github.com/WordPress/plugin-check/pull/341#discussion_r1434267845). Something like:

<style>
.plugin-check__results .notice:first-child {
    margin-top: # Whatever margin looks good
}

.plugin-check__results h4:first-child {
    margin-top: # Margin that is the same as the above margin plus the actual height of the notice
}
</style>

By doing that, the contents shouldn't shift any longer from the notice being added.

[ernilambar]

I have updated the PR with CSS. Currently I have added CSS to existing admin_footer() method because when I added new method to hook to admin_head, GitHub Action generate error like Too many public methods.