diff --git a/src-web/components/BasicAuth.tsx b/src-web/components/BasicAuth.tsx index b0d090df..1b2ea334 100644 --- a/src-web/components/BasicAuth.tsx +++ b/src-web/components/BasicAuth.tsx @@ -13,7 +13,7 @@ export function BasicAuth({ request }: Prop const updateGrpcRequest = useUpdateGrpcRequest(request.id); return ( - + {children} diff --git a/src-web/components/core/PairEditor.tsx b/src-web/components/core/PairEditor.tsx index 4046336c..115815f6 100644 --- a/src-web/components/core/PairEditor.tsx +++ b/src-web/components/core/PairEditor.tsx @@ -32,6 +32,7 @@ export type PairEditorProps = { allowFileValues?: boolean; nameValidate?: InputProps['validate']; valueValidate?: InputProps['validate']; + noScroll?: boolean; }; export type Pair = { @@ -57,6 +58,7 @@ export const PairEditor = memo(function PairEditor({ nameValidate, valueType, onChange, + noScroll, pairs: originalPairs, valueAutocomplete, valueAutocompleteVariables, @@ -95,7 +97,7 @@ export const PairEditor = memo(function PairEditor({ [onChange], ); - const handleMove = useCallback( + const handleMove = useCallback( (id, side) => { const dragIndex = pairs.findIndex((r) => r.id === id); setHoveredIndex(side === 'above' ? dragIndex : dragIndex + 1); @@ -103,7 +105,7 @@ export const PairEditor = memo(function PairEditor({ [pairs], ); - const handleEnd = useCallback( + const handleEnd = useCallback( (id: string) => { if (hoveredIndex === null) return; setHoveredIndex(null); @@ -162,7 +164,8 @@ export const PairEditor = memo(function PairEditor({ className={classNames( className, '@container', - 'pb-2 grid overflow-auto max-h-full', + 'pb-2 mb-auto', + !noScroll && 'overflow-y-auto max-h-full', // Move over the width of the drag handle '-ml-3', // Pad to make room for the drag divider @@ -174,7 +177,7 @@ export const PairEditor = memo(function PairEditor({ return ( {hoveredIndex === i && } - ; -const FormRow = memo(function FormRow({ +function PairEditorRow({ allowFileValues, className, forceFocusPairId, @@ -254,7 +257,7 @@ const FormRow = memo(function FormRow({ valuePlaceholder, valueValidate, valueType, -}: FormRowProps) { +}: PairEditorRowProps) { const { id } = pairContainer; const ref = useRef(null); const prompt = usePrompt(); @@ -480,7 +483,7 @@ const FormRow = memo(function FormRow({ )} ); -}); +} const newPairContainer = (initialPair?: Pair): PairContainer => { const id = initialPair?.id ?? uuid();