diff --git a/frontend/src/components/common/Dialog.tsx b/frontend/src/components/common/Dialog.tsx index d0e40a8363..07cbec503f 100644 --- a/frontend/src/components/common/Dialog.tsx +++ b/frontend/src/components/common/Dialog.tsx @@ -76,6 +76,7 @@ export function DialogTitle(props: OurDialogTitleProps) { export interface OurDialogProps { withFullScreen?: boolean; onFullScreenToggled?: (isFullScreen: boolean) => void; + logView?: any; titleProps?: OurDialogTitleProps; } @@ -106,6 +107,9 @@ export function Dialog(props: DialogProps) { return newFullScreenState; }); + + // If we are using the log viewer component this handles the full screen sizing for xterm + props.logView?.setter(!props.logView.hasAdjustment); } function FullScreenButton() { diff --git a/frontend/src/components/common/LogViewer.tsx b/frontend/src/components/common/LogViewer.tsx index 6d623529f9..e242f972d2 100644 --- a/frontend/src/components/common/LogViewer.tsx +++ b/frontend/src/components/common/LogViewer.tsx @@ -3,7 +3,7 @@ import { FitAddon } from '@xterm/addon-fit'; import { ISearchOptions, SearchAddon } from '@xterm/addon-search'; import { Terminal as XTerminal } from '@xterm/xterm'; import _ from 'lodash'; -import React, { ReactNode, useEffect } from 'react'; +import React, { ReactNode, useEffect, useState } from 'react'; import { useHotkeys } from 'react-hotkeys-hook'; import { useTranslation } from 'react-i18next'; import ActionButton from './ActionButton'; @@ -64,6 +64,20 @@ export function LogViewer(props: LogViewerProps) { element.click(); } + /** + * This is used to pass the logView state to the Dialog component to handle full screen + */ + const [logView, setLogView] = useState({ + hasAdjustment: false, + setter: (value: boolean) => { + logViewSetter(value); + }, + }); + + function logViewSetter(value: boolean) { + setLogView({ ...logView, hasAdjustment: value }); + } + React.useEffect(() => { if (!terminalContainerRef || !!xtermRef.current) { return; @@ -106,7 +120,7 @@ export function LogViewer(props: LogViewerProps) { searchAddonRef.current?.dispose(); xtermRef.current = null; }; - }, [terminalContainerRef, xtermRef.current]); + }, [terminalContainerRef, xtermRef.current, logView.hasAdjustment]); React.useEffect(() => { if (!xtermRef.current) { @@ -129,7 +143,7 @@ export function LogViewer(props: LogViewerProps) { } return ( - + ({ height: '80%',