# SDD Proposal: UI Polish Round — Config Sections, Home Paddings, Project Repos

## Status
**Phase:** proposal  
**Date:** 2026-06-16  
**Owner:** el Gentleman  

---

## User Story

As a Headquarter user, I want the Tool Workshop and Config Profiles editors to share a consistent section pattern, the Home page to have readable card paddings, and the Projects page to clearly show which repositories belong to a project so that the UI feels coherent and scannable.

---

## Problems

1. **Config sections are inconsistent**
   - Config Profiles uses `.form-section`.
   - Tool Workshop's `manifest-editor.tsx` uses `.card-md.stack.stack-md` with bare `<h4>` headings.
   - Both serve the same purpose: a grouped configuration block with a title.

2. **Home page cards lost padding**
   - The `.home-summary-card` has no padding.
   - `.home-hero` and `.home-section` may have lost explicit padding during the card consolidation pass.
   - The result is cards that touch their borders and feel cramped.

3. **Project repositories look misaligned**
   - In the expanded project card, the repository list is rendered but visually floats on the right/indented.
   - There is no clear "Repositories" header.
   - The "Add Repository" button is detached from the repo list; it is unclear whether it adds a repo or performs a project-level action.

---

## Goals

1. Introduce a single shared `.config-section` component class and use it in both Config Profiles and Tool Workshop.
2. Restore comfortable, token-based padding on Home hero, summary cards, and section cards.
3. Left-align repositories under the project header, add a clear "Repositories" section header, and visually attach the "Add Repository" button to the repo list.

---

## Non-Goals

- No changes to backend APIs or data models.
- No redesign of the Home page layout or information architecture.
- No changes to mobile project list behavior.
- No new features (e.g., no new repo actions).

---

## High-Level Approach

1. **Shared config section**
   - Add `.config-section` and `.config-section-title` to `global.css`.
   - Refactor `manifest-editor.tsx` to use `.config-section` instead of `.card-md.stack.stack-md` + `<h4>`.
   - Refactor `ConfigProfileEditorPanel.tsx` to use `.config-section` instead of `.form-section` for its grouped blocks.

2. **Home padding fix**
   - Add explicit padding to `.home-hero`, `.home-summary-card`, and `.home-section`.
   - Use `--space-*` tokens.

3. **Project repo layout**
   - In `ProjectCard.tsx`, wrap repositories in a `<section className="project-repos">`.
   - Add a header row with "Repositories" label and repo count.
   - Move the "Add Repository" button into the repo section footer, directly under the list.
   - Left-align `.repo-list` so blocks fill from the left edge of the project detail area.
   - Update `styles/pages/projects.css` accordingly.

---

## Risks

| Risk | Severity | Mitigation |
|------|----------|------------|
| `.form-section` has other consumers outside config profiles | Low | Keep `.form-section` as alias; do not delete. |
| `.card-md` consumers outside manifest editor | Low | `.config-section` will be equivalent; verify no visual change. |
| Project repo layout changes affect mobile | Medium | Test both desktop and mobile expanded project card. |

---

## Effort Estimate

| Area | Files | Lines (est) |
|---|---|---|
| Shared config section | 3 | ~120 |
| Home padding | 2 | ~40 |
| Project repo layout | 2 | ~100 |
| OpenSpec artifacts | 3 | ~80 |
| **Total** | **10** | **~340** |

Review workload is within the 400-line budget.

---

## Next Recommended Phase

**Spec** — detail the exact CSS rules, component markup changes, and acceptance criteria.

Should I proceed to spec?