Add wrapper switch

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>

src/renderer/components/dock/logs/controls.tsx

@@ -25,13 +25,17 @@ export const LogControls = observer(({ model }: LogControlsProps) => {
   }
 
   const logs = model.timestampSplitLogs.get();
-  const { showTimestamps, showPrevious: previous } = tabData;
+  const { showTimestamps, showPrevious: previous, wrap } = tabData;
   const since = logs.length ? logs[0][0] : null;
 
   const toggleTimestamps = () => {
     model.updateLogTabData({ showTimestamps: !showTimestamps });
   };
 
+  const toggleWrap = () => {
+    model.updateLogTabData({ wrap: !wrap });
+  };
+
   const togglePrevious = () => {
     model.updateLogTabData({ showPrevious: !previous });
     model.reloadLogs();
@@ -49,6 +53,12 @@ export const LogControls = observer(({ model }: LogControlsProps) => {
         )}
       </div>
       <div className="flex gaps align-center">
+        <Checkbox
+          label="Wrap logs"
+          value={wrap}
+          onChange={toggleWrap}
+          className="wrap-logs"
+        />
         <Checkbox
           label="Show timestamps"
           value={showTimestamps}

src/renderer/components/dock/logs/log-list.module.scss

@@ -18,11 +18,16 @@
   font-family: var(--font-monospace);
   font-size: smaller;
   line-height: 120%;
+  white-space: nowrap;
 
   > * {
     -webkit-font-smoothing: auto; // Better readability on non-retina screens
     padding: 2px 16px;
   }
+
+  &.wrap {
+    white-space: normal;
+  }
 }
 
 .lastLine {

src/renderer/components/dock/logs/log-list.tsx

@@ -5,6 +5,7 @@ import { observer } from 'mobx-react';
 import React, { useEffect, useRef } from 'react';
 import type { LogTabViewModel } from './logs-view-model';
 import { LogRow } from "./log-row";
+import { cssNames } from "../../../utils";
 
 export interface LogListProps {
   model: LogTabViewModel;
@@ -106,7 +107,7 @@ export const LogList = observer(({ model }: LogListProps) => {
             style={{
               transform: `translateY(${virtualRow.start}px)`,
             }}
-            className={styles.rowWrapper}
+            className={cssNames(styles.rowWrapper, { [styles.wrap]: model.logTabData.get()?.wrap })}
           >
             <div>
               <LogRow rowIndex={virtualRow.index} model={model} />

src/renderer/components/dock/logs/tab-store.ts

@@ -54,6 +54,11 @@ export interface LogTabData {
    * Whether to show the logs of the previous container instance
    */
   showPrevious: boolean;
+
+  /**
+   * Whether to wrap logs lines to avoid horizontal scrolling.
+   */
+  wrap: boolean;
 }
 
 interface Dependencies {