Fixes Selector label wrapping

sumup-oss · Sep 25, 2023 · cc49ae6 · cc49ae6
1 parent 89de9db
commit cc49ae6
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 1 deletion.
diff --git a/packages/circuit-ui/components/Selector/Selector.module.css b/packages/circuit-ui/components/Selector/Selector.module.css
@@ -56,6 +56,7 @@
   height: 100%;
   color: var(--cui-fg-normal);
   text-align: center;
+  white-space: nowrap;
   cursor: pointer;
   background-color: var(--cui-bg-normal);
   border-radius: var(--cui-border-radius-byte);
@@ -100,6 +101,7 @@
   text-align: start;
 }
 
+
 /* Sizes */
 
 .kilo {
@@ -118,6 +120,10 @@
   font-weight: var(--cui-font-weight-bold);
 }
 
+.description {
+  white-space: initial;
+}
+
 .icon {
   margin-bottom: var(--cui-spacings-bit);
 }
diff --git a/packages/circuit-ui/components/Selector/Selector.tsx b/packages/circuit-ui/components/Selector/Selector.tsx
@@ -175,7 +175,9 @@ export const Selector = forwardRef<HTMLInputElement, SelectorProps>(
           {hasDescription ? (
             <Fragment>
               <span className={classes.title}>{label || children}</span>
-              <span aria-hidden="true">{description}</span>
+              <span className={classes.description} aria-hidden="true">
+                {description}
+              </span>
             </Fragment>
           ) : (
             label || children