From 8b6a4f7712980454e82c2ce7de4f3990a7a5e3dc Mon Sep 17 00:00:00 2001
From: Developer <dev@headquarter.local>
Date: Tue, 16 Jun 2026 21:54:55 +0000
Subject: [PATCH] fix(web/ui): resolve padding and dialog layout issues from
 audit

- Remove conflicting .dialog/.dialog-body rules from utilities.css
- Fix live-session sidebar alignment and padding
- Wrap ProjectDialog, RepositoryCreateDialog, WorkspacesPage modals in .dialog-header/.dialog-body
- Migrate SessionsPage dirty-delete modal from .modal-* to .dialog-*
- Add padding to .project-card
- Fix session-card-actions border token (var(--border))
- Remove duplicate .dialog-actions rule in global.css
- Add pb-20 bottom clearance to ConfigProfile/ToolType editor scroll containers
- Add .card-md padding to ErrorState
---
 apps/web/src/components/data-states.tsx       |  2 +-
 .../ConfigProfileEditorPanel.tsx              |  2 +-
 .../features/project/ProjectDialog.tsx        |  6 ++-
 .../project/repository-create-dialog.tsx      | 14 +++---
 .../tool-workshop/ToolTypeEditorPanel.tsx     |  2 +-
 apps/web/src/pages/SessionsPage.tsx           | 38 +++++++++-------
 apps/web/src/pages/WorkspacesPage.tsx         | 44 +++++++++++--------
 apps/web/src/styles/global.css                |  7 +--
 apps/web/src/styles/pages/sessions.css        |  4 +-
 apps/web/src/styles/utilities.css             | 24 +++-------
 10 files changed, 70 insertions(+), 73 deletions(-)

diff --git a/apps/web/src/components/data-states.tsx b/apps/web/src/components/data-states.tsx
index 14bfad3..29639d2 100644
--- a/apps/web/src/components/data-states.tsx
+++ b/apps/web/src/components/data-states.tsx
@@ -14,7 +14,7 @@ interface ErrorStateProps {
 }
 
 export const ErrorState = ({ message = "Failed to load", onRetry }: ErrorStateProps) => (
-  <div className="card stack">
+  <div className="card card-md stack">
     <p>{message}</p>
     {onRetry && (
       <button className="secondary-button" onClick={onRetry} type="button">
diff --git a/apps/web/src/components/features/config-profiles/ConfigProfileEditorPanel.tsx b/apps/web/src/components/features/config-profiles/ConfigProfileEditorPanel.tsx
index 883c7fe..15c026a 100644
--- a/apps/web/src/components/features/config-profiles/ConfigProfileEditorPanel.tsx
+++ b/apps/web/src/components/features/config-profiles/ConfigProfileEditorPanel.tsx
@@ -86,7 +86,7 @@ export const ConfigProfileEditorPanel = ({
   const hasSelection = isCreating || selectedProfile;
 
   return (
-    <div className="flex-1 overflow-auto p-5 min-w-0">
+    <div className="flex-1 overflow-auto p-5 pb-20 min-w-0">
       {!hasSelection ? (
         <div className="empty-state">
           <div className="empty-state-icon">
diff --git a/apps/web/src/components/features/project/ProjectDialog.tsx b/apps/web/src/components/features/project/ProjectDialog.tsx
index 5468dab..1938530 100644
--- a/apps/web/src/components/features/project/ProjectDialog.tsx
+++ b/apps/web/src/components/features/project/ProjectDialog.tsx
@@ -24,8 +24,10 @@ export const ProjectDialog = ({
   return (
     <div className="dialog-overlay" role="dialog" aria-modal="true">
       <div className="dialog">
-        <h2>{mode === "create" ? "Create Project" : "Edit Project"}</h2>
-        <form onSubmit={onSubmit} className="stack">
+        <div className="dialog-header">
+          <h2>{mode === "create" ? "Create Project" : "Edit Project"}</h2>
+        </div>
+        <form onSubmit={onSubmit} className="dialog-body stack">
           <label className="form-field">
             Name
             <input
diff --git a/apps/web/src/components/features/project/repository-create-dialog.tsx b/apps/web/src/components/features/project/repository-create-dialog.tsx
index fa3e6f5..ba63af5 100644
--- a/apps/web/src/components/features/project/repository-create-dialog.tsx
+++ b/apps/web/src/components/features/project/repository-create-dialog.tsx
@@ -227,12 +227,14 @@ export const RepositoryCreateDialog = ({
 	return (
 		<div className="dialog-overlay" role="dialog" aria-modal="true">
 			<div className="dialog">
-				<h3>{title}</h3>
-				<p className="muted">
-					Clone an existing repository from git.commumedia.org, or create a
-					blank bare repo here.
-				</p>
-				<form onSubmit={handleSubmit} className="stack">
+				<div className="dialog-header">
+					<h3>{title}</h3>
+				</div>
+				<form onSubmit={handleSubmit} className="dialog-body stack">
+					<p className="muted m-0">
+						Clone an existing repository from git.commumedia.org, or create a
+						blank bare repo here.
+					</p>
 					<div className="form-field repo-mode-radios">
 						<label className="repo-mode-label">
 							<input
diff --git a/apps/web/src/components/features/tool-workshop/ToolTypeEditorPanel.tsx b/apps/web/src/components/features/tool-workshop/ToolTypeEditorPanel.tsx
index 2403fbc..4b3518b 100644
--- a/apps/web/src/components/features/tool-workshop/ToolTypeEditorPanel.tsx
+++ b/apps/web/src/components/features/tool-workshop/ToolTypeEditorPanel.tsx
@@ -53,7 +53,7 @@ export const ToolTypeEditorPanel = ({
 	const hasSelection = isCreating || selectedToolType;
 
 	return (
-		<div className="flex-1 overflow-auto p-5 min-w-0">
+		<div className="flex-1 overflow-auto p-5 pb-20 min-w-0">
 			{!hasSelection ? (
 				<div className="empty-state">
 					<div className="empty-state-icon">
diff --git a/apps/web/src/pages/SessionsPage.tsx b/apps/web/src/pages/SessionsPage.tsx
index c37ad44..10fc779 100644
--- a/apps/web/src/pages/SessionsPage.tsx
+++ b/apps/web/src/pages/SessionsPage.tsx
@@ -155,27 +155,31 @@ export const SessionsPage = () => {
 
 					{/* Dirty Delete Confirmation Modal */}
 					{dirtyDeleteSession && (
-						<div className="modal-overlay" onClick={clearDirtyDelete}>
+						<div className="dialog-overlay" onClick={clearDirtyDelete}>
 							<div
-								className="modal-content"
+								className="dialog"
 								onClick={(e) => e.stopPropagation()}
 							>
-								<h3>Uncommitted Changes</h3>
-								<p>
-									The repository{" "}
-									<strong>{dirtyDeleteSession.repository_name}</strong> has
-									uncommitted changes. Deleting this session will permanently
-									lose these changes.
-								</p>
-								<div className="changed-files-list">
-									<h4>Changed files:</h4>
-									<ul>
-										{dirtyDeleteFiles.map((file, idx) => (
-											<li key={idx}>{file}</li>
-										))}
-									</ul>
+								<div className="dialog-header">
+									<h3>Uncommitted Changes</h3>
 								</div>
-								<div className="modal-actions">
+								<div className="dialog-body stack">
+									<p>
+										The repository{" "}
+										<strong>{dirtyDeleteSession.repository_name}</strong> has
+										uncommitted changes. Deleting this session will permanently
+										lose these changes.
+									</p>
+									<div className="changed-files-list">
+										<h4>Changed files:</h4>
+										<ul>
+											{dirtyDeleteFiles.map((file, idx) => (
+												<li key={idx}>{file}</li>
+											))}
+										</ul>
+									</div>
+								</div>
+								<div className="dialog-actions">
 									<button
 										className="secondary-button"
 										onClick={clearDirtyDelete}
diff --git a/apps/web/src/pages/WorkspacesPage.tsx b/apps/web/src/pages/WorkspacesPage.tsx
index e1b0424..b58504f 100644
--- a/apps/web/src/pages/WorkspacesPage.tsx
+++ b/apps/web/src/pages/WorkspacesPage.tsx
@@ -124,15 +124,19 @@ export function WorkspacesPage() {
 						onClick={() => setStartWorkspace(null)}
 					>
 						<div className="dialog" onClick={(e) => e.stopPropagation()}>
-							<h3>Start Tool</h3>
-							<ToolStarter
-								workspace={startWorkspace}
-								onStarted={() => {
-									setStartWorkspace(null);
-									void refresh();
-								}}
-								onCancel={() => setStartWorkspace(null)}
-							/>
+							<div className="dialog-header">
+								<h3>Start Tool</h3>
+							</div>
+							<div className="dialog-body">
+								<ToolStarter
+									workspace={startWorkspace}
+									onStarted={() => {
+										setStartWorkspace(null);
+										void refresh();
+									}}
+									onCancel={() => setStartWorkspace(null)}
+								/>
+							</div>
 						</div>
 					</div>
 				)}
@@ -204,15 +208,19 @@ export function WorkspacesPage() {
 			{startWorkspace && (
 				<div className="dialog-overlay" onClick={() => setStartWorkspace(null)}>
 					<div className="dialog" onClick={(e) => e.stopPropagation()}>
-						<h3>Start Tool</h3>
-						<ToolStarter
-							workspace={startWorkspace}
-							onStarted={() => {
-								setStartWorkspace(null);
-								void refresh();
-							}}
-							onCancel={() => setStartWorkspace(null)}
-						/>
+						<div className="dialog-header">
+							<h3>Start Tool</h3>
+						</div>
+						<div className="dialog-body">
+							<ToolStarter
+								workspace={startWorkspace}
+								onStarted={() => {
+									setStartWorkspace(null);
+									void refresh();
+								}}
+								onCancel={() => setStartWorkspace(null)}
+							/>
+						</div>
 					</div>
 				</div>
 			)}
diff --git a/apps/web/src/styles/global.css b/apps/web/src/styles/global.css
index 8d88997..cdaf4a8 100644
--- a/apps/web/src/styles/global.css
+++ b/apps/web/src/styles/global.css
@@ -381,6 +381,7 @@
 	flex-direction: column;
 	align-items: stretch;
 	gap: 0;
+	padding: var(--space-4);
 }
 
 .project-info h3 {
@@ -677,12 +678,6 @@
 	line-height: var(--line-height-normal);
 }
 
-.dialog-actions {
-	display: flex;
-	justify-content: flex-end;
-	gap: 0.6rem;
-}
-
 .keys-list {
 	display: flex;
 	flex-direction: column;
diff --git a/apps/web/src/styles/pages/sessions.css b/apps/web/src/styles/pages/sessions.css
index ad6711f..cade164 100644
--- a/apps/web/src/styles/pages/sessions.css
+++ b/apps/web/src/styles/pages/sessions.css
@@ -115,14 +115,14 @@
 	align-items: center;
 	gap: var(--space-2);
 	padding-top: var(--space-3);
-	border-top: 1px solid var(--color-border);
+	border-top: 1px solid var(--border);
 }
 
 .session-card-actions.mobile {
 	display: flex;
 	gap: var(--space-2);
 	padding-top: var(--space-3);
-	border-top: 1px solid var(--color-border);
+	border-top: 1px solid var(--border);
 }
 
 .session-card-actions.mobile .mobile-primary {
diff --git a/apps/web/src/styles/utilities.css b/apps/web/src/styles/utilities.css
index 2e8aebe..c7c23a2 100644
--- a/apps/web/src/styles/utilities.css
+++ b/apps/web/src/styles/utilities.css
@@ -434,17 +434,6 @@ button,
 	min-width: var(--touch-target);
 }
 
-/* Dialog Responsive */
-.dialog {
-	width: min(560px, 100vw - 2rem);
-	max-height: min(800px, 100vh - 2rem);
-	overflow-y: auto;
-}
-
-.dialog-lg {
-	width: min(800px, 100vw - 2rem);
-}
-
 /* Table Responsive */
 .table-responsive {
 	overflow-x: auto;
@@ -621,11 +610,6 @@ a.nav-item,
 	width: 100%;
 }
 
-/* Dialog content spacing */
-.dialog-body {
-	padding: var(--space-4) 0;
-}
-
 /* Prevent text overflow in cards */
 .card h3,
 .card p {
@@ -636,9 +620,11 @@ a.nav-item,
 /* Session Navigation */
 .session-item {
 	display: flex;
-	align-items: center;
+	align-items: flex-start;
 	gap: var(--space-2);
-	padding-left: var(--space-2);
+	padding: var(--space-2) var(--space-3);
+	text-align: left;
+	width: 100%;
 }
 
 .session-icon-wrap {
@@ -649,7 +635,7 @@ a.nav-item,
 	width: 1.25rem;
 	height: 1.25rem;
 	flex-shrink: 0;
-	align-self: flex-start;
+	margin-top: 2px;
 }
 
 .session-icon-wrap .icon {