Small screen adjustments for mobile PWA usage

[logiczsniper]

Description

The current app on small screen sizes is not pretty and in some areas, not even usable. For users like myself that would prefer to use the PWA than the mobile app, this is unfortunate. This PR aims to make minor style adjustments where necessary in order to alleviate these issues!

Before	After

Changes proposed in this pull request that will only be noticeable on small screens:

• Add small margin to the feed page.
• Fix the menu opening animation.
• Add padding to the navbar buttons.
• Add small margin to library page content and fix loading skeleton width issue.
• Close the menu on click of library and groups buttons (the other two open a submenu).
• Make the search bar usable:
  • Reduce width.
  • Pin the popover to the screen so it no longer falls off the left side.
  • Change the layout of the items to make more effective use of space.
• Add padding to settings pages [TODO: gif]
• Fix spacing on profile / activity page [TODO: gif]
• Add padding to groups page [TODO: gif]
• Fix the enlarged feedback header (caused to due a hack in global css, this was fixed for other pages but not for feedback) [TODO: gif]
• Add margins in explore pages [TODO: gif]

Changes proposed in this pull request that will always be noticeable (regardless of screen size):

• Added small button to close search results.
• Simplified HTML structure for settings/linked accounts; simpler template, works on small screens and produces the same result (plus/minus a few pixels) [TODO: gif]

/cc @hummingbird-me/staff
^i will comment this when it is ready for review

[logiczsniper]

@Reinachan here it is :)
This was my first time using ember.js so if I did anything stupid lemme know!!

[logiczsniper]

Oh btw there is still more to do here but let's get this merged first before the PR gets any bigger 👍

[logiczsniper]

Oh shit i forgot to comment this in the end lol this can be reviewed
/cc @hummingbird-me/staff

[Reinachan]

This isn't your fault, but your changes made it more obvious. I'd suggest you change line 139 in _media_browse.scss to margin-left: 0;.

Before	After

Notice the bottom left of the library entries.

[Reinachan]

Thank you for the PR! This is generally pretty great! Just some minor things here and there that I've commented on :)

[Reinachan]

Your changes result in the searchbar being hidden by the results dropdown while typing on iOS (at least on my phone with the browser interface on the bottom). I'd suggest making this max height use the new dvh unit and have a fallback to vh.

max-height: 85vh; /* less likely to interfere with other stuff */
max-height: 90dvh;

[Reinachan]

Why is the margin larger for a full-page post than for the feed? This just feels inconsistent.

[Reinachan]

I'm not a fan of this change. At least not on smaller phones. It looks good on my OnePlus 6T but on my iPhone X, it takes up too much space. I suggest you add another media query for smaller screens.

@media (max-width: 380px) {
    margin-left: 2px;
    margin-right: 2px;
}

This also applies to the full-page posts.

[Reinachan]

Too much padding. The existing spacing is already good. Fix the Facebook button instead.

[Reinachan]

Refer to my comment on the spacing for feeds. Same applies here.