fix: allow nesting sized containers

[joeholdcroft]

Description

Currently, if you try to nest a Container component with a smaller size than a Container component that wraps it at any level, the size does not correctly take effect. It always uses the largest size of any wrapping Container component due to CSS specificity.

This PR resolves this by applying the CSS for the sizing specifically to .rt-ContainerInner that are a direct descendent of the .rt-Container.

Testing steps

Use the following JSX and check the correct widths are applied in browser.

<Container size="4">
  <Text>This should be size 4</Text>
  <Container size="1">
    <Text>This should be size 1</Text>
  </Container>
</Container>

Alternatively, review the new Container samples in the "sink" demo example page.

Related issues / PRs

N/A

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
themes-playground	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Sep 23, 2024 0:50am

[chaance]

Hmm, not entirely sure about the solution here. Having additional wrapping components will produce the same problematic results, no?

<Container size="4">
  <Text>This should be size 4</Text>
  <Box>
    <Container size="1">
      <Text>This should be size 1</Text>
    </Container>
  </Box>
</Container>

I'll play around with this a bit and see what we can do.

[joeholdcroft]

Hmm, not entirely sure about the solution here. Having additional wrapping components will produce the same problematic results, no?

I think that works fine. The CSS I changed is for .ContainerInner which is directly inside of .Container, and the Container component renders both, I believe.

[chaance]

Ah yeah I think I missed that. I'll test locally and follow up as needed 👍

[keithburgie]

@chaance, I came across two open issues about this (#606 and #591) and was excited to submit exactly the same fix. @joeholdcroft's PR correctly solves the problem!

[joeholdcroft]

@chaance anything I can do to help get this one through? 🙏

[chaance]

Still on my radar, just backed up with other priorities and need to spend a bit of time testing new features. I know it seems simple enough but unintended regressions w/ CSS specificity changes are not uncommon.

Long backlog, thanks for your patience!

[stevesims]

I just came across this exact same bug, and worked out the exact same fix

As the nature of a Container is that it will place a ContainerInner as its direct descendant, the solution in this PR is clearly the correct one to the underlying problem. it's kinda disappointing that this fix hasn't been merged in and released yet