feat: use browser store for setting dimensions

src/components/run/InterpretationLog.tsx

@@ -34,22 +34,9 @@ export const InterpretationLog: React.FC<InterpretationLogProps> = ({ isOpen, se
 
   const logEndRef = useRef<HTMLDivElement | null>(null);
 
-  const { width } = useBrowserDimensionsStore();
+  const { browserWidth, outputPreviewHeight, outputPreviewWidth } = 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 (
@@ -108,14 +95,6 @@ export const InterpretationLog: React.FC<InterpretationLogProps> = ({ isOpen, se
     setCustomValue(event.target.value);
   };
 
-  useEffect(() => {
-    window.addEventListener('resize', handleResize);
-    
-    return () => {
-      window.removeEventListener('resize', handleResize);
-    };
-  }, [handleResize]);
-
   useEffect(() => {
     if (shouldResetInterpretationLog) {
       setLog('');
@@ -163,7 +142,7 @@ export const InterpretationLog: React.FC<InterpretationLogProps> = ({ isOpen, se
             background: '#ff00c3',
             border: 'none',
             padding: '10px 20px',
-            width: dimensions.buttonWidth,
+            width: browserWidth,
             overflow: 'hidden',
             textAlign: 'left',
             justifyContent: 'flex-start',
@@ -185,8 +164,8 @@ export const InterpretationLog: React.FC<InterpretationLogProps> = ({ isOpen, se
               background: `${darkMode ? '#1e2124' : 'white'}`,
               color: `${darkMode ? 'white' : 'black'}`,
               padding: '10px',
-              height: dimensions.drawerHeight,
-              width: dimensions.drawerWidth,
+              height: outputPreviewHeight,
+              width: outputPreviewWidth,
               display: 'flex',
               borderRadius: '10px 10px 0 0',
             },