[ui-admin] Improve server log formatting

Author: bjornalm

desktop/core/src/desktop/js/apps/admin/ServerLogs/ServerLogsTab.scss

@@ -32,11 +32,16 @@
         background-color: $fluidx-white;
         margin: 0;
         padding: 2px;
-      }
-    }
+        white-space: nowrap;
+        font-family: 'Roboto Mono', monospace;
+        font-size: 12px;
 
-    .server_wrap {
-      white-space: nowrap;
+        &--wrap {
+          word-break: break-all;
+          word-wrap: break-word;
+          white-space: pre-wrap;
+        }
+      }
     }
 
     .server__no-logs-found {

desktop/core/src/desktop/js/apps/admin/ServerLogs/ServerLogsTab.test.tsx

@@ -94,10 +94,11 @@ describe('ServerLogs Component', () => {
 
     render(<ServerLogs />);
 
-    expect(screen.getByText('Log entry 1')).toHaveClass('server_wrap');
+    expect(screen.getByLabelText('Wrap logs')).toBeChecked();
+    expect(screen.getByText('Log entry 1')).toHaveClass('server__log-line--wrap');
 
     fireEvent.click(screen.getByLabelText('Wrap logs'));
-
-    expect(screen.getByText('Log entry 1')).not.toHaveClass('server_wrap');
+    expect(screen.getByLabelText('Wrap logs')).not.toBeChecked();
+    expect(screen.getByText('Log entry 1')).not.toHaveClass('server__log-line--wrap');
   });
 });

desktop/core/src/desktop/js/apps/admin/ServerLogs/ServerLogsTab.tsx

@@ -72,7 +72,7 @@ const ServerLogs: React.FC = (): JSX.Element => {
               <div className="server__display-logs">
                 {logsData.logs.map((line, index) => (
                   <div
-                    className={`server__log-line ${wrapLogs ? 'server_wrap' : ''}`}
+                    className={`server__log-line ${wrapLogs ? 'server__log-line--wrap' : ''}`}
                     key={'logs_' + index}
                   >
                     <HighlightText text={line} searchValue={filter} />