From cc4c3c35907bf17693d14e0cac9afa7dbfeb9241 Mon Sep 17 00:00:00 2001
From: Maximiliano Forlenza <mforlenza@indec.gob.ar>
Date: Mon, 12 Aug 2024 10:31:36 -0300
Subject: [PATCH] style(radioTable): wrap text when is too long

---
 package.json                            | 2 +-
 src/components/RadioTable/RadioTable.js | 8 +++-----
 2 files changed, 4 insertions(+), 6 deletions(-)

diff --git a/package.json b/package.json
index 79653d9..96e04fe 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@indec/form-builder",
-  "version": "3.5.4",
+  "version": "3.5.5",
   "description": "Form builder",
   "main": "index.js",
   "private": false,
diff --git a/src/components/RadioTable/RadioTable.js b/src/components/RadioTable/RadioTable.js
index c77d704..e711885 100644
--- a/src/components/RadioTable/RadioTable.js
+++ b/src/components/RadioTable/RadioTable.js
@@ -46,11 +46,9 @@ function RadioTable({options, label, form, field, disabled, warnings}) {
       <InputLabel warnings={warnings} form={form} field={field} label={label} disabled={disabled} />
       {options.map(option => (
         <Box key={option.id}>
-          <Stack direction={{xs: 'column', sm: 'row'}}>
-            <Box sx={{minWidth: '400px', maxWidth: '400px'}}>
-              <Typography noWrap sx={{opacity: disabled ? 0.5 : 1}}>
-                {option.title}
-              </Typography>
+          <Stack direction={{xs: 'column', sm: 'row'}} spacing={2}>
+            <Box sx={{minWidth: '400px', maxWidth: '400px', overflow: 'hidden'}}>
+              <Typography sx={{opacity: disabled ? 0.5 : 1, whiteSpace: 'normal'}}>{option.title}</Typography>
             </Box>
             <Stack direction="row" flexWrap="wrap">
               {option.subOptions.map(subOption => (