[Question] Root html element font-size affects library offsets calculated in rem

[socaseinpoint]

Current Behavior

My web application has an overridden font size on HTML element, this affects the paddings and font size inside the shadow dom created by the library since the calculation of the size of the indents is specified through rem, which always relies on the value on the root element.

The library has the ability to override styles via css variables, so i can fix brocken paddings and font size by using em instead of rem, but there is some values that has no css variables. Can you provide more css variables in this library or suggest any other fix for that problem?

Expected Behavior

No response

Steps To Reproduce

No response

What package is effected by this issue?

@web3-onboard/react

Is this a build or a runtime issue?

Runtime, N/A

Package Version

2.9.0

Node Version

No response

What browsers are you seeing the problem on?

No response

Relevant log output

No response

Anything else?

No response

Sanity Check

• [X] 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.

[leightkt]

@socaseinpoint Can you provide a code pen or link to a repo that demos the issue you're having?

[socaseinpoint]

https://github.com/socaseinpoint/demo_block_native_rem demo the issue

[taylorjdawson]

@socaseinpoint Is this what you are looking for? Let us know which styles there are missing that you need for you application.

[socaseinpoint]

this There are many css properties that are defined in rem, and that I can't customize by passing css-custom-properties

Examples: [packages/co](padding: 1rem;) https://github.com/blocknative/web3-onboard/blob/43c7d05e25baeeb7343cfc98a6bd7bc3e8417a3f/packages/core/src/views/connect/Index.svelte#L473

[gesquinca]

Hey @socaseinpoint can you apply your font-size to the body element instead of the root html element? This would be the easiest way to resolve on your end.

[socaseinpoint]

Rem units allow you to set sizes relative to the root element. As I understand it's only possible to define font size for rem calculation

[mvdschee]

I have tried, and it's impossible to get this to work as expected without changing the font-size outside of the web component, it would have been an easy fix if they did keep consistency throughout their whole component by using css variables, but I found 153 cases where they hardcoded a rem value.

a rewrite to pixel would be best in this case.

[zhangxiangqiang]

Is there any progress on this issue? The style is disordered and cannot be used on the mobile end

[Tobechukwu-fieldlabs]

Has this issue been resolved?

[Tobechukwu-fieldlabs]

@socaseinpoint were you able to fix this?