merge: fix/ui-padding-issues

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">

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">

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>
+        <div className="dialog-header">
-        <form onSubmit={onSubmit} className="stack">
+          <h2>{mode === "create" ? "Create Project" : "Edit Project"}</h2>
+        </div>
+        <form onSubmit={onSubmit} className="dialog-body stack">
           <label className="form-field">
             Name
             <input

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>
+				<div className="dialog-header">
-				<p className="muted">
+					<h3>{title}</h3>
-					Clone an existing repository from git.commumedia.org, or create a
+				</div>
-					blank bare repo here.
+				<form onSubmit={handleSubmit} className="dialog-body stack">
-				</p>
+					<p className="muted m-0">
-				<form onSubmit={handleSubmit} className="stack">
+						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

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">

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>
+								<div className="dialog-header">
-								<p>
+									<h3>Uncommitted Changes</h3>
-									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 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}

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>
+							<div className="dialog-header">
-							<ToolStarter
+								<h3>Start Tool</h3>
-								workspace={startWorkspace}
+							</div>
-								onStarted={() => {
+							<div className="dialog-body">
-									setStartWorkspace(null);
+								<ToolStarter
-									void refresh();
+									workspace={startWorkspace}
-								}}
+									onStarted={() => {
-								onCancel={() => setStartWorkspace(null)}
+										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>
+						<div className="dialog-header">
-						<ToolStarter
+							<h3>Start Tool</h3>
-							workspace={startWorkspace}
+						</div>
-							onStarted={() => {
+						<div className="dialog-body">
-								setStartWorkspace(null);
+							<ToolStarter
-								void refresh();
+								workspace={startWorkspace}
-							}}
+								onStarted={() => {
-							onCancel={() => setStartWorkspace(null)}
+									setStartWorkspace(null);
-						/>
+									void refresh();
+								}}
+								onCancel={() => setStartWorkspace(null)}
+							/>
+						</div>
 					</div>
 				</div>
 			)}

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;

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 {

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 {