tkmind/tkmind_go
1
0
Fork 0
Code Issues Pull Requests Actions 5 Packages Projects Releases Wiki Activity

fix: recipe parameter form max height and not scrolling (#3879)

Browse Source
This commit is contained in:
Zane
2025-08-06 01:43:27 -07:00
committed by GitHub
parent 8f54fa84a5
commit c5fd3b708a
1 changed files with 76 additions and 62 deletions
Download Patch File Download Diff File Expand all files Collapse all files
ui/desktop/src/components/ParameterInputModal.tsx
+76 -62
View File
@@ -115,68 +115,76 @@ const ParameterInputModal: React.FC<ParameterInputModalProps> = ({
</div> </div>
) : ( ) : (
// Main parameter form // Main parameter form
<div className="bg-background-default border border-borderSubtle rounded-xl p-8 shadow-2xl w-full max-w-lg"> <div className="bg-background-default border border-borderSubtle rounded-xl shadow-2xl w-full max-w-lg max-h-[90vh] flex flex-col overflow-hidden">
<h2 className="text-xl font-bold text-textProminent mb-6">Recipe Parameters</h2> <div className="p-8 pb-4 flex-shrink-0">
<form onSubmit={handleSubmit} className="space-y-4"> <h2 className="text-xl font-bold text-textProminent mb-6">Recipe Parameters</h2>
{parameters.map((param) => ( </div>
<div key={param.key}> <div className="flex-1 overflow-y-auto px-8">
<label className="block text-md font-medium text-textStandard mb-2"> <form onSubmit={handleSubmit} className="space-y-4">
{param.description || param.key} {parameters.map((param) => (
{param.requirement === 'required' && <span className="text-red-500 ml-1">*</span>} <div key={param.key}>
</label> <label className="block text-md font-medium text-textStandard mb-2">
{param.description || param.key}
{param.requirement === 'required' && (
<span className="text-red-500 ml-1">*</span>
)}
</label>
{/* Render different input types */} {/* Render different input types */}
{param.input_type === 'select' && param.options ? ( {param.input_type === 'select' && param.options ? (
<select <select
value={inputValues[param.key] || ''} value={inputValues[param.key] || ''}
onChange={(e) => handleChange(param.key, e.target.value)} onChange={(e) => handleChange(param.key, e.target.value)}
className={`w-full p-3 border rounded-lg bg-bgSubtle text-textStandard focus:outline-none focus:ring-2 ${ className={`w-full p-3 border rounded-lg bg-bgSubtle text-textStandard focus:outline-none focus:ring-2 ${
validationErrors[param.key] validationErrors[param.key]
? 'border-red-500 focus:ring-red-500' ? 'border-red-500 focus:ring-red-500'
: 'border-borderSubtle focus:ring-borderProminent' : 'border-borderSubtle focus:ring-borderProminent'
}`} }`}
> >
<option value="">Select an option...</option> <option value="">Select an option...</option>
{param.options.map((option) => ( {param.options.map((option) => (
<option key={option} value={option}> <option key={option} value={option}>
{option} {option}
</option> </option>
))} ))}
</select> </select>
) : param.input_type === 'boolean' ? ( ) : param.input_type === 'boolean' ? (
<select <select
value={inputValues[param.key] || ''} value={inputValues[param.key] || ''}
onChange={(e) => handleChange(param.key, e.target.value)} onChange={(e) => handleChange(param.key, e.target.value)}
className={`w-full p-3 border rounded-lg bg-bgSubtle text-textStandard focus:outline-none focus:ring-2 ${ className={`w-full p-3 border rounded-lg bg-bgSubtle text-textStandard focus:outline-none focus:ring-2 ${
validationErrors[param.key] validationErrors[param.key]
? 'border-red-500 focus:ring-red-500' ? 'border-red-500 focus:ring-red-500'
: 'border-borderSubtle focus:ring-borderProminent' : 'border-borderSubtle focus:ring-borderProminent'
}`} }`}
> >
<option value="">Select...</option> <option value="">Select...</option>
<option value="true">True</option> <option value="true">True</option>
<option value="false">False</option> <option value="false">False</option>
</select> </select>
) : ( ) : (
<input <input
type={param.input_type === 'number' ? 'number' : 'text'} type={param.input_type === 'number' ? 'number' : 'text'}
value={inputValues[param.key] || ''} value={inputValues[param.key] || ''}
onChange={(e) => handleChange(param.key, e.target.value)} onChange={(e) => handleChange(param.key, e.target.value)}
className={`w-full p-3 border rounded-lg bg-bgSubtle text-textStandard focus:outline-none focus:ring-2 ${ className={`w-full p-3 border rounded-lg bg-bgSubtle text-textStandard focus:outline-none focus:ring-2 ${
validationErrors[param.key] validationErrors[param.key]
? 'border-red-500 focus:ring-red-500' ? 'border-red-500 focus:ring-red-500'
: 'border-borderSubtle focus:ring-borderProminent' : 'border-borderSubtle focus:ring-borderProminent'
}`} }`}
placeholder={param.default || `Enter value for ${param.key}...`} placeholder={param.default || `Enter value for ${param.key}...`}
/> />
)} )}
{validationErrors[param.key] && ( {validationErrors[param.key] && (
<p className="text-red-500 text-sm mt-1">{validationErrors[param.key]}</p> <p className="text-red-500 text-sm mt-1">{validationErrors[param.key]}</p>
)} )}
</div> </div>
))} ))}
<div className="flex justify-end gap-4 pt-6"> </form>
</div>
<div className="p-8 pt-4 flex-shrink-0">
<div className="flex justify-end gap-4">
<Button <Button
type="button" type="button"
onClick={handleCancel} onClick={handleCancel}
@@ -186,11 +194,17 @@ const ParameterInputModal: React.FC<ParameterInputModalProps> = ({
> >
Cancel Cancel
</Button> </Button>
<Button type="submit" variant="default" size="default" className="rounded-full"> <Button
type="button"
onClick={handleSubmit}
variant="default"
size="default"
className="rounded-full"
>
Start Recipe Start Recipe
</Button> </Button>
</div> </div>
</form> </div>
</div> </div>
)} )}
</div> </div>