headquarter/openspec/tasks/ui-polish-round-config-sections-home-projects.md

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

• 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

• 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

• 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

• 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

• 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

• 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

• 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

• 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.