Skip to content

Fix uneven alignment in consultation queue workflow stepper

Issue Summary

The consultation workflow stepper (steps 1–9) appears visually uneven and misaligned, affecting UI consistency. The spacing between steps and alignment of connectors is inconsistent.

Problem Statement

Problem Statement

The stepper UI is not evenly spaced. Circles and connecting lines are misaligned, creating a visually unbalanced layout.

What is broken: Uneven spacing between steps Misaligned connectors and circles Who is affected: Doctors and coordinators using the consultation workflow Impact: Poor UI/UX Reduced readability of workflow steps Unpolished interface Reproduction: Navigate to consultation workflow Observe the stepper (steps 1–9) Notice uneven spacing and misalignment Proposed Solution

Use a consistent layout system (CSS Grid or Flexbox) to evenly distribute steps and align connectors.

Prefer grid-template-columns: repeat(9, 1fr) Avoid manual margins/padding Ensure responsiveness and consistent alignment

Test-Driven Development

Acceptance Criteria (Given-When-Then)

Scenario 1: [Scenario Name]

Given [initial context/state]
  And [additional preconditions]
 When [action is performed]
 Then [expected outcome]
  And [additional outcomes]

Scenario 2: [Scenario Name]

Given [initial context/state]
 When [action is performed]
 Then [expected outcome]

Test Cases

Test ID Test Description Precondition Test Steps Expected Result Priority
TC-001 Step alignment Page loaded Observe stepper Even spacing across all steps High
TC-002 Active step UI Step 7 active Check highlight No shift or misalignment High

Unit Test Requirements

Module/Component Function/Hook Test Cases to Cover
Stepper.tsx Render logic TC-001, TC-002
Test Assertions Required:
  • Renders correctly with initial state
  • Handles user input correctly
  • Validates input and shows errors
  • Calls API with correct payload
  • Handles loading state
  • Handles success response
  • Handles error response
  • Updates UI state appropriately

Implementation Details

Files to Change

File Path Action Purpose
src/components/...Stepper.tsx Modify Fix layout and alignment
src/styles/... Modify Adjust spacing and layout
src/tests/...Stepper.test.tsx Create Add unit tests

Technical Considerations

Technical Considerations Prefer CSS Grid (grid-template-columns: repeat(n, 1fr)) for equal spacing Alternatively, use Flexbox with justify-content: space-between Avoid hardcoded margins/paddings causing uneven spacing Ensure responsiveness across screen sizes

UI/UX Requirements

UI/UX Requirements Equal spacing between all steps Consistent alignment of circles and connectors No layout shift when changing active step Responsive across desktop/tablet/mobile

Mockups/Wireframes:

Testing Strategy

Manual Testing

Test Environment:

  • Browser: [Chrome/Firefox/Safari/Edge]
  • Viewport: [Desktop/Tablet/Mobile]
  • User Role: [admin/coordinator/volunteer/patient/doctor]

Manual Test Steps:

anual Testing

Test Environment:

Browser: Chrome, Firefox Viewport: Desktop, Tablet User Role: Doctor / Coordinator

Manual Test Steps:

Open consultation workflow page Observe stepper alignment Navigate through steps and verify consistency Automated Testing

Unit Tests:

Component render tests Active state UI tests Layout consistency tests

Integration Tests (if applicable):

Step navigation flow

Automated Testing

Unit Tests:

  • Component render tests
  • User interaction tests
  • API integration tests
  • Error handling tests

Integration Tests (if applicable):

  • Multi-component interaction tests
  • Route navigation tests

Test Data Requirements

const mockTestData = { steps: 9, activeStep: 7 }

Definition of Done

  • Acceptance criteria met (all Given-When-Then scenarios pass)
  • All test cases executed and passing
  • Unit tests written and passing (minimum coverage: __%)
  • Manual testing completed
  • Code reviewed and approved
  • UI matches design specifications (if applicable)
  • Responsive on all required viewport sizes
  • Accessibility checks passed (aria labels, keyboard navigation)
  • No console errors or warnings
  • TypeScript types defined (no any)
  • ESLint/Prettier checks pass
  • Documentation updated (if applicable)
  • i18n strings externalized (no hardcoded text)

Additional Context

Notes

Issue is purely UI-related (CSS/layout) No backend or API changes required

Edited by Suma Pullaiahgari