tweak: Multiline records (#21636)

tgui/packages/tgui/components/Box.js

@@ -99,6 +99,7 @@ const styleMapperByPropName = {
   bold: mapBooleanPropTo('font-weight', 'bold'),
   italic: mapBooleanPropTo('font-style', 'italic'),
   nowrap: mapBooleanPropTo('white-space', 'nowrap'),
+  prewrap: mapBooleanPropTo('white-space', 'pre-wrap'),
   // Margins
   m: mapDirectionalUnitPropTo('margin', halfUnit, [
     'top',

tgui/packages/tgui/components/LabeledList.js

@@ -21,6 +21,7 @@ export const LabeledListItem = (props) => {
     content,
     children,
     noColon = false,
+    ...rest
   } = props;
   const colon = noColon ? '' : ':';
   return (
@@ -40,6 +41,7 @@ export const LabeledListItem = (props) => {
         verticalAlign={verticalAlign}
         className={classes(['LabeledList__cell', 'LabeledList__content'])}
         colSpan={buttons ? undefined : 2}
+        {...rest}
       >
         {content}
         {children}

tgui/packages/tgui/interfaces/MedicalRecords.js

@@ -325,7 +325,7 @@ const MedicalRecordsViewMedical = (_properties, context) => {
     <Fragment>
       <LabeledList>
         {medical.fields.map((field, i) => (
-          <LabeledList.Item key={i} label={field.field}>
+          <LabeledList.Item key={i} label={field.field} prewrap>
             {field.value}
             <Button
               icon="pen"
@@ -350,7 +350,7 @@ const MedicalRecordsViewMedical = (_properties, context) => {
           <Box color="label">No comments found.</Box>
         ) : (
           medical.comments.map((comment, i) => (
-            <Box key={i}>
+            <Box key={i} prewrap>
               <Box color="label" display="inline">
                 {comment.header}
               </Box>

tgui/packages/tgui/interfaces/SecurityRecords.js

@@ -286,7 +286,7 @@ const SecurityRecordsViewGeneral = (_properties, context) => {
       <Box float="left">
         <LabeledList>
           {general.fields.map((field, i) => (
-            <LabeledList.Item key={i} label={field.field}>
+            <LabeledList.Item key={i} label={field.field} prewrap>
               {decodeHtmlEntities('' + field.value)}
               {!!field.edit && (
                 <Button
@@ -347,7 +347,7 @@ const SecurityRecordsViewSecurity = (_properties, context) => {
     <Fragment>
       <LabeledList>
         {security.fields.map((field, i) => (
-          <LabeledList.Item key={i} label={field.field}>
+          <LabeledList.Item key={i} label={field.field} prewrap>
             {decodeHtmlEntities(field.value)}
             {!!field.edit && (
               <Button
@@ -375,7 +375,7 @@ const SecurityRecordsViewSecurity = (_properties, context) => {
           <Box color="label">No comments found.</Box>
         ) : (
           security.comments.map((comment, i) => (
-            <Box key={i}>
+            <Box key={i} prewrap>
               <Box color="label" display="inline">
                 {comment.header || 'Auto-generated'}
               </Box>