Skip to content

fix: use fixed-width config panel sidebar #279

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
betterclever merged 1 commit into from
Feb 11, 2026
+4 −78
Merged

fix: use fixed-width config panel sidebar #279

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 1 addition & 5 deletions frontend/src/components/workflow/Canvas.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -174,7 +174,7 @@ export function Canvas({
const prevNodesLengthRef = useRef(nodes.length);
const prevEdgesLengthRef = useRef(edges.length);
const lastSelectedNodeIdRef = useRef<string | null>(null);
const [configPanelWidth, setConfigPanelWidth] = useState(432); // Default panel width
const configPanelWidth = 432;
const [canvasOpacity, setCanvasOpacity] = useState(1); // For fade transition

const nodeTypes = useMemo(
Expand Down Expand Up @@ -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: () => {
Expand Down Expand Up @@ -1251,7 +1249,6 @@ export function Canvas({
onScheduleAction={resolvedOnScheduleAction}
onScheduleDelete={resolvedOnScheduleDelete}
onViewSchedules={resolvedOnViewSchedules}
onWidthChange={() => {}} // Not resizable on mobile
/>
</div>,
document.getElementById('mobile-bottom-sheet-portal') || document.body,
Expand Down Expand Up @@ -1280,7 +1277,6 @@ export function Canvas({
onScheduleAction={resolvedOnScheduleAction}
onScheduleDelete={resolvedOnScheduleDelete}
onViewSchedules={resolvedOnViewSchedules}
onWidthChange={setConfigPanelWidth}
/>
</div>
))}
Expand Down
76 changes: 3 additions & 73 deletions frontend/src/components/workflow/ConfigPanel.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -99,8 +99,6 @@ interface ConfigPanelProps {
selectedNode: Node<FrontendNodeData> | null;
onClose: () => void;
onUpdateNode?: (id: string, data: Partial<FrontendNodeData>) => void;
initialWidth?: number;
onWidthChange?: (width: number) => void;
workflowId?: string | null;
workflowSchedules?: WorkflowSchedule[];
schedulesLoading?: boolean;
Expand All @@ -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) {
Expand Down Expand Up @@ -291,8 +287,6 @@ export function ConfigPanel({
selectedNode,
onClose,
onUpdateNode,
initialWidth = DEFAULT_PANEL_WIDTH,
onWidthChange,
workflowId: workflowIdProp,
workflowSchedules,
schedulesLoading,
Expand Down Expand Up @@ -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<HTMLDivElement>(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;
Expand Down Expand Up @@ -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 && (
<div
ref={resizeRef}
onMouseDown={handleMouseDown}
className="absolute left-0 top-0 bottom-0 w-1 cursor-col-resize hover:bg-primary/20 active:bg-primary/30 transition-colors z-10"
/>
)}
<div className="flex items-center justify-between px-3 md:px-4 py-3 border-b min-h-[56px] md:min-h-0">
<h3 className="font-medium text-sm">{isToolMode ? 'Tool' : 'Configuration'}</h3>
<Button
Expand All @@ -465,14 +411,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 && (
<div
ref={resizeRef}
onMouseDown={handleMouseDown}
className="absolute left-0 top-0 bottom-0 w-1 cursor-col-resize hover:bg-primary/20 active:bg-primary/30 transition-colors z-10"
/>
)}
<div className="flex items-center justify-between px-3 md:px-4 py-3 border-b min-h-[56px] md:min-h-0">
<h3 className="font-medium text-sm">{isToolMode ? 'Tool' : 'Configuration'}</h3>
<Button
Expand Down Expand Up @@ -694,14 +632,6 @@ export function ConfigPanel({
className="config-panel border-l bg-background flex flex-col h-full overflow-hidden relative"
style={{ width: effectiveWidth }}
>
{/* Resize Handle - hidden on mobile */}
{!isMobile && (
<div
ref={resizeRef}
onMouseDown={handleMouseDown}
className="absolute left-0 top-0 bottom-0 w-1 cursor-col-resize hover:bg-primary/20 active:bg-primary/30 transition-colors z-10"
/>
)}
{/* Header */}
<div className="flex items-center justify-between px-3 md:px-4 py-3 border-b min-h-[56px] md:min-h-0">
<h3 className="font-medium text-sm">{isToolMode ? 'Tool' : 'Configuration'}</h3>
Expand Down