diff --git a/src/renderer/components/dock/logs/controls.tsx b/src/renderer/components/dock/logs/controls.tsx
index 6738ca56cf..6c3da627cb 100644
--- a/src/renderer/components/dock/logs/controls.tsx
+++ b/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) => {
)}
+
* {
-webkit-font-smoothing: auto; // Better readability on non-retina screens
padding: 2px 16px;
}
+
+ &.wrap {
+ white-space: normal;
+ }
}
.lastLine {
diff --git a/src/renderer/components/dock/logs/log-list.tsx b/src/renderer/components/dock/logs/log-list.tsx
index 0ea55e56f4..d9bff7e3dd 100644
--- a/src/renderer/components/dock/logs/log-list.tsx
+++ b/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 })}
>
diff --git a/src/renderer/components/dock/logs/tab-store.ts b/src/renderer/components/dock/logs/tab-store.ts
index 9cc83b9610..c50322880e 100644
--- a/src/renderer/components/dock/logs/tab-store.ts
+++ b/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 {