[bug] Provider affects the DOM

[LufyCZ]

Is there an existing issue for this?

• I have searched the existing issues

RainbowKit Version

2.1.5

wagmi Version

2.17.0

Current Behavior

The RainbowKitProvider component injects a <div> which affects styling.

The above should result in a fully red screen, however, the "injected" div doesn't have a h-full, and thus the div below won't stretch to the height of the screen.

The div in question

Expected Behavior

The provider should not affect the DOM in a way that potentially breaks styling.

Steps To Reproduce

No response

Link to Minimal Reproducible Example (CodeSandbox, StackBlitz, etc.)

https://github.com/LufyCZ/rainbowkit-bug

Anything else?

No response

[Adebesin-Cell]

You can try.

function MyApp() {
  return (
    <WagmiProvider config={config}>
      <QueryClientProvider client={client}>
        <RainbowKitProvider>
          <div style={{ height: "100vh" }}>
            <div style={{ height: "100%", background: "red" }}>
              <p>lorem ipsum</p>
            </div>
          </div>
        </RainbowKitProvider>
      </QueryClientProvider>
    </WagmiProvider>
  );
}

[LufyCZ]

You can try.

function MyApp() {
  return (
    <WagmiProvider config={config}>
      <QueryClientProvider client={client}>
        <RainbowKitProvider>
          <div style={{ height: "100vh" }}>
            <div style={{ height: "100%", background: "red" }}>
              <p>lorem ipsum</p>
            </div>
          </div>
        </RainbowKitProvider>
      </QueryClientProvider>
    </WagmiProvider>
  );
}

I solved it with [&>*]:h-full on the div right above the RainbowKitProvider.

However, what you are proposing is still not a "correct" solution. The provider could be used somewhere further down the tree, and, for example, if there was a Header above it, the page would then be px(Header) + 100vh high (which is more than 100vh).

[Adebesin-Cell]

You can try.

function MyApp() {
  return (
    <WagmiProvider config={config}>
      <QueryClientProvider client={client}>
        <RainbowKitProvider>
          <div style={{ height: "100vh" }}>
            <div style={{ height: "100%", background: "red" }}>
              <p>lorem ipsum</p>
            </div>
          </div>
        </RainbowKitProvider>
      </QueryClientProvider>
    </WagmiProvider>
  );
}

I solved it with [&>*]:h-full on the div right above the RainbowKitProvider.

However, what you are proposing is still not a "correct" solution. The provider could be used somewhere further down the tree, and, for example, if there was a Header above it, the page would then be px(Header) + 100vh high (which is more than 100vh).

Yeah, good point! Though I did add a fix to clone the child element and add the props to it, got closed haha.

[minato32]

I'd like to work on this. Will open a PR.