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
This commit is contained in:
Developer
2026-06-16 16:06:08 +00:00
parent 17f4e91a84
commit ac56c5e391
4 changed files with 25 additions and 10 deletions
@@ -294,7 +294,7 @@ export const ConfigProfileEditorPanel = ({
<GitMountEditor mounts={formData.git_mounts || []} onChange={(git_mounts) => onFormChange("git_mounts", git_mounts)} /> <GitMountEditor mounts={formData.git_mounts || []} onChange={(git_mounts) => onFormChange("git_mounts", git_mounts)} />
</section> </section>
<div className="dialog-actions sticky-footer"> <div className="config-section-actions">
<button type="submit" disabled={saveStatus === "saving"} className="btn btn-primary"> <button type="submit" disabled={saveStatus === "saving"} className="btn btn-primary">
<Icon name={isCreating ? "add" : "save"} size="sm" /> <Icon name={isCreating ? "add" : "save"} size="sm" />
{saveStatus === "saving" ? "Saving..." : isCreating ? "Create Profile" : "Save Changes"} {saveStatus === "saving" ? "Saving..." : isCreating ? "Create Profile" : "Save Changes"}
@@ -332,7 +332,7 @@ export const ToolTypeEditorPanel = ({
{toolTypeError && <p className="text-error">{toolTypeError}</p>} {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"> <button type="submit" className="btn btn-primary">
<Icon name={isCreating ? "add" : "save"} size="sm" /> <Icon name={isCreating ? "add" : "save"} size="sm" />
{isCreating ? "Create Tool Type" : "Save Changes"} {isCreating ? "Create Tool Type" : "Save Changes"}
@@ -749,14 +749,19 @@ export const ManifestEditor = ({
</section> </section>
{/* Preview */} {/* Preview */}
<div className="card-md stack stack-md"> <section className="config-section">
<div className="row justify-between items-center"> <div className="config-section-header">
<h4 className="m-0">Live Preview</h4> <div>
<h4 className="config-section-title">Live Preview</h4>
<p className="config-section-subtitle">
Preview generated Dockerfile and Compose output
</p>
</div>
<button <button
type="button" type="button"
onClick={handlePreview} onClick={handlePreview}
disabled={previewLoading} disabled={previewLoading}
className="button-secondary" className="btn btn-secondary"
> >
<Icon name="refresh" size="sm" /> <Icon name="refresh" size="sm" />
{previewLoading ? "Compiling..." : "Preview"} {previewLoading ? "Compiling..." : "Preview"}
@@ -779,7 +784,7 @@ export const ManifestEditor = ({
</div> </div>
</div> </div>
)} )}
</div> </section>
</div> </div>
); );
}; };
+13 -3
View File
@@ -378,9 +378,9 @@
.project-card { .project-card {
display: flex; display: flex;
justify-content: space-between; flex-direction: column;
align-items: flex-start; align-items: stretch;
gap: 1rem; gap: 0;
} }
.project-info h3 { .project-info h3 {
@@ -635,6 +635,16 @@
margin-bottom: 0; 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 */ /* Legacy alias for existing consumers */
.form-section { .form-section {
padding: var(--space-4); padding: var(--space-4);