diff --git a/src/components/run/InterpretationLog.tsx b/src/components/run/InterpretationLog.tsx index 05e8a3ec..85768c08 100644 --- a/src/components/run/InterpretationLog.tsx +++ b/src/components/run/InterpretationLog.tsx @@ -37,6 +37,19 @@ export const InterpretationLog: React.FC = ({ isOpen, se const { width } = useBrowserDimensionsStore(); const { socket } = useSocketStore(); const { currentWorkflowActionsState, shouldResetInterpretationLog, notify } = useGlobalInfoStore(); + const [dimensions, setDimensions] = useState({ + drawerHeight: window.innerHeight * 0.7, + drawerWidth: window.innerWidth * 0.716, + buttonWidth: window.innerWidth * 0.7 + }); + + const handleResize = useCallback(() => { + setDimensions({ + drawerHeight: window.innerHeight * 0.7, + drawerWidth: window.innerWidth * 0.716, + buttonWidth: window.innerWidth * 0.7 + }); + }, []); const toggleDrawer = (newOpen: boolean) => (event: React.KeyboardEvent | React.MouseEvent) => { if ( @@ -95,6 +108,14 @@ export const InterpretationLog: React.FC = ({ isOpen, se setCustomValue(event.target.value); }; + useEffect(() => { + window.addEventListener('resize', handleResize); + + return () => { + window.removeEventListener('resize', handleResize); + }; + }, [handleResize]); + useEffect(() => { if (shouldResetInterpretationLog) { setLog(''); @@ -142,7 +163,7 @@ export const InterpretationLog: React.FC = ({ isOpen, se background: '#ff00c3', border: 'none', padding: '10px 20px', - width: window.innerWidth * 0.7, + width: dimensions.buttonWidth, overflow: 'hidden', textAlign: 'left', justifyContent: 'flex-start', @@ -164,8 +185,8 @@ export const InterpretationLog: React.FC = ({ isOpen, se background: `${darkMode ? '#1e2124' : 'white'}`, color: `${darkMode ? 'white' : 'black'}`, padding: '10px', - height: window.innerHeight * 0.7, - width: window.innerWidth * 0.716, + height: dimensions.drawerHeight, + width: dimensions.drawerWidth, display: 'flex', borderRadius: '10px 10px 0 0', },