diff --git a/frontend/src/components/workflow/Canvas.tsx b/frontend/src/components/workflow/Canvas.tsx index cd8eb1ee..9265b31d 100644 --- a/frontend/src/components/workflow/Canvas.tsx +++ b/frontend/src/components/workflow/Canvas.tsx @@ -174,7 +174,7 @@ export function Canvas({ const prevNodesLengthRef = useRef(nodes.length); const prevEdgesLengthRef = useRef(edges.length); const lastSelectedNodeIdRef = useRef(null); - const [configPanelWidth, setConfigPanelWidth] = useState(432); // Default panel width + const configPanelWidth = 432; const [canvasOpacity, setCanvasOpacity] = useState(1); // For fade transition const nodeTypes = useMemo( @@ -1051,8 +1051,6 @@ export function Canvas({ return () => document.removeEventListener('keydown', handleKeyPress); }, [nodes, edges, setNodes, setEdges, markDirty, mode, onSnapshot, toast]); - // Panel width changes are handled by CSS transitions, no manual viewport translation needed - const entryPointActionsValue = useMemo( () => ({ onOpenScheduleSidebar: () => { @@ -1251,7 +1249,6 @@ export function Canvas({ onScheduleAction={resolvedOnScheduleAction} onScheduleDelete={resolvedOnScheduleDelete} onViewSchedules={resolvedOnViewSchedules} - onWidthChange={() => {}} // Not resizable on mobile /> , document.getElementById('mobile-bottom-sheet-portal') || document.body, @@ -1280,7 +1277,6 @@ export function Canvas({ onScheduleAction={resolvedOnScheduleAction} onScheduleDelete={resolvedOnScheduleDelete} onViewSchedules={resolvedOnViewSchedules} - onWidthChange={setConfigPanelWidth} /> ))} diff --git a/frontend/src/components/workflow/ConfigPanel.tsx b/frontend/src/components/workflow/ConfigPanel.tsx index e4ff21a1..ba6c84d3 100644 --- a/frontend/src/components/workflow/ConfigPanel.tsx +++ b/frontend/src/components/workflow/ConfigPanel.tsx @@ -99,8 +99,6 @@ interface ConfigPanelProps { selectedNode: Node | null; onClose: () => void; onUpdateNode?: (id: string, data: Partial) => void; - initialWidth?: number; - onWidthChange?: (width: number) => void; workflowId?: string | null; workflowSchedules?: WorkflowSchedule[]; schedulesLoading?: boolean; @@ -115,9 +113,7 @@ interface ConfigPanelProps { onViewSchedules?: () => void; } -const MIN_PANEL_WIDTH = 280; -const MAX_PANEL_WIDTH = 600; -const DEFAULT_PANEL_WIDTH = 432; +const PANEL_WIDTH = 432; // Custom hook to detect mobile viewport function useIsMobile(breakpoint = 768) { @@ -291,8 +287,6 @@ export function ConfigPanel({ selectedNode, onClose, onUpdateNode, - initialWidth = DEFAULT_PANEL_WIDTH, - onWidthChange, workflowId: workflowIdProp, workflowSchedules, schedulesLoading, @@ -324,48 +318,8 @@ export function ConfigPanel({ // Use lastCreatedKey (full key) if available, otherwise null (will show placeholder) const activeApiKey = lastCreatedKey || null; - const [panelWidth, setPanelWidth] = useState(initialWidth); - const isResizing = useRef(false); - const resizeRef = useRef(null); - - // Actual width to use - full width on mobile - const effectiveWidth = isMobile ? '100%' : panelWidth; - - const handleMouseDown = useCallback( - (e: React.MouseEvent) => { - // Disable resizing on mobile - if (isMobile) return; - e.preventDefault(); - isResizing.current = true; - document.body.style.cursor = 'col-resize'; - document.body.style.userSelect = 'none'; - }, - [isMobile], - ); - - useEffect(() => { - const handleMouseMove = (e: MouseEvent) => { - if (!isResizing.current) return; - const newWidth = window.innerWidth - e.clientX; - const clampedWidth = Math.min(MAX_PANEL_WIDTH, Math.max(MIN_PANEL_WIDTH, newWidth)); - setPanelWidth(clampedWidth); - onWidthChange?.(clampedWidth); - }; - - const handleMouseUp = () => { - isResizing.current = false; - document.body.style.cursor = ''; - document.body.style.userSelect = ''; - }; - - document.addEventListener('mousemove', handleMouseMove); - document.addEventListener('mouseup', handleMouseUp); - - return () => { - document.removeEventListener('mousemove', handleMouseMove); - document.removeEventListener('mouseup', handleMouseUp); - }; - }, [onWidthChange]); + // Fixed width on desktop, full width on mobile + const effectiveWidth = isMobile ? '100%' : PANEL_WIDTH; const handleParamValueChange = (paramId: string, value: any) => { if (!selectedNode || !onUpdateNode) return; @@ -435,14 +389,6 @@ export function ConfigPanel({ className="config-panel border-l bg-background flex flex-col h-full relative" style={{ width: effectiveWidth }} > - {/* Resize handle - hidden on mobile */} - {!isMobile && ( -
- )}

{isToolMode ? 'Tool' : 'Configuration'}