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!