Multiple UI improvements (#2838)

* Multiple UI improvements

* Adding translations in en.json

webapp/components/audit_table.jsx

@@ -221,20 +221,20 @@ class AuditTable extends React.Component {
             if (this.props.showUserId) {
                 var profile = UserStore.getProfile(auditInfo.userId);
                 if (profile) {
-                    uContent = <td>{profile.email}</td>;
+                    uContent = <td className='word-break--all'>{profile.email}</td>;
                 } else {
-                    uContent = <td>{auditInfo.userId}</td>;
+                    uContent = <td className='word-break--all'>{auditInfo.userId}</td>;
                 }
             }
 
             let iContent;
             if (this.props.showIp) {
-                iContent = <td>{auditInfo.ip}</td>;
+                iContent = <td className='word-break--all'>{auditInfo.ip}</td>;
             }
 
             let sContent;
             if (this.props.showSession) {
-                sContent = <td>{auditInfo.sessionId}</td>;
+                sContent = <td className='word-break--all'>{auditInfo.sessionId}</td>;
             }
 
             let descStyle = {};
@@ -244,9 +244,14 @@ class AuditTable extends React.Component {
 
             accessList[i] = (
                 <tr key={audit.id}>
-                    <td>{auditInfo.timestamp}</td>
+                    <td className='word-break--all'>{auditInfo.timestamp}</td>
                     {uContent}
-                    <td style={descStyle}>{auditInfo.desc}</td>
+                    <td
+                        className='word-break--all'
+                        style={descStyle}
+                    >
+                        {auditInfo.desc}
+                    </td>
                     {iContent}
                     {sContent}
                 </tr>

webapp/components/user_settings/premade_theme_chooser.jsx

@@ -51,17 +51,21 @@ export default class PremadeThemeChooser extends React.Component {
 
         return (
             <div className='row appearance-section'>
-                {premadeThemes}
+                <div className='clearfix'>
-                <div className='col-sm-12 padding-bottom x2'>
+                    {premadeThemes}
-                    <a
+                </div>
-                        href='http://docs.mattermost.com/help/settings/theme-colors.html#custom-theme-examples'
+                <div className='clearfix'>
-                        target='_blank'
+                    <div className='col-sm-12 padding-bottom x2'>
-                    >
+                        <a
-                        <FormattedMessage
+                            href='http://docs.mattermost.com/help/settings/theme-colors.html#custom-theme-examples'
-                            id='user.settings.display.theme.otherThemes'
+                            target='_blank'
-                            defaultMessage='See other themes'
+                        >
-                        />
+                            <FormattedMessage
-                    </a>
+                                id='user.settings.display.theme.otherThemes'
+                                defaultMessage='See other themes'
+                            />
+                        </a>
+                    </div>
                 </div>
             </div>
         );

webapp/components/user_settings/user_settings_display.jsx

@@ -369,7 +369,7 @@ export default class UserSettingsDisplay extends React.Component {
                             />
                             <FormattedMessage
                                 id='user.settings.display.fixedWidthCentered'
-                                defaultMessage='Fixed with, centered'
+                                defaultMessage='Fixed width, centered'
                             />
                         </label>
                         <br/>
@@ -383,7 +383,7 @@ export default class UserSettingsDisplay extends React.Component {
                             />
                             <FormattedMessage
                                 id='user.settings.display.fullScreen'
-                                defaultMessage='Full screen'
+                                defaultMessage='Full width'
                             />
                         </label>
                         <br/>
@@ -392,7 +392,7 @@ export default class UserSettingsDisplay extends React.Component {
                         <br/>
                         <FormattedMessage
                             id='user.settings.display.channeldisplaymode'
-                            defaultMessage='How to display channels.'
+                            defaultMessage='Select how text in a channel is displayed.'
                         />
                     </div>
                 </div>
@@ -421,14 +421,14 @@ export default class UserSettingsDisplay extends React.Component {
                 describe = (
                     <FormattedMessage
                         id='user.settings.display.fixedWidthCentered'
-                        defaultMessage='Fixed with, centered'
+                        defaultMessage='Fixed width, centered'
                     />
                 );
             } else {
                 describe = (
                     <FormattedMessage
                         id='user.settings.display.fullScreen'
-                        defaultMessage='Full screen'
+                        defaultMessage='Full width'
                     />
                 );
             }

webapp/i18n/en.json

@@ -1299,6 +1299,9 @@
   "user.settings.display.theme.themeColors": "Theme Colors",
   "user.settings.display.theme.title": "Theme",
   "user.settings.display.title": "Display Settings",
+  "user.settings.display.fixedWidthCentered": "Fixed width, centered",
+  "user.settings.display.fullScreen": "Full width",
+  "user.settings.display.channeldisplaymode": "Select how text in a channel is displayed.",
   "user.settings.general.checkEmail": "Check your email at {email} to verify the address.",
   "user.settings.general.checkEmailNoAddress": "Check your email to verify your new address",
   "user.settings.general.close": "Close",