Define padding for header icons

[norbye]

Description

Changes:

• Add flex-shrink: 0; to prevent profile picture to shrink to an oval when it doesn't have enough space. This rather forces the Abakus-logo to scale down if the screen is too small (however with screens that small we have bigger problems than the logo..).
• Add padding to the button element wrapping header icons, as it was not defined (aka left up to the browser to decide). Thus caused Safari to have twice the paddings that Chrome has, and as such the header looked very off on iPhones.

Chrome's default padding for buttons is 1px 6px, so the added 0 7px looks quite similar to what it looks like in my browser - except that it's now the same across browsers.

Result

Note that the before-version doesn't look that off in this preview, but that is only because I couldn't login - and when you're not logged in it doesn't show as many icons in the header.

	Before	After
iPhone 13
Chrome devtools with the same viewport

Testing

• I have thoroughly tested my changes.

Please describe what and how the changes have been tested, and provide instructions to reproduce if necessary.

---

Resolves ABA-592

[linear]

ABA-592 Incorrect profile picture scale on iOS

On iOS, the profile picture in the top right corner deforms into an oval. Seems to be caused by incorrect positioning of the other header elements due to webkit.

IMG_0396.jpg