message: Extend header correctly on rounded-corner devices
diff: @@ -16,18 +16,15 @@ $header-height: 44px;
  top: 0;
  left: 0;
  right: 0;
  - padding-top: env(safe-area-inset-top);
  - @include phone-portrait {
  - background: #000;
  - }
  }
  // The actual header contents - the header element is just a container
  .header {
  width: 100%;
  - box-sizing: border-box;
  + box-sizing: content-box;
  padding-left: env(safe-area-inset-left, 2px);
  padding-right: env(safe-area-inset-right);
  + padding-top: env(safe-area-inset-top);
  height: $header-height;
  display: flex;
  flex-direction: row;
  