[Bug]: Header border radius is fixed

[omurovec]

Current Behavior

The border-radius in the top right of the header is set to a fixed 24px creating an issue where the modal background pokes out behind when --onboard-modal-border-radius is set to any value less than 24px.

https://github.com/blocknative/web3-onboard/blob/01937e88b3eba3b2b6515aea0f5bd308ca81196d/packages/core/src/views/connect/Index.svelte#L335

Expected Behavior

The top right border radius should be set to either:

• var(--onboard-modal-border-radius) in order to match the background border radius whenever it is changed
• or remove the value entirely since the container hides all overflow

Steps To Reproduce

1. Set --onboard-modal-border-radius to any value less than 24px
2. Change --onboard-connect-header-background to a color that contrasts with --onboard-white

e.g.

:root {
    --onboard-modal-border-radius: 12px;
    --onboard-connect-header-background: black;
}

What package is effected by this issue?

@web3-onboard/core

Is this a build or a runtime issue?

Runtime

Package Version

2.8.3

Node Version

No response

What browsers are you seeing the problem on?

Chrome

Relevant log output

No response

Anything else?

No response

Sanity Check

• If this is a build issue, I have included my build config. If this is a runtime issue, I have included reproduction steps and/or a Minimal, Reproducible Example.

[lnbc1QWFyb24]

@omurovec Thanks for raising the issue and creating a PR, we will get it reviewed soon.