Merge pull request #4874 from xnqm8h/newscaster-tgui-fix

[TGUI] Newscaster `Create Feed Message` screen FIXES #4833

tgui/packages/tgui/interfaces/Newscaster.js

@@ -1,7 +1,7 @@
 import { decodeHtmlEntities } from 'common/string';
 import { Fragment } from 'inferno';
 import { useBackend, useSharedState } from '../backend';
-import { Box, Button, Flex, LabeledList, Input, Section } from '../components';
+import { Box, Button, LabeledList, Input, Section } from '../components';
 import { Window } from '../layouts';
 import { TemporaryNotice } from './common/TemporaryNotice';
 
@@ -164,6 +164,10 @@ const NewscasterNewStory = (props, context) => {
 
   const { setScreen } = props;
 
+  const label_style = { 'white-space': 'nowrap' };
+
+  const break_style = { width: '100%', 'word-break': 'break-all', 'word-wrap': 'break-word' };
+
   return (
     <Section
       title="Creating new Feed Message..."
@@ -172,57 +176,61 @@ const NewscasterNewStory = (props, context) => {
           Back
         </Button>
       }>
-      <LabeledList>
-        <LabeledList.Item label="Receiving Channel">
-          <Button fluid onClick={() => act('set_channel_receiving')}>
-            {channel_name || 'Unset'}
-          </Button>
-        </LabeledList.Item>
-        <LabeledList.Item label="Message Author" color="good">
-          {user}
-        </LabeledList.Item>
-        <LabeledList.Item label="Message Title" verticalAlign="top">
-          <Flex>
-            <Flex.Item grow={1}>
-              <Section width="99%" inline>
-                {title || '(no title yet)'}
-              </Section>
-            </Flex.Item>
-            <Flex.Item>
-              <Button
-                verticalAlign="top"
-                onClick={() => act('set_new_title')}
-                icon="pen"
-                tooltip="Edit Title"
-                tooltipPosition="left"
-              />
-            </Flex.Item>
-          </Flex>
-        </LabeledList.Item>
-        <LabeledList.Item label="Message Body" verticalAlign="top">
-          <Flex>
-            <Flex.Item grow={1}>
-              <Section width="99%" inline>
-                {msg || '(no message yet)'}
-              </Section>
-            </Flex.Item>
-            <Flex.Item>
-              <Button
-                verticalAlign="top"
-                onClick={() => act('set_new_message')}
-                icon="pen"
-                tooltip="Edit Message"
-                tooltipPosition="left"
-              />
-            </Flex.Item>
-          </Flex>
-        </LabeledList.Item>
-        <LabeledList.Item label="Attach Photo">
-          <Button fluid icon="image" onClick={() => act('set_attachment')}>
-            {photo_data ? 'Photo Attached' : 'No Photo'}
-          </Button>
-        </LabeledList.Item>
-      </LabeledList>
+      <table
+        style={{
+          width: 'calc(100% + 0.5em)',
+          margin: '-0.25em -0.25em 0 -0.25em',
+          padding: 0,
+        }}>
+        <tr>
+          <td style={label_style}>Receiving Channel:</td>
+          <td colspan={2}>
+            <Button fluid onClick={() => act('set_channel_receiving')}>
+              {channel_name || 'Unset'}
+            </Button>
+          </td>
+        </tr>
+        <tr>
+          <td style={label_style}>Message Author:</td>
+          <td className="color-good" colspan={2}>
+            {user}
+          </td>
+        </tr>
+        <tr>
+          <td style={label_style}>Message Title:</td>
+          <td style={break_style}>{title || '(no title yet)'}</td>
+          <td>
+            <Button
+              verticalAlign="top"
+              onClick={() => act('set_new_title')}
+              icon="pen"
+              tooltip="Edit Title"
+              tooltipPosition="left"
+            />
+          </td>
+        </tr>
+        <tr>
+          <td style={label_style}>Message Body:</td>
+          <td style={break_style}>{msg || '(no message yet)'}</td>
+          <td>
+            <Button
+              verticalAlign="top"
+              onClick={() => act('set_new_message')}
+              icon="pen"
+              tooltip="Edit Message"
+              tooltipPosition="left"
+            />
+          </td>
+        </tr>
+        <tr>
+          <td style={label_style}>Attach Photo:</td>
+          <td colspan={2}>
+            <Button fluid icon="image" onClick={() => act('set_attachment')}>
+              {photo_data ? 'Photo Attached' : 'No Photo'}
+            </Button>
+          </td>
+        </tr>
+      </table>
       <Button fluid color="good" icon="plus" onClick={() => act('submit_new_message')}>
         Submit Message
       </Button>