feat(web/ui): consolidate dialogs, cards, and breakpoints (Pass 3)
- Unify modal/dialog system; .modal-* are now aliases of .dialog-* - Migrate WorkspacesPage, start-tool-modal, merge-dialog, workspace-tools-panel to .dialog-* - Add .card-sm/.card-md/.card-lg/.card-elevated/.card-borderless modifiers - Apply card utilities across workspaces, projects, ssh-keys, workspace-detail, git-history - Remove duplicated card-like background/border/padding from page CSS - Remove 860px breakpoint; standardize on 767px/768px mobile split - Add docs/development/ui-review-checklist.md - Archive web-ui-spacing-typography-rework OpenSpec change
This commit is contained in:
@@ -255,7 +255,7 @@ export const InstanceList = ({
|
||||
) : (
|
||||
<div className="instance-grid">
|
||||
{instances.map((instance) => (
|
||||
<div key={instance.id} className="instance-card">
|
||||
<div key={instance.id} className="card card-md instance-card">
|
||||
<LoadingOverlay
|
||||
visible={busyInstanceId === instance.id}
|
||||
label={busyLabel}
|
||||
|
||||
@@ -47,9 +47,9 @@ export function StartToolModal({
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="modal-overlay" onClick={onClose}>
|
||||
<div className="modal-content" onClick={(e) => e.stopPropagation()}>
|
||||
<div className="modal-header">
|
||||
<div className="dialog-overlay" onClick={onClose}>
|
||||
<div className="dialog" onClick={(e) => e.stopPropagation()}>
|
||||
<div className="dialog-header">
|
||||
<h3>
|
||||
<Icon name="play" size="sm" /> Start Tool on {workspace.name}
|
||||
</h3>
|
||||
@@ -57,7 +57,7 @@ export function StartToolModal({
|
||||
<Icon name="cancel" size="sm" />
|
||||
</button>
|
||||
</div>
|
||||
<form onSubmit={handleSubmit}>
|
||||
<form onSubmit={handleSubmit} className="dialog-body">
|
||||
<div className="form-group">
|
||||
<label htmlFor="tool-type">Tool Type</label>
|
||||
<select
|
||||
@@ -90,7 +90,7 @@ export function StartToolModal({
|
||||
/>
|
||||
</div>
|
||||
{error && <p className="form-error">{error}</p>}
|
||||
<div className="form-actions">
|
||||
<div className="dialog-actions">
|
||||
<button
|
||||
type="button"
|
||||
className="btn btn-secondary"
|
||||
|
||||
Reference in New Issue
Block a user