Prevent squished radio buttons (#76)

* Prevent squished radio buttons * Apply flex style only where necessary
Quartz · Nov 10, 2020 · 2c10951 · 2c10951
1 parent 7fdd771
commit 2c10951
Show file tree

Hide file tree

Showing 2 changed files with 5 additions and 1 deletion.
diff --git a/src/components/RadioButton/RadioButton.jsx b/src/components/RadioButton/RadioButton.jsx
@@ -17,7 +17,7 @@ const RadioButton = ( {
 	<label className={cx( 'container', display )}>
 		<input
 			checked={checked}
-			className={cx( 'input' )}
+			className={cx( 'input', display )}
 			disabled={disabled}
 			name={name}
 			onChange={onChange}

diff --git a/src/components/RadioButton/RadioButton.scss b/src/components/RadioButton/RadioButton.scss
@@ -31,6 +31,10 @@
 	transition: border-color tokens.$time-slowly;
 	background-color: color-scheme.$background-2;
 
+	&.block {
+		flex-shrink: 0;
+	}
+
 	&:focus,
 	&:hover,
 	.container:focus,