PLT-5669: Change format of timestamp of access history (#5646)

Add new line for timestamp and forbid wrap for ip and sessionid of access history to
prevent unnecessary line wrap.

2 files changed, 22 insertions, 15 deletions

diff --git a/webapp/components/audit_table.jsx b/webapp/components/audit_table.jsx
index c70c659d4..34e61dbac 100644
--- a/webapp/components/audit_table.jsx
+++ b/webapp/components/audit_table.jsx
@@ -229,12 +229,12 @@ class AuditTable extends React.Component {
 
             let iContent;
             if (this.props.showIp) {
-                iContent = <td className='word-break--all'>{auditInfo.ip}</td>;
+                iContent = <td className='whitespace--nowrap word-break--all'>{auditInfo.ip}</td>;
             }
 
             let sContent;
             if (this.props.showSession) {
-                sContent = <td className='word-break--all'>{auditInfo.sessionId}</td>;
+                sContent = <td className='whitespace--nowrap word-break--all'>{auditInfo.sessionId}</td>;
             }
 
             const descStyle = {};
@@ -244,7 +244,7 @@ class AuditTable extends React.Component {
 
             accessList[i] = (
                 <tr key={audit.id}>
-                    <td className='word-break--all'>{auditInfo.timestamp}</td>
+                    <td className='whitespace--nowrap word-break--all'>{auditInfo.timestamp}</td>
                     {uContent}
                     <td
                         className='word-break--all'
@@ -615,18 +615,21 @@ export function formatAuditInfo(audit, formatMessage) {
     const auditInfo = {};
     auditInfo.timestamp = (
         <div>
-            <FormattedDate
-                value={date}
-                day='2-digit'
-                month='short'
-                year='numeric'
-            />
-            {' - '}
-            <FormattedTime
-                value={date}
-                hour='2-digit'
-                minute='2-digit'
-            />
+            <div>
+                <FormattedDate
+                    value={date}
+                    day='2-digit'
+                    month='short'
+                    year='numeric'
+                />
+            </div>
+            <div>
+                <FormattedTime
+                    value={date}
+                    hour='2-digit'
+                    minute='2-digit'
+                />
+            </div>
         </div>
     );
     auditInfo.userId = audit.user_id;
diff --git a/webapp/sass/base/_typography.scss b/webapp/sass/base/_typography.scss
index 1d3f1d052..a9bc183c4 100644
--- a/webapp/sass/base/_typography.scss
+++ b/webapp/sass/base/_typography.scss
@@ -26,6 +26,10 @@ body {
     word-break: break-all;
 }
 
+.whitespace--nowrap {
+    white-space: nowrap;
+}
+
 .overflow--ellipsis {
     overflow: hidden;
     text-overflow: ellipsis;