fix: HeaderConfig impacts layout of Screen's contents

[alduzy]

Description

This PR fixes headerConfig's incorrect layout with custom subviews after recent changes in #2325.

Note

@kkafar:
Previously, before #2325, all children of the headerConfig component have been positioned absolutely, thus the headerConfig was always of height 0, not impacting layout of other components. After #2325, headerConfig's children are positioned using flexbox. This implies that it has no longer height of 0, thus it impacts the layout of other other elements, in particular ScreenContentWrapper, which is offset by the height of the highest header config subview.

The initial idea to solve this was to set height: 0; overflow: visible, however, for some yet unknown reason the subviews become invisible with such styles set of headerConfig. Note that if you set the height: 1 it works as expected.

Due to above hindrance we decided to position the headerConfig approximately at the position of native header, by setting top: -100%. To prevent the headerConfig from blocking gestures we set pointerEvents: 'box-none'.

In the end I want to note, that it would be best if we came out with solution that excludes headerConfig from layout as it was before #2325.

Changes

• added Test2395.tsx repro
• adjusted headerConfig's styles

Screenshots / GIFs

Before

After

Test code and steps to reproduce

• use Test2395.tsx repro

Checklist

• Included code example that can be used to test this change
• Ensured that CI passes

[kkafar]

From initial testing looks good, we can release it in beta.