Improve compatibility of the ButtonGroup with the Modal component (#2349

)
sumup-oss · Dec 19, 2023 · dbceca6 · dbceca6
1 parent 31b7b64
commit dbceca6
Show file tree

Hide file tree

Showing 3 changed files with 9 additions and 4 deletions.
diff --git a/.changeset/tame-camels-argue.md b/.changeset/tame-camels-argue.md
@@ -0,0 +1,5 @@
+---
+'@sumup/circuit-ui': patch
+---
+
+Reduced the container width at which the ButtonGroup component switches to a horizontal layout to improve compatibility with the Modal component.
diff --git a/packages/circuit-ui/components/Button/base.module.css b/packages/circuit-ui/components/Button/base.module.css
@@ -351,7 +351,7 @@
   }
 }
 
-@container cui-button-group (width > 480px) {
+@container cui-button-group (width > 420px) {
   /* Keep in sync with the .secondary class above */
   .tertiary {
     color: var(--cui-fg-normal);

diff --git a/packages/circuit-ui/components/ButtonGroup/ButtonGroup.module.css b/packages/circuit-ui/components/ButtonGroup/ButtonGroup.module.css
@@ -9,11 +9,11 @@
   align-items: center;
 }
 
-.secondary {
+.base .secondary {
   margin-top: var(--cui-spacings-kilo);
 }
 
-@container cui-button-group (width > 480px) {
+@container cui-button-group (width > 420px) {
   .base {
     flex-direction: row-reverse;
   }
@@ -30,7 +30,7 @@
     justify-content: flex-start;
   }
 
-  .secondary {
+  .base .secondary {
     margin-top: 0;
     margin-right: var(--cui-spacings-mega);
   }