Austenem/CAT-944 Entity header styling bugs

[austenem]

Summary

Fixes two WebKit/Safari-specific bugs that caused the entity header to become misaligned.

• Bug 1: vertically misaligned view buttons in entity header, caused by their parent height being calculated differently in WebKit.
• Bug 2: app and entity headers shifted off-screen to make room for helper panel after scrolling to a processed dataset section.

Design Documentation/Original Tickets

CAT-944 Jira ticket

Testing

Tested that both bugs were resolved in Chrome and Safari.

Screenshots/Video

Bugs on prod in Safari:

prod-ex720-2.mov

Resolved bugs locally in Safari:

safari-ex720-2.mov

Resolved bugs locally in Chrome:

chrome-ex1080.mov

Checklist

• Code follows the project's coding standards
  • Lint checks pass locally
  • New CHANGELOG-your-feature-name-here.md is present in the root directory, describing the change(s) in full sentences.
• Unit tests covering the new feature have been added
• All existing tests pass
• Any relevant documentation in JIRA/Confluence has been updated to reflect the new feature
• Any new functionalities have appropriate analytics functionalities added

[NickAkhmetov]

Good catch! I'm a bit astonished that there's such a dramatic discrepancy in browser behavior. Only change in mind is switching px to rem.

[austenem]

Good catch! I'm a bit astonished that there's such a dramatic discrepancy in browser behavior. Only change in mind is switching px to rem.

I was as well - I wouldn't have caught it if Safari wasn't my main browser! Good call with the rem.