From 669b31e3f04091956c77cbd096f5af030c083f99 Mon Sep 17 00:00:00 2001
From: Joe Holdcroft <joe@joeholdcroft.com>
Date: Mon, 23 Sep 2024 12:21:51 +0100
Subject: [PATCH] fix: allow nesting sized containers

before this commit, it was not always possible to correctly nest container components with `size` set - for example, having a smaller container inside of a larger container. in these cases, css precedence meant the smaller size would never be applied.
---
 apps/playground/app/sink/page.tsx             | 31 +++++++++++++++++++
 .../src/components/container.css              |  8 ++---
 2 files changed, 35 insertions(+), 4 deletions(-)

diff --git a/apps/playground/app/sink/page.tsx b/apps/playground/app/sink/page.tsx
index 8073e657..af5df8c4 100644
--- a/apps/playground/app/sink/page.tsx
+++ b/apps/playground/app/sink/page.tsx
@@ -5893,6 +5893,37 @@ export default function Sink() {
                       </Flex>
                     </Flex>
                   </DocsSection>
+
+                  <DocsSection title="Container">
+                    <Text as="p" my="5">
+                      <Code>size</Code> can be set on nested <Code>Container</Code> instances:
+                    </Text>
+
+                    <Container size="4">
+                      <Box
+                        style={{
+                          backgroundColor: 'var(--color-panel-solid)',
+                          borderRadius: 'var(--radius-2)',
+                          boxShadow: 'inset 0 0 0 1px var(--gray-a4)',
+                        }}
+                        p="2"
+                      >
+                        <Text>This should be size 4</Text>
+                      </Box>
+                      <Container size="1">
+                        <Box
+                          style={{
+                            backgroundColor: 'var(--color-panel-solid)',
+                            borderRadius: 'var(--radius-2)',
+                            boxShadow: 'inset 0 0 0 1px var(--gray-a4)',
+                          }}
+                          p="2"
+                        >
+                          <Text>This should be size 1</Text>
+                        </Box>
+                      </Container>
+                    </Container>
+                  </DocsSection>
                 </main>
               </Box>
             </div>
diff --git a/packages/radix-ui-themes/src/components/container.css b/packages/radix-ui-themes/src/components/container.css
index c264060e..68f5e7a3 100644
--- a/packages/radix-ui-themes/src/components/container.css
+++ b/packages/radix-ui-themes/src/components/container.css
@@ -26,16 +26,16 @@
 
 @breakpoints {
   .rt-ContainerInner {
-    :where(.rt-Container.rt-r-size-1) & {
+    :where(.rt-Container.rt-r-size-1) > & {
       max-width: var(--container-1);
     }
-    :where(.rt-Container.rt-r-size-2) & {
+    :where(.rt-Container.rt-r-size-2) > & {
       max-width: var(--container-2);
     }
-    :where(.rt-Container.rt-r-size-3) & {
+    :where(.rt-Container.rt-r-size-3) > & {
       max-width: var(--container-3);
     }
-    :where(.rt-Container.rt-r-size-4) & {
+    :where(.rt-Container.rt-r-size-4) > & {
       max-width: var(--container-4);
     }
   }