improve word wrap behaviour in update boxes

Author: wbglaeser

src/ui/screens/profile-screen/components/ProfileDataList.js

@@ -29,7 +29,7 @@ const ProfileDataList = () => {
                                     key={index}
                                     gap={4}
                                     sx={{
-                                        padding: 4,
+                                        padding: { xs: 2, sm: 4 },
                                         borderRadius: theme.shape.borderRadius,
                                         backgroundColor: 'white.main',
                                     }}

src/ui/screens/profile-screen/components/ProfileUpdateField.js

@@ -22,7 +22,7 @@ const ProfileUpdateField = ({
             gap: 2,
             border: `1px solid ${theme.palette.white.dark}`,
             boxShadow: '0px 1px 2px rgba(0, 0, 0, 0.25)',
-            padding: 4,
+            padding: { xs: 2, sm: 4 },
             borderRadius: theme.shape.borderRadius,
         }}>
             <VBox>
@@ -57,7 +57,7 @@ const ProfileUpdateField = ({
                 }
             </VBox>
             <HBox sx={{ 
-                padding: "32px", 
+                padding: { xs: 0, sm: 4 }, 
                 backgroundColor: 'white.main', 
                 borderRadius: theme.shape.borderRadius 
             }}>

src/ui/screens/question-pages/components/input-types/ProfileInputMultiSelection.js

@@ -52,7 +52,6 @@ const ProfileInputMultiSelection = ({
                 {Object.entries(choices).map(([key, label]) => (
                     <FormControlLabel
                         key={key}
-                        sx={{ mb: 2 }}
                         control={
                             <Checkbox
                                 checked={Array.isArray(value) ? value.includes(key) : false}
@@ -61,6 +60,15 @@ const ProfileInputMultiSelection = ({
                             />
                         }
                         label={label}
+                        sx={{
+                            mb: 2,
+                            alignItems: "flex-start",
+                            '& .MuiFormControlLabel-label': {
+                                whiteSpace: "normal",
+                                wordBreak: "break-word",
+                                overflowWrap: "anywhere",
+                            },
+                        }}
                     />
                 ))}
             </FormGroup>

src/ui/screens/question-pages/components/input-types/ProfileInputSelection.js

@@ -47,6 +47,14 @@ const ProfileInputSelection = ({
               />
             }
             label={opt.label}
+            sx={{
+              alignItems: "flex-start",
+              '& .MuiFormControlLabel-label': {
+                whiteSpace: "normal",
+                wordBreak: "break-word",
+                overflowWrap: "anywhere",
+              },
+            }}
           />
         ))}
       </RadioGroup>