feat: set panel dimensions on browser resize

This commit is contained in:
Rohit
2025-03-15 14:14:06 +05:30
parent 9818634734
commit a892e700cb

View File

@@ -54,6 +54,9 @@ export const RightSidePanel: React.FC<RightSidePanelProps> = ({ onFinishCapture
const [browserStepIdList, setBrowserStepIdList] = useState<number[]>([]);
const [isCaptureTextConfirmed, setIsCaptureTextConfirmed] = useState(false);
const [isCaptureListConfirmed, setIsCaptureListConfirmed] = useState(false);
const [panelDimensions, setPanelDimensions] = useState({
height: window.innerHeight * 0.64 + 137
});
const { lastAction, notify, currentWorkflowActionsState, setCurrentWorkflowActionsState, resetInterpretationLog } = useGlobalInfoStore();
const { getText, startGetText, stopGetText, getScreenshot, startGetScreenshot, stopGetScreenshot, getList, startGetList, stopGetList, startPaginationMode, stopPaginationMode, paginationType, updatePaginationType, limitType, customLimit, updateLimitType, updateCustomLimit, stopLimitMode, startLimitMode, captureStage, setCaptureStage, showPaginationOptions, setShowPaginationOptions, showLimitOptions, setShowLimitOptions, workflow, setWorkflow } = useActionContext();
@@ -66,6 +69,21 @@ export const RightSidePanel: React.FC<RightSidePanelProps> = ({ onFinishCapture
//setRecordingLength(data.workflow.length);
}, [])
const handleResize = useCallback(() => {
// Update panel dimensions
setPanelDimensions({
height: window.innerHeight * 0.64 + 137
});
}, []);
useEffect(() => {
window.addEventListener('resize', handleResize);
return () => {
window.removeEventListener('resize', handleResize);
};
}, [handleResize]);
useEffect(() => {
if (socket) {
socket.on("workflow", workflowHandler);
@@ -461,10 +479,8 @@ export const RightSidePanel: React.FC<RightSidePanelProps> = ({ onFinishCapture
const theme = useThemeMode();
const isDarkMode = theme.darkMode;
let panelHeight = `${(window.innerHeight * 0.64) + 137}px`
return (
<Paper sx={{ height: panelHeight, width: 'auto', alignItems: "center", background: 'inherit' }} id="browser-actions" elevation={0}>
<Paper sx={{ height: panelDimensions.height, width: 'auto', alignItems: "center", background: 'inherit' }} id="browser-actions" elevation={0}>
{/* <SimpleBox height={60} width='100%' background='lightGray' radius='0%'>
<Typography sx={{ padding: '10px' }}>Last action: {` ${lastAction}`}</Typography>
</SimpleBox> */}