Skip to content

Fix alignment and spacing issues in consultation queue workflow stepper

Suma Pullaiahgari requested to merge fix/queue-stepper into develop

Overview

Fixes uneven spacing and misalignment in the patient status stepper component (9-step workflow). The stepper circles and connecting lines are now properly aligned horizontally with consistent spacing.

What does this MR do and why?

The consultation queue workflow stepper (steps 1–9) was displaying unevenly spaced circles with misaligned connecting lines. This was caused by using flex justify-between which doesn't distribute items evenly when combined with fixed padding.

Motivation: Improve UI consistency and visual polish for the patient journey tracker shown across consultation-related pages.

Approach: Replaced flexbox with CSS Grid (grid-cols-9) to ensure each of the 9 steps occupies exactly 1/9th of the container width, guaranteeing perfect alignment.

Trade-offs: Minimal - grid approach is more predictable for fixed-step steppers and has no performance impact.

Changes Made

  • File modified: src/components/PatientStatusTracker.tsx
    • Changed desktop stepper container from flex justify-between to grid grid-cols-9
    • Updated connector line positioning to use percentage-based calculations
    • Removed complex width calculation logic for progress overlay

Technical Details

Root cause: justify-between with fixed px-8 padding creates uneven spacing when the number of items (9 steps) doesn't divide evenly into the available space.

Fix: CSS Grid with grid-cols-9 ensures each step container gets exactly 100% / 9 width, with circles centered in each grid cell. Connector lines are positioned using calc(5.55% + 18px) (half a column + half circle width) for proper edge-to-edge alignment.

Type of Change

  • 🐛 Bug fix (non-breaking change that fixes an issue)
  • ✨ New feature (non-breaking change that adds functionality)
  • 💥 Breaking change (fix or feature that would cause existing functionality to change)
  • 📝 Documentation update
  • 🎨 UI/UX improvement
  • ♻️ Refactor (non-breaking change that fixes an issue)
  • ⚡ Performance improvement
  • 🧪 Test update
  • 🔧 Configuration change
  • 🚨 Security fix

Related Issues / References

<!257 (merged)>

Screenshots or Screen Recordings

Before Screenshot_from_2026-03-24_15-29-36

After Screenshot_from_2026-03-24_16-01-59

Responsive behavior:

Viewport Size Breakpoint Before After
Desktop ≥768px ❌ Uneven ✅ Even
Mobile <768px ✅ Unchanged ✅ Unchanged

How to Set Up and Validate Locally

  1. Checkout this branch: 
    git checkout <branch-name>
  2. Install dependencies: 
    bun install
  3. Run development server: 
    bun dev
  4. Navigate to any consultation queue page:
    • Visit /volunteer/consultation-queue
    • Open a patient card to see the status tracker
  5. Verify:
    • All 9 step circles are evenly spaced
    • Connector lines align with circle centers
    • No visual regression on mobile view

Testing Done

  • Manual testing completed
  • Unit tests added/updated

Test Cases Covered:

Scenario Expected Result Status
Desktop view (≥768px) All 9 steps evenly spaced ✅
Connector lines Align with circle centers ✅
Completed steps Progress bar fills correctly ✅
Mobile view (<768px) No regression (scrollable cards) ✅
Hover states Scale animation works ✅
Click handlers Navigation still functional ✅

Code Quality Checklist

Code Standards

  • Code follows project conventions (naming, structure, formatting)
  • No console.log() or debugger statements left in code
  • No unused imports, variables, or functions
  • No duplicate code and use of existing components for reusability
  • i18n check passed with no hardcoded strings in codebase for i18n support
  • TypeScript types are properly defined (no any unless justified)
  • ESLint and Prettier checks pass

React Best Practices

  • Components are properly split and single-responsibility
  • Hooks follow rules (no conditional hooks, proper dependencies)
  • State management is appropriate (local vs global state)
  • No unnecessary re-renders (memoization used where needed)
  • Event handlers are properly cleaned up

Component Patterns

  • shadcn/ui components used correctly
  • Tailwind classes follow utility-first approach
  • Responsive design considered (mobile-first if applicable)
  • Accessibility attributes included (aria-*, role, etc.)
  • Icons from lucide-react used consistently

API & Data Fetching

  • TanStack Query used for server state (if applicable)
  • Loading and error states handled
  • API types defined in src/types/api.ts
  • Axios interceptors handle auth tokens correctly
  • Use of Zod for data validations

Error Handling

  • Errors are caught and handled gracefully
  • User-friendly error messages displayed
  • Errors are being toasted properly
  • Network failures handled appropriately

Documentation

  • README.md updated (if setup steps changed)
  • .env.example updated (if new env vars added)
  • CHANGELOG.md updated (if applicable)

Known Limitations / Technical Debt

None. This is a pure UI fix with no functional changes or technical debt introduced.

Additional Notes

  • Build verified: npm run build completes successfully
  • No backend changes required
  • No environment variable changes
  • Mobile view unchanged (uses separate scrollable card layout)

MR Acceptance Checklist

  • Code quality verified
  • UI changes tested across viewports
  • No breaking changes
  • Changelog updated

Merge request reports