knacky/mimic
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(frontend): side-by-side red-team/SOC columns on simulation screen

Browse Source 
Wrap RT and SOC form cards in a responsive 2-column grid
(grid gap-xl lg:grid-cols-2 items-start) on the simulation edit view.
Drop the max-w-3xl constraint from the outer container so the grid
can use full page width (matching EngagementDetailPage). Header,
banners, submitError, and sticky action bar remain full-width above
the grid. The isNew create form keeps its current narrow layout.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Knacky
2026-06-10 18:17:54 +02:00
parent 573281f454
commit 1997a8c621
1 changed files with 126 additions and 123 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
frontend/src/pages/SimulationFormPage.tsx
View File

@@ -257,7 +257,7 @@ export function SimulationFormPage(): JSX.Element {
updateMutation.isPending || transitionMutation.isPending || deleteMutation.isPending; updateMutation.isPending || transitionMutation.isPending || deleteMutation.isPending;
return ( return (
<div className="flex flex-col gap-xl max-w-3xl"> <div className="flex flex-col gap-xl">
<header className="flex items-start justify-between gap-md"> <header className="flex items-start justify-between gap-md">
<div className="flex flex-col gap-sm"> <div className="flex flex-col gap-sm">
<Link to={`/engagements/${engagementId}`} className="btn-text-link text-[14px]"> <Link to={`/engagements/${engagementId}`} className="btn-text-link text-[14px]">
@@ -298,6 +298,8 @@ export function SimulationFormPage(): JSX.Element {
</div> </div>
)} )}
{/* 2-column grid: RT left, SOC right. Stacks vertically below lg. */}
<div className="grid gap-xl lg:grid-cols-2 items-start">
{/* Red Team card */} {/* Red Team card */}
<form <form
id="rt-form" id="rt-form"
@@ -432,6 +434,7 @@ export function SimulationFormPage(): JSX.Element {
/> />
</FormField> </FormField>
</form> </form>
</div>
{submitError ? ( {submitError ? (
<div role="alert" className="text-[14px] text-bloom-deep">{submitError}</div> <div role="alert" className="text-[14px] text-bloom-deep">{submitError}</div>