fix(mobile): Various mobile improvements

[liwoyadan]

(Hope I'm doing this right...! This is like my third time ever making a PR so let me know if I should be doing anything differently...)

A few various little mobile tweaks that I've put together while working on site layouts. The smallest screen size I've tested all of these on is 360px - which is generally the smallest common smartphone width these days - but they should be fine on 320px (the size of an iPhone 5/iPod Touch) as well.

An overview of the changes (with visuals):

1. Masterlist Search Box
   Original // Modified
   Gives certain fields a set width property so that they don't overflow out of the box on smaller screens, as well as adjusting the columns for trait rows so that they aren't so squished and are more legible on smaller viewports. I also gave the rarity field a slightly adjusted right margin so that rarity and species fields aren't stuck together on mobile.

2. Character Profiles
   Removed the set max-height and max-width on the character's image and instead replaced it with the img-fluid class so that larger images stop overflowing the site's layout.

3. User Profiles
   Original // Modified
   I've recoded the top of user profiles - while keeping it as identical looking as I can - so that the avatar is no longer floating and instead the avatar and information are within responsive rows. They're also centered so it looks nicer. This should fix avatars/usernames formatting weirdly based on username length. Information rows and columns have also been adjusted slightly so that text stops overlapping each other on certain viewports. I've also given the column for the comment mention box a breakpoint so it isn't so squished and elongated on mobile.

4. Mobile Layout (Headers)
   
   Adjusted the CSS very slightly so that there is now no longer a blank space between the mobile sidebar header and main content, as well as fixing an issue on tablet screens where the mobile sidebar header would detach itself from beneath the navigation bar.
   Note that with long usernames, or on navbars that have extra links/dropdowns, there will still be a few pixels (nearing the 767px mark in width) where the navigation bar will slightly overlap the mobile sidebar header (this is due to the navbar's contents being too long and pushing content down, causing a taller navbar). A fix for that would be to adjust the navigation bar's overall expand breakpoint to lg, but I've left that alone as it's largely a case-by-case issue based on individual navbar content and usernames.

[ScuffedNewt]

please merge asap ty xxxx

[itinerare]

Looks like there's a conflict kicking around somewhere? But otherwise this looks good! Thanks for taking the time to put this together, too.
Love the thorough notes and screencaps and all! It's very helpful, especially for something like this.

[liwoyadan]

There we go, conflict dealt with! :] If I come across more mobile tweaks in the future I'll be sure to bundle 'em up and PR.

[itinerare]

Much appreciated!