Improve profile page

[Ulincsys]

Description

• Improve profile page responsiveness
• Fix element overlap on some screen sizes
• Add sidebar folding on small screen sizes
• Update sidebar style
• Hide keys by default in App table

This PR fixes #2525

Signed commits

• Yes, I signed my commits.

[ABrain7710]

Overall it is a great improvement the icons look great and it is much more responsive than before, but there are 2 small things I noticed while testing it. The first is that only the first letter of the username is visible when the sidebar snaps to the top. The second is an especially minor one shown in the picture in the picture below. Basically, when you shrink the page horizontally there is a point where the sidebar expands and makes the sidebar awkwardly wide even though it didn't appear to need to change at that point. I know the column layout stuff can be a pain, so this might just be a weird case that is happening on my laptop screen but not on other screen sizes

[Ulincsys]

The truncation of the username when the sidebar is collapsed is intentional. I did that since there's no real way to ensure that the username fits within the allotted space at the xs and sm breakpoints, since we don't restrict the max length of usernames.

Ideally, we would just put a profile picture there in collapsed mode instead, but we also don't have the ability for users to upload profile pictures yet, so perhaps that can be a future update.

As for the sidebar width being too big on some screen sizes; yeah that was a struggle. 😅 I tried my best to actually learn how to use Bootstrap's breakpoints, instead of just brute forcing it like I've done in the past. I know there's a way to restrict the max width of a container, but I think it's not possible with the current structure of the DOM. It's definitely something that could be improved, but my main focus was just making sure that the page was actually accessible on every screen, since before it was really only useable on 1080p and higher resolutions.