From 2d8d42bd9cee790c8884a75cbc1ea5f9aa113126 Mon Sep 17 00:00:00 2001
From: CREDO23 <bakerathierry@gmail.com>
Date: Thu, 28 May 2026 15:40:18 +0200
Subject: [PATCH] refactor(web): polish automations detail view

---
 .../automation-detail-content.tsx             | 24 ++++----
 .../automation-definition-section.tsx         |  2 +-
 .../components/automation-detail-loading.tsx  | 60 ++++++++++++-------
 .../components/automation-runs-section.tsx    |  2 +-
 .../automation-triggers-section.tsx           |  2 +-
 .../components/plan-step-card.tsx             |  2 +-
 .../components/run-details-panel.tsx          |  2 +-
 .../[automation_id]/components/run-row.tsx    |  2 +-
 .../components/runs-loading.tsx               |  2 +-
 .../components/trigger-card.tsx               |  2 +-
 .../new/components/automation-json-form.tsx   |  2 +-
 .../layout/providers/LayoutDataProvider.tsx   |  8 ++-
 12 files changed, 65 insertions(+), 45 deletions(-)

diff --git a/surfsense_web/app/dashboard/[search_space_id]/automations/[automation_id]/automation-detail-content.tsx b/surfsense_web/app/dashboard/[search_space_id]/automations/[automation_id]/automation-detail-content.tsx
index 49df3633e..4085d47a8 100644
--- a/surfsense_web/app/dashboard/[search_space_id]/automations/[automation_id]/automation-detail-content.tsx
+++ b/surfsense_web/app/dashboard/[search_space_id]/automations/[automation_id]/automation-detail-content.tsx
@@ -72,16 +72,20 @@ export function AutomationDetailContent({
 				canDelete={perms.canDelete}
 			/>
 
-			<AutomationDefinitionSection definition={automation.definition} />
-
-			<AutomationTriggersSection
-				triggers={automation.triggers}
-				automationId={automation.id}
-				canUpdate={perms.canUpdate}
-				canDelete={perms.canDelete}
-			/>
-
-			<AutomationRunsSection automationId={automation.id} />
+			<div className="grid grid-cols-1 gap-6 lg:grid-cols-3">
+				<div className="space-y-6 min-w-0 lg:col-span-2">
+					<AutomationDefinitionSection definition={automation.definition} />
+					<AutomationRunsSection automationId={automation.id} />
+				</div>
+				<div className="space-y-6 min-w-0">
+					<AutomationTriggersSection
+						triggers={automation.triggers}
+						automationId={automation.id}
+						canUpdate={perms.canUpdate}
+						canDelete={perms.canDelete}
+					/>
+				</div>
+			</div>
 		</>
 	);
 }
diff --git a/surfsense_web/app/dashboard/[search_space_id]/automations/[automation_id]/components/automation-definition-section.tsx b/surfsense_web/app/dashboard/[search_space_id]/automations/[automation_id]/components/automation-definition-section.tsx
index 9545f363b..e8721d9b0 100644
--- a/surfsense_web/app/dashboard/[search_space_id]/automations/[automation_id]/components/automation-definition-section.tsx
+++ b/surfsense_web/app/dashboard/[search_space_id]/automations/[automation_id]/components/automation-definition-section.tsx
@@ -24,7 +24,7 @@ export function AutomationDefinitionSection({ definition }: AutomationDefinition
 	const hasInputs = !!definition.inputs;
 
 	return (
-		<Card>
+		<Card className="border-border/60 bg-accent">
 			<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-4">
 				<CardTitle className="text-base font-semibold">Definition</CardTitle>
 				<span className="text-xs font-mono text-muted-foreground border border-border/60 rounded px-1.5 py-0.5">
diff --git a/surfsense_web/app/dashboard/[search_space_id]/automations/[automation_id]/components/automation-detail-loading.tsx b/surfsense_web/app/dashboard/[search_space_id]/automations/[automation_id]/components/automation-detail-loading.tsx
index 1d01305ee..0d6ba3110 100644
--- a/surfsense_web/app/dashboard/[search_space_id]/automations/[automation_id]/components/automation-detail-loading.tsx
+++ b/surfsense_web/app/dashboard/[search_space_id]/automations/[automation_id]/components/automation-detail-loading.tsx
@@ -3,12 +3,13 @@ import { Card, CardContent, CardHeader } from "@/components/ui/card";
 import { Skeleton } from "@/components/ui/skeleton";
 
 /**
- * Skeleton for the detail page. Same shell as the loaded view (header +
- * two stacked cards) so the layout doesn't jump on data arrival.
+ * Skeleton for the detail page. Mirrors the loaded view's main/sidebar
+ * grid (Definition + Runs on the left, Triggers on the right) so layout
+ * doesn't reflow when data arrives.
  */
 export function AutomationDetailLoading() {
 	return (
-		<div className="space-y-6">
+		<>
 			<div className="space-y-3">
 				<Skeleton className="h-4 w-32" />
 				<div className="flex items-center gap-3">
@@ -18,25 +19,38 @@ export function AutomationDetailLoading() {
 				<Skeleton className="h-4 w-96" />
 			</div>
 
-			<Card>
-				<CardHeader>
-					<Skeleton className="h-5 w-32" />
-				</CardHeader>
-				<CardContent className="space-y-4">
-					<Skeleton className="h-4 w-3/4" />
-					<Skeleton className="h-4 w-1/2" />
-					<Skeleton className="h-24 w-full" />
-				</CardContent>
-			</Card>
-
-			<Card>
-				<CardHeader>
-					<Skeleton className="h-5 w-24" />
-				</CardHeader>
-				<CardContent>
-					<Skeleton className="h-20 w-full" />
-				</CardContent>
-			</Card>
-		</div>
+			<div className="grid grid-cols-1 gap-6 lg:grid-cols-3">
+				<div className="space-y-6 min-w-0 lg:col-span-2">
+					<Card className="border-border/60 bg-accent">
+						<CardHeader>
+							<Skeleton className="h-5 w-32" />
+						</CardHeader>
+						<CardContent className="space-y-4">
+							<Skeleton className="h-4 w-3/4" />
+							<Skeleton className="h-4 w-1/2" />
+							<Skeleton className="h-24 w-full" />
+						</CardContent>
+					</Card>
+					<Card className="border-border/60 bg-accent">
+						<CardHeader>
+							<Skeleton className="h-5 w-32" />
+						</CardHeader>
+						<CardContent>
+							<Skeleton className="h-20 w-full" />
+						</CardContent>
+					</Card>
+				</div>
+				<div className="space-y-6 min-w-0">
+					<Card className="border-border/60 bg-accent">
+						<CardHeader>
+							<Skeleton className="h-5 w-24" />
+						</CardHeader>
+						<CardContent>
+							<Skeleton className="h-20 w-full" />
+						</CardContent>
+					</Card>
+				</div>
+			</div>
+		</>
 	);
 }
diff --git a/surfsense_web/app/dashboard/[search_space_id]/automations/[automation_id]/components/automation-runs-section.tsx b/surfsense_web/app/dashboard/[search_space_id]/automations/[automation_id]/components/automation-runs-section.tsx
index b6158cab2..d31bd696d 100644
--- a/surfsense_web/app/dashboard/[search_space_id]/automations/[automation_id]/components/automation-runs-section.tsx
+++ b/surfsense_web/app/dashboard/[search_space_id]/automations/[automation_id]/components/automation-runs-section.tsx
@@ -23,7 +23,7 @@ export function AutomationRunsSection({ automationId }: AutomationRunsSectionPro
 	const runs = data?.items ?? [];
 
 	return (
-		<Card>
+		<Card className="border-border/60 bg-accent">
 			<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-4">
 				<div className="space-y-1">
 					<CardTitle className="text-base font-semibold inline-flex items-center gap-2">
diff --git a/surfsense_web/app/dashboard/[search_space_id]/automations/[automation_id]/components/automation-triggers-section.tsx b/surfsense_web/app/dashboard/[search_space_id]/automations/[automation_id]/components/automation-triggers-section.tsx
index 33c8373a1..558a089ac 100644
--- a/surfsense_web/app/dashboard/[search_space_id]/automations/[automation_id]/components/automation-triggers-section.tsx
+++ b/surfsense_web/app/dashboard/[search_space_id]/automations/[automation_id]/components/automation-triggers-section.tsx
@@ -23,7 +23,7 @@ export function AutomationTriggersSection({
 	canDelete,
 }: AutomationTriggersSectionProps) {
 	return (
-		<Card>
+		<Card className="border-border/60 bg-accent">
 			<CardHeader className="pb-4">
 				<CardTitle className="text-base font-semibold">Triggers</CardTitle>
 				<p className="text-xs text-muted-foreground">
diff --git a/surfsense_web/app/dashboard/[search_space_id]/automations/[automation_id]/components/plan-step-card.tsx b/surfsense_web/app/dashboard/[search_space_id]/automations/[automation_id]/components/plan-step-card.tsx
index 3feb77712..b9fda00db 100644
--- a/surfsense_web/app/dashboard/[search_space_id]/automations/[automation_id]/components/plan-step-card.tsx
+++ b/surfsense_web/app/dashboard/[search_space_id]/automations/[automation_id]/components/plan-step-card.tsx
@@ -15,7 +15,7 @@ interface PlanStepCardProps {
  */
 export function PlanStepCard({ step, index }: PlanStepCardProps) {
 	return (
-		<div className="rounded-md border border-border/60 bg-background overflow-hidden">
+		<div className="rounded-md border border-border/60 overflow-hidden">
 			<div className="flex items-center gap-2 px-4 py-2 border-b border-border/60 bg-muted/30">
 				<span className="inline-flex h-6 w-6 items-center justify-center rounded-full bg-muted text-xs font-medium text-muted-foreground">
 					{index + 1}
diff --git a/surfsense_web/app/dashboard/[search_space_id]/automations/[automation_id]/components/run-details-panel.tsx b/surfsense_web/app/dashboard/[search_space_id]/automations/[automation_id]/components/run-details-panel.tsx
index d1d46900a..94a96b199 100644
--- a/surfsense_web/app/dashboard/[search_space_id]/automations/[automation_id]/components/run-details-panel.tsx
+++ b/surfsense_web/app/dashboard/[search_space_id]/automations/[automation_id]/components/run-details-panel.tsx
@@ -109,7 +109,7 @@ function Section({
 
 function JsonBlock({ value }: { value: unknown }) {
 	return (
-		<pre className="rounded-md bg-background/60 px-3 py-2 text-[11px] font-mono text-foreground overflow-x-auto whitespace-pre-wrap break-words max-h-64">
+		<pre className="rounded-md bg-muted/40 px-3 py-2 text-[11px] font-mono text-foreground overflow-x-auto whitespace-pre-wrap break-words max-h-64">
 			{JSON.stringify(value, null, 2)}
 		</pre>
 	);
diff --git a/surfsense_web/app/dashboard/[search_space_id]/automations/[automation_id]/components/run-row.tsx b/surfsense_web/app/dashboard/[search_space_id]/automations/[automation_id]/components/run-row.tsx
index b8d2bcc8b..02ca0569c 100644
--- a/surfsense_web/app/dashboard/[search_space_id]/automations/[automation_id]/components/run-row.tsx
+++ b/surfsense_web/app/dashboard/[search_space_id]/automations/[automation_id]/components/run-row.tsx
@@ -24,7 +24,7 @@ export function RunRow({ run, automationId }: RunRowProps) {
 		: formatRelativeDate(run.created_at);
 
 	return (
-		<div className="rounded-md border border-border/60 bg-background overflow-hidden">
+		<div className="rounded-md border border-border/60 overflow-hidden">
 			<button
 				type="button"
 				onClick={() => setOpen((value) => !value)}
diff --git a/surfsense_web/app/dashboard/[search_space_id]/automations/[automation_id]/components/runs-loading.tsx b/surfsense_web/app/dashboard/[search_space_id]/automations/[automation_id]/components/runs-loading.tsx
index 5cab18f4c..61ce25e32 100644
--- a/surfsense_web/app/dashboard/[search_space_id]/automations/[automation_id]/components/runs-loading.tsx
+++ b/surfsense_web/app/dashboard/[search_space_id]/automations/[automation_id]/components/runs-loading.tsx
@@ -9,7 +9,7 @@ export function RunsLoading() {
 			{ROW_KEYS.map((key) => (
 				<div
 					key={key}
-					className="flex items-center justify-between gap-4 rounded-md border border-border/60 bg-background/50 px-4 py-3"
+					className="flex items-center justify-between gap-4 rounded-md border border-border/60 px-4 py-3"
 				>
 					<div className="flex items-center gap-3">
 						<Skeleton className="h-5 w-20 rounded-md" />
diff --git a/surfsense_web/app/dashboard/[search_space_id]/automations/[automation_id]/components/trigger-card.tsx b/surfsense_web/app/dashboard/[search_space_id]/automations/[automation_id]/components/trigger-card.tsx
index ec0246e49..200a15f57 100644
--- a/surfsense_web/app/dashboard/[search_space_id]/automations/[automation_id]/components/trigger-card.tsx
+++ b/surfsense_web/app/dashboard/[search_space_id]/automations/[automation_id]/components/trigger-card.tsx
@@ -48,7 +48,7 @@ export function TriggerCard({ trigger, automationId, canUpdate, canDelete }: Tri
 
 	return (
 		<>
-			<div className="rounded-md border border-border/60 bg-background overflow-hidden">
+			<div className="rounded-md border border-border/60 overflow-hidden">
 				<div className="flex items-center justify-between gap-4 px-4 py-3 border-b border-border/60">
 					<div className="flex items-center gap-3 min-w-0">
 						<CalendarClock className="h-4 w-4 text-muted-foreground shrink-0" aria-hidden />
diff --git a/surfsense_web/app/dashboard/[search_space_id]/automations/new/components/automation-json-form.tsx b/surfsense_web/app/dashboard/[search_space_id]/automations/new/components/automation-json-form.tsx
index 845d95166..8fe065295 100644
--- a/surfsense_web/app/dashboard/[search_space_id]/automations/new/components/automation-json-form.tsx
+++ b/surfsense_web/app/dashboard/[search_space_id]/automations/new/components/automation-json-form.tsx
@@ -75,7 +75,7 @@ export function AutomationJsonForm({ searchSpaceId }: AutomationJsonFormProps) {
 	const hasIssues = issues.length > 0;
 
 	return (
-		<Card>
+		<Card className="border-border/60 bg-accent">
 			<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-4">
 				<CardTitle className="text-base font-semibold inline-flex items-center gap-2">
 					<FileJson className="h-4 w-4 text-muted-foreground" aria-hidden />
diff --git a/surfsense_web/components/layout/providers/LayoutDataProvider.tsx b/surfsense_web/components/layout/providers/LayoutDataProvider.tsx
index 67971e435..663e4b96f 100644
--- a/surfsense_web/components/layout/providers/LayoutDataProvider.tsx
+++ b/surfsense_web/components/layout/providers/LayoutDataProvider.tsx
@@ -726,9 +726,11 @@ export function LayoutDataProvider({ searchSpaceId, children }: LayoutDataProvid
 						: undefined
 				}
 				workspacePanelContentClassName={
-					isUserSettingsPage || isSearchSpaceSettingsPage || isTeamPage || isAutomationsPage
-						? "max-w-5xl"
-						: undefined
+					isAutomationsPage
+						? "max-w-none"
+						: isUserSettingsPage || isSearchSpaceSettingsPage || isTeamPage
+							? "max-w-5xl"
+							: undefined
 				}
 				isLoadingChats={isLoadingThreads}
 				activeSlideoutPanel={activeSlideoutPanel}