TRCKR-300 - trckr

← TRCKR-300

enhancement web ui

Created: 2025-12-12 • Updated: 2025-12-16

Relationships Loading...

The issue edit modal should use the same layout as the issue create modal for the status, priority, assignee, and milestone fields - displaying them in a single horizontal row.

## Current Behavior
The issue edit modal likely has a different layout for these metadata fields compared to the create modal, creating an inconsistent user experience.

## Desired Behavior
Both the create and edit modals should share the same layout pattern:
- Status, priority, assignee, and milestone on the same row
- Consistent field widths and spacing
- Same input component styles

## Implementation

1. **Identify the create modal layout**:
   - Check `server/templates/partials/issue_create_modal.html` or similar
   - Note the HTML structure for the status/priority/assignee/milestone row

2. **Update the edit modal**:
   - Modify `server/templates/partials/issue_edit_modal.html`
   - Apply the same row layout and styling
   - Ensure all four fields are present and editable

3. **Consider extracting a shared partial**:
   - Create a shared partial for the metadata row
   - Include it in both create and edit modals
   - Pass current values for edit, defaults for create

## Related
- TRCKR-299: Issue edit modal: Add assignee field (this ticket adds the missing assignee field)

## Acceptance Criteria
- [ ] Edit modal has same row layout as create modal
- [ ] Status, priority, assignee, milestone all on one row
- [ ] Consistent styling between create and edit modals
- [ ] All fields are functional in edit mode

Pull Requests (comma-separated URLs)

Attachments

Comments (1)

agent · 2025-12-12

**Implementation Complete** Successfully updated the issue edit modal to match the create modal's layout for the status/priority/assignee/milestone row. ## Changes Made **File**: server/templates/modals/issue_detail.html (lines 18-61) ### Layout Changes: 1. **Changed from grid to flexbox**: Replaced `.detail-grid` with `.form-row` to match create modal's layout system 2. **Updated field wrappers**: Changed from `.detail-field` to `.form-group` for consistency 3. **Updated labels**: Changed to `.form-label` class to match create modal styling 4. **Updated form controls**: Added `.form-control` class to all inputs and selects ### Content Changes: 5. **Capitalized option text**: Changed 'triage' → 'Triage', 'done' → 'Done', etc. to match create modal 6. **Reordered priority options**: Changed to None, Low, Medium, High, Urgent (matching create modal order) 7. **Updated placeholder text**: Changed assignee placeholder to 'Username or email' (matches create modal) 8. **Updated milestone default**: Changed to 'No Milestone' (matches create modal's 'No Project' pattern) ### Structure Changes: 9. **Moved 'Created' field**: Extracted read-only 'Created' field from the 4-field row, placed it below as separate metadata 10. **Four-field row**: Row now contains only the 4 editable fields: Status, Priority, Assignee, Milestone ## Verification **Deployment**: Successfully deployed to trckr.roboalch.com via `./scripts/deploy.sh` **Visual Verification**: Used chrome-devtools to verify layout on production server - Edit modal now displays Status/Priority/Assignee/Milestone in a single horizontal row - Create modal displays Status/Priority/Project/Milestone in a single horizontal row - Both use identical `.form-row` flexbox layout with `.form-group` field wrappers - Consistent styling and capitalization across both modals **Comparison**: - Create modal: Status | Priority | Project | Milestone - Edit modal: Status | Priority | Assignee | Milestone The difference in the 3rd field (Project vs Assignee) is intentional and makes UX sense: - Create modal needs Project selection (where should this issue go?) - Edit modal needs Assignee editing (who's working on this issue?) ## Result ✅ Edit modal has same row layout as create modal ✅ Status, priority, assignee, milestone all on one row ✅ Consistent styling between create and edit modals ✅ All fields are functional in edit mode ✅ Deployed to production at trckr.roboalch.com