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 {