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
This commit is contained in:
Developer
2026-06-16 21:54:55 +00:00
parent bf698b3ff2
commit 8b6a4f7712
10 changed files with 70 additions and 73 deletions
+21 -17
View File
@@ -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}
+26 -18
View File
@@ -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>
)}