Skip to content

Commit a57733d

Browse files
authored
Make benchmark ready footer buttons wrap with container queries (#2051)
Fixes OPS-3820. Screenshots below, matching the latest Figma design (see ticket). Narrow container: <img width="1571" height="580" alt="Screenshot 2026-03-04 at 10 20 10" src="https://github.com/user-attachments/assets/526fe6b8-6cd6-45d1-83ea-126ddf10b702" /> Wide container: <img width="1568" height="578" alt="Screenshot 2026-03-04 at 10 20 19" src="https://github.com/user-attachments/assets/8f2f05c1-ae67-4a9a-91b9-75fe75a17de8" />
1 parent 1ab733a commit a57733d

2 files changed

Lines changed: 7 additions & 1 deletion

File tree

packages/react-ui/src/app/features/benchmark/components/benchmark-wizard-footer.tsx

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -78,10 +78,11 @@ export const BenchmarkWizardFooter = ({
7878
);
7979

8080
return (
81-
<div className="flex-1 flex gap-2 justify-end">
81+
<div className="@container flex-1 flex flex-wrap gap-2 justify-end">
8282
<Button
8383
variant="outline"
8484
size="sm"
85+
className="flex-1 min-w-0 @xs:flex-none"
8586
disabled={isRunning}
8687
onClick={handleEditSetup}
8788
>
@@ -90,12 +91,14 @@ export const BenchmarkWizardFooter = ({
9091
{benchmarkCreationResult && (
9192
<ViewBenchmarkWorkflowsButton
9293
folderId={benchmarkCreationResult.folderId}
94+
className="flex-1 min-w-0 @xs:flex-none"
9395
disabled={isRunning}
9496
/>
9597
)}
9698
<Button
9799
size="sm"
98100
disabled={!hasOrchestrator || isRunning}
101+
className="w-full @xs:w-auto"
99102
onClick={() => {
100103
onRunNow().catch((e) => {
101104
console.error(e);

packages/react-ui/src/app/features/benchmark/components/view-benchmark-workflows-button.tsx

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,8 +4,10 @@ import { useNavigate } from 'react-router-dom';
44

55
export const ViewBenchmarkWorkflowsButton = ({
66
folderId,
7+
className,
78
disabled,
89
}: {
10+
className?: string;
911
folderId: string;
1012
disabled?: boolean;
1113
}) => {
@@ -14,6 +16,7 @@ export const ViewBenchmarkWorkflowsButton = ({
1416
<Button
1517
variant="outline"
1618
size="sm"
19+
className={className}
1720
disabled={disabled}
1821
onClick={() => navigate(`/flows?${FOLDER_ID_PARAM_NAME}=${folderId}`)}
1922
>

0 commit comments

Comments
 (0)