From ac56c5e3910cf2e1d8b65124065417343b4e4669 Mon Sep 17 00:00:00 2001
From: Developer <dev@headquarter.local>
Date: Tue, 16 Jun 2026 16:06:08 +0000
Subject: [PATCH] fix(web/ui): correct project card layout and unify config
 section actions

- Fix .project-card flex direction so expanded repos align left
- Add .config-section-actions for consistent save bars
- Replace sticky footer in Config Profiles with config-section-actions
- Replace dialog-actions in Tool Type editor with config-section-actions
- Convert manifest editor preview block to .config-section
---
 .../config-profiles/ConfigProfileEditorPanel.tsx |  2 +-
 .../tool-workshop/ToolTypeEditorPanel.tsx        |  2 +-
 .../components/features/tool/manifest-editor.tsx | 15 ++++++++++-----
 apps/web/src/styles/global.css                   | 16 +++++++++++++---
 4 files changed, 25 insertions(+), 10 deletions(-)

diff --git a/apps/web/src/components/features/config-profiles/ConfigProfileEditorPanel.tsx b/apps/web/src/components/features/config-profiles/ConfigProfileEditorPanel.tsx
index f51ab35..883c7fe 100644
--- a/apps/web/src/components/features/config-profiles/ConfigProfileEditorPanel.tsx
+++ b/apps/web/src/components/features/config-profiles/ConfigProfileEditorPanel.tsx
@@ -294,7 +294,7 @@ export const ConfigProfileEditorPanel = ({
               <GitMountEditor mounts={formData.git_mounts || []} onChange={(git_mounts) => onFormChange("git_mounts", git_mounts)} />
             </section>
 
-            <div className="dialog-actions sticky-footer">
+            <div className="config-section-actions">
               <button type="submit" disabled={saveStatus === "saving"} className="btn btn-primary">
                 <Icon name={isCreating ? "add" : "save"} size="sm" />
                 {saveStatus === "saving" ? "Saving..." : isCreating ? "Create Profile" : "Save Changes"}
diff --git a/apps/web/src/components/features/tool-workshop/ToolTypeEditorPanel.tsx b/apps/web/src/components/features/tool-workshop/ToolTypeEditorPanel.tsx
index cf9943f..2403fbc 100644
--- a/apps/web/src/components/features/tool-workshop/ToolTypeEditorPanel.tsx
+++ b/apps/web/src/components/features/tool-workshop/ToolTypeEditorPanel.tsx
@@ -332,7 +332,7 @@ export const ToolTypeEditorPanel = ({
 
 						{toolTypeError && <p className="text-error">{toolTypeError}</p>}
 
-						<div className="dialog-actions mt-4">
+						<div className="config-section-actions">
 							<button type="submit" className="btn btn-primary">
 								<Icon name={isCreating ? "add" : "save"} size="sm" />
 								{isCreating ? "Create Tool Type" : "Save Changes"}
diff --git a/apps/web/src/components/features/tool/manifest-editor.tsx b/apps/web/src/components/features/tool/manifest-editor.tsx
index 9fee3b7..b2c7c81 100644
--- a/apps/web/src/components/features/tool/manifest-editor.tsx
+++ b/apps/web/src/components/features/tool/manifest-editor.tsx
@@ -749,14 +749,19 @@ export const ManifestEditor = ({
 			</section>
 
 			{/* Preview */}
-			<div className="card-md stack stack-md">
-				<div className="row justify-between items-center">
-					<h4 className="m-0">Live Preview</h4>
+			<section className="config-section">
+				<div className="config-section-header">
+					<div>
+						<h4 className="config-section-title">Live Preview</h4>
+						<p className="config-section-subtitle">
+							Preview generated Dockerfile and Compose output
+						</p>
+					</div>
 					<button
 						type="button"
 						onClick={handlePreview}
 						disabled={previewLoading}
-						className="button-secondary"
+						className="btn btn-secondary"
 					>
 						<Icon name="refresh" size="sm" />
 						{previewLoading ? "Compiling..." : "Preview"}
@@ -779,7 +784,7 @@ export const ManifestEditor = ({
 						</div>
 					</div>
 				)}
-			</div>
+			</section>
 		</div>
 	);
 };
diff --git a/apps/web/src/styles/global.css b/apps/web/src/styles/global.css
index fa6f143..95da1fc 100644
--- a/apps/web/src/styles/global.css
+++ b/apps/web/src/styles/global.css
@@ -378,9 +378,9 @@
 
 .project-card {
 	display: flex;
-	justify-content: space-between;
-	align-items: flex-start;
-	gap: 1rem;
+	flex-direction: column;
+	align-items: stretch;
+	gap: 0;
 }
 
 .project-info h3 {
@@ -635,6 +635,16 @@
 	margin-bottom: 0;
 }
 
+.config-section-actions {
+	display: flex;
+	align-items: center;
+	justify-content: flex-start;
+	gap: var(--space-3);
+	margin-top: var(--space-2);
+	padding-top: var(--space-3);
+	border-top: 1px solid var(--border);
+}
+
 /* Legacy alias for existing consumers */
 .form-section {
 	padding: var(--space-4);