Reader: Following Manage UI nits

[jancavan]

• Fix alignment of Follow(ing) buttons:

Before:

After:

• Fix white popover arrow

Before:

After:

• Follow(ing) icons alignment
• Limit Site Title, byline, and URL to a single line in Site Results

[matticbot]

Test live: https://calypso.live/?branch=fix/reader/som-nits

[jancavan]

To dos:

• Add search term to error message: Sorry, no sites match _yourquery_.
• Add error class to the search field

The following filter needs to display an error message as well just like it does currently:

• Add search term to error message: Sorry, no followed sites match _yourquery_.
• Add error class to the search field

/cc @samouri

[samouri]

Add search term to error message: Sorry, no sites match yourquery.

Lets keep this PR just to alignment issues. moving error handling to: #13834

[fraying]

@jancavan Is this (#13433) possible?

[fraying]

@jancavan Also, can the carrot in the popover be aligned with the icon, not the text? Like so?

[jancavan]

Fixed #13433 in 55b654f.

Also, can the carrot in the popover be aligned with the icon, not the text? Like so?

The positioning is being generated dynamically, but @samouri is this possible?

[samouri]

The positioning is being generated dynamically, but @samouri is this possible?

done in 3affcf6 🥕

[jancavan]

Thanks @samouri, that was clever 😄

Fixed #13433 in 55b654f.

This misaligned those without gravs/blavs. Taking a look at it again.

[jancavan]

I don't know why I didn't think of this solution the last time, but #13433 is fixed in: e3beee8

[samouri]

                 _-====-__-======-__-========-_____-============-__
               _(                                                 _)
            OO(              DEPLOY TRAIN                         )_
           0  (_                                                   _)
         o0     (_                                                _)
        o         '=-___-===-_____-========-___________-===-dwb-='
      .o                                _________
     . ______          ______________  |         |      _____
   _()_||__|| ________ |            |  |_________|   __||___||__
  (         | |      | |            | __Y______00_| |_         _|
 /-OO----OO""="OO--OO"="OO--------OO"="OO-------OO"="OO-------OO"=P
#####################################################################

[samouri]

seeing some weirdness still at small-medium widths like:

But that wasn't caused by this PR so 🚢

[jancavan]

Thanks @samouri. Happens in wide widths. it’s also tricky to correct it in Devdocs since we wrap it around a card width paddings. We don't have those paddings in SoM.