fix: overflow in radio button group (#2687)

packages/component/src/stories/button.stories.tsx

@@ -94,11 +94,18 @@ Dropdown.args = {
 
 export const RadioGroup: StoryFn = ({ ...props }) => {
   return (
-    <RadioButtonGroup {...props}>
-      <RadioButton value="all">All</RadioButton>
-      <RadioButton value="page">Page</RadioButton>
-      <RadioButton value="edgeless">Edgeless</RadioButton>
-    </RadioButtonGroup>
+    <>
+      <RadioButtonGroup {...props}>
+        <RadioButton value="all">All</RadioButton>
+        <RadioButton value="page">Page</RadioButton>
+        <RadioButton value="edgeless">Edgeless</RadioButton>
+      </RadioButtonGroup>
+      <RadioButtonGroup {...props}>
+        <RadioButton value="all">Long long text and some more</RadioButton>
+        <RadioButton value="page">Lorem ipsum dolor sit amet</RadioButton>
+        <RadioButton value="edgeless">Long long text</RadioButton>
+      </RadioButtonGroup>
+    </>
   );
 };
 RadioGroup.args = {

packages/component/src/ui/button/styles.css.ts

@@ -58,7 +58,7 @@ export const radioButton = style({
   display: 'flex',
   justifyContent: 'center',
   alignItems: 'center',
-  width: '75px',
+  padding: '0 30px',
   height: '24px',
   borderRadius: '8px',
   filter: 'drop-shadow(0px 0px 4px rgba(0, 0, 0, 0.1))',