Skip to content

Use available panel space and scroll list options in benchmark wizard step #2031

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
cezudas merged 2 commits into from
Feb 27, 2026
Merged

Use available panel space and scroll list options in benchmark wizard step #2031

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
b77732b
Use available panel space and scroll list options in benchmark wizard…
cezudas Feb 27, 2026
3c5ca5f
rename prop to adhere to camel case
cezudas Feb 27, 2026
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
11 changes: 8 additions & 3 deletions packages/react-ui/src/app/features/benchmark/components/benchmark-wizard.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -103,7 +103,7 @@ export const BenchmarkWizard = ({
/>
)}
<Wizard
className="border-l-0 border-t-0"
className="border-l-0 border-t-0 pb-9"
value={wizardPhase}
onValueChange={noop}
>
Expand All @@ -112,7 +112,7 @@ export const BenchmarkWizard = ({
<WizardClose onClose={onClose} />
</WizardHeader>

<WizardContent className="max-h-[358px]">
<WizardContent className="flex flex-col overflow-hidden">
{isCreatingBenchmark ? (
<BenchmarkCreatingPlaceholder />
) : (
Expand All @@ -125,11 +125,16 @@ export const BenchmarkWizard = ({
connectedProviders={connectedProviders}
/>
</WizardStep>
<WizardStep value="provider-step" key="provider-step">
<WizardStep
value="provider-step"
key="provider-step"
className="flex flex-col flex-1 min-h-0"
>
{currentStepResponse && (
<DynamicBenchmarkStep
stepResponse={currentStepResponse}
value={currentSelections}
stepBodyClassName="flex-1 min-h-0 overflow-y-auto"
onValueChange={setCurrentSelections}
/>
)}
Expand Down
5 changes: 4 additions & 1 deletion ...i/src/app/features/benchmark/components/dynamic-benchmark-step/dynamic-benchmark-step.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,7 @@ import { DynamicBenchmarkStepProps } from './types';
export const DynamicBenchmarkStep = ({
stepResponse,
value,
stepBodyClassName,
onValueChange,
}: DynamicBenchmarkStepProps) => {
const isMultiSelect = stepResponse.selectionType === 'multi-select';
Expand All @@ -29,17 +30,19 @@ export const DynamicBenchmarkStep = ({
/>
</StepDescription>
)}
<StepBody>
<StepBody className="flex flex-col flex-1 min-h-0 bg-transparent border-none">
{isMultiSelect ? (
<MultiSelectBody
stepResponse={stepResponse}
value={value}
stepBodyClassName={stepBodyClassName}
onValueChange={onValueChange}
/>
) : (
<SingleSelectBody
stepResponse={stepResponse}
value={value}
stepBodyClassName={stepBodyClassName}
onValueChange={onValueChange}
/>
)}
Expand Down
35 changes: 19 additions & 16 deletions ...act-ui/src/app/features/benchmark/components/dynamic-benchmark-step/multi-select-body.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,7 @@ import { DynamicBenchmarkStepProps } from './types';
export const MultiSelectBody = ({
stepResponse,
value,
stepBodyClassName,
onValueChange,
}: DynamicBenchmarkStepProps) => {
const handleSelectAll = useCallback(
Expand All @@ -23,12 +24,12 @@ export const MultiSelectBody = ({
);

return (
<div className="rounded-lg bg-background shadow-sm">
<div className="rounded-lg bg-background shadow-sm flex flex-col max-h-full overflow-hidden">
<SelectForm
type="multi"
value={value}
onValueChange={onValueChange}
className="border-none shadow-none"
className="border-none shadow-none flex flex-col flex-1 min-h-0"
>
<div className="px-4 py-3 border-b border-border h-12 flex items-center">
<SelectAllCheckbox
Expand All @@ -38,20 +39,22 @@ export const MultiSelectBody = ({
onSelectAllChange={handleSelectAll}
/>
</div>
{stepResponse.options.map((option) => (
<SelectOption
key={option.id}
value={option.id}
icon={
<OptionIcon
imageLogoUrl={option.imageLogoUrl}
displayName={option.displayName}
/>
}
>
{option.displayName}
</SelectOption>
))}
<div className={stepBodyClassName}>
{stepResponse.options.map((option) => (
<SelectOption
key={option.id}
value={option.id}
icon={
<OptionIcon
imageLogoUrl={option.imageLogoUrl}
displayName={option.displayName}
/>
}
>
{option.displayName}
</SelectOption>
))}
</div>
</SelectForm>
</div>
);
Expand Down
1 change: 1 addition & 0 deletions ...ct-ui/src/app/features/benchmark/components/dynamic-benchmark-step/single-select-body.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,7 @@ export const SingleSelectBody = ({
type="single"
value={value[0] ?? ''}
onValueChange={(v) => onValueChange([v])}
className="max-h-full overflow-y-auto"
>
{stepResponse.options.map((option) => (
<SelectOption
Expand Down
1 change: 1 addition & 0 deletions packages/react-ui/src/app/features/benchmark/components/dynamic-benchmark-step/types.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,4 +4,5 @@ export interface DynamicBenchmarkStepProps {
stepResponse: BenchmarkWizardStepResponse;
value: string[];
onValueChange: (value: string[]) => void;
stepBodyClassName?: string;
}
Loading