Improve styling on the reverse dependencies page

[dancristianb]

Resolves #3286

The reverse dependencies index page could use some styling touchups

• The header should be properly aligned (width should be 100% and not 90%)
• Search bar should be better aligned and possibly larger to fit the prompt text "Search reverse dependencies Gems". Maybe something that looks like the advanced search
• If there are no reverse dependencies, do not provide a search

I think we should be OK with reusing the already existing home__search-wrap, home__search, and home__search__icon classes we use for the advanced to achieve what we want regarding the styles, let me know what you think 😀

Regarding the conditional render, I've tried sticking to the pattern and used @reverse_dependencies.present? to render/not render the search bar and results. Got a question here, should we maybe add a note something like "This gem has no reverse dependencies" just to be sure it's clear why we don't render anything? 😀

I've included a series of screenshots with the before and after below.

Before the updates

With reverse dependencies present

Without reverse dependencies present

After the updates

With reverse dependencies present

Without reverse dependencies present

[dancristianb]

This one is now ready for review. Let me know what you think, thanks! 🙏

[simi]

Hello! Thanks for the PR!

Would it be possible to keep the content inside the layout? I tried to explain with the red arrow on image. See on gem page nothing is crossing the arrow which is inline with top grey border.

On reverse deps page, some content escapes the layout.

[simi]

Got a question here, should we maybe add a note something like "This gem has no reverse dependencies" just to be sure it's clear why we don't render anything?

Yes, that makes sense to me.

[codecov]

Codecov Report

Merging #3760 (7d31826) into master (304b7dc) will decrease coverage by 0.01%.
The diff coverage is n/a.

❗ Current head 7d31826 differs from pull request most recent head 0fdf7cc. Consider uploading reports for the commit 0fdf7cc to get more accurate results

@@            Coverage Diff             @@
##           master    #3760      +/-   ##
==========================================
- Coverage   98.81%   98.81%   -0.01%     
==========================================
  Files         214      213       -1     
  Lines        5250     5229      -21     
==========================================
- Hits         5188     5167      -21     
  Misses         62       62              

see 6 files with indirect coverage changes

[dancristianb]

Thanks @simi for the comments! 🙏 I updated the reverse dependencies page layout so it now matches the gems page.

And I've added in this This gem has no reverse dependencies. helper text right, hope that's OK.

Let me know what you think, thanks!

[simi]

Looks good. Thanks for the PR!