# OpenSpec Tasks: UI Polish Round — Config Sections, Home Paddings, Project Repos

## Change
`ui-polish-round-config-sections-home-projects`

## Parent Spec
`openspec/specs/ui-polish-round-config-sections-home-projects.md`

## Status
tasks

---

## Implementation Tasks

- [x] 1. Add shared config-section classes to `apps/web/src/styles/global.css`
  - `.config-section`
  - `.config-section-title`
  - `.config-section-subtitle`
  - `.config-section-header`
  - Keep `.form-section` as backward-compatible alias

- [x] 2. Refactor `apps/web/src/components/features/tool/manifest-editor.tsx`
  - Replace `.card-md.stack.stack-md` + `<h4 className="m-0">` blocks with `.config-section` + `.config-section-title`
  - Keep preview block as `.card-md` if it is not a config section

- [x] 3. Refactor `apps/web/src/components/features/config-profiles/ConfigProfileEditorPanel.tsx`
  - Replace `.form-section` grouped blocks with `.config-section`
  - Use `.config-section-header` for title + action rows
  - Add `.config-section-subtitle` where helpful

- [x] 4. Fix Home page paddings in `apps/web/src/styles/global.css`
  - `.home-hero`: `--space-4` padding
  - `.home-summary-card`: `--space-4` padding
  - `.home-section`: `--space-4` padding
  - Mobile (`max-width: 767px`): reduce to `--space-3`

- [x] 5. Improve project repository layout in `apps/web/src/components/features/project/ProjectCard.tsx`
  - Wrap repositories in `<section className="project-repos">`
  - Add `.project-repos-header` with "Repositories" title, repo count, and "Add Repository" button
  - Remove old standalone `.project-add-repo` block

- [x] 6. Update `apps/web/src/styles/pages/projects.css`
  - Left-align `.repo-list`
  - Add `.project-repos` and `.project-repos-header` styles
  - Remove or hide old `.project-add-repo` rules
  - Add mobile stacking for `.project-repos-header`

- [x] 7. Verification
  - Run `cd apps/web && npm run typecheck`
  - Run `cd apps/web && npm run lint`
  - Spot-check Tool Workshop, Config Profiles, Home, and Projects pages
  - Test project card on mobile viewport

- [x] 8. Update OpenSpec artifacts
  - Mark tasks complete
  - Add final report note

---

## Acceptance Criteria

- All tasks above are completed.
- `npm run typecheck` passes.
- `npm run lint` passes.
- Tool Workshop and Config Profiles share the same `.config-section` visual style.
- Home page cards have comfortable padding on desktop and mobile.
- Project repositories are left-aligned with a clear header and an attached "Add Repository" button.

---

## Notes

- Do not delete `.form-section`; keep it as an alias.
- Do not change project data or behavior; only layout.
- Prefer one commit per task area.