Skip to content

Implement Grid and List View Toggle in Directory UI

UI Issue Summary

Add a view toggle (Grid ↔ List) at the top-right of directory pages to allow users to switch between card layout and horizontal list layout.

Issue Type

  • 🎨 Visual Bug (misalignment, overflow, broken layout)
  • 📱 Responsive Issue (broken on specific viewport)
  • 🌙 Theme/Style Issue (dark mode, colors, typography)
  • ✨ Animation Issue (missing, broken, janky transitions)
  • 🖱️ Interaction Issue (hover, focus, click states)
  • ♿ Accessibility Issue (missing ARIA, keyboard nav)
  • 🎯 UX Improvement (usability enhancement)
  • 📐 Design Implementation Gap (doesn't match design)

Current Behavior

  • All directory pages (Doctors, Staff, Medicines, Camps) are displayed only in grid/card layout
  • No option to switch between layouts
  • Layout is fixed and not user-controlled
  • Difficult to scan large datasets efficiently

Expected Behavior

  • A toggle option should be present at the top-right of the page
  • Users should be able to:
    • Switch from Grid View → List View
    • Switch from List View → Grid View

Grid View (Default)

  • Existing card-based layout
  • Multi-column responsive grid

List View (New)

  • Full-width horizontal rows
  • Compact layout for better readability
  • Content aligned left
  • Actions aligned right

Behavior

  • Default view = Grid
  • Clicking toggle should instantly switch layout
  • Selected view should be highlighted
  • No page reload required

Affected Components

Page/Route Component Issue Description
/doctors DoctorCard No view switching
/staff StaffCard Fixed grid layout
/medicines MedicineCard No list view
/camps CampCard Layout not flexible

Visual Reproduction Steps

  1. Navigate to /doctors (or any directory page)
  2. Observe grid layout
  3. Try to switch layout
  4. No option available

Reproduction Rate: [x] Always [ ] Sometimes [ ] Rarely

Environment

Does the issue occur on:

  • Local development
  • Staging environment
  • Production environment

Test-Driven UI Verification

Visual Test Cases

Test ID Test Description Viewport Browser Expected Visual Result Status (Before) Status (After)
TC-UI-001 Toggle button visible Desktop Chrome Button at top-right ❌ ✅
TC-UI-002 Grid layout renders Desktop Chrome Cards displayed ✅ ✅
TC-UI-003 List layout renders Desktop Chrome Horizontal rows ❌ ✅
TC-UI-004 Toggle switches layout All All Layout updates instantly ❌ ✅
TC-UI-005 Active state visible All All Selected view highlighted ❌ ✅

Visual Regression Test Scenarios

Scenario 1: Toggle View Works

Given user is on directory page
When user clicks "List View"
Then layout should change to horizontal rows
And cards should expand to full width
And actions should align right

Scenario 2: Switch Back to Grid

Given user is in list view
When user clicks "Grid View"
Then layout should change to card grid
And items should display in multiple columns

Accessibility Test Cases

Test ID WCAG Criterion Test Description Expected Result Status
TC-A11Y-001 2.1.1 Keyboard Toggle accessible via keyboard ✅
TC-A11Y-002 2.4.7 Focus Visible Focus visible on toggle buttons ✅

Visual Comparison

Screenshots

Current (Issue) Expected (Design)
Grid only Grid + List toggle

Technical Analysis

CSS/Style Investigation

Suspected CSS Properties:

  • display (grid only used)
  • position
  • width/height
  • margin/padding
  • flexbox (needed for list view)
  • grid properties
  • media queries
  • z-index
  • overflow

Fix Implementation

Files to Modify

File Path Changes Needed CSS/Tailwind Changes
DirectoryPage.tsx Add view state & toggle Conditional layout
Card.tsx Support list view flex layout
Header.tsx Add toggle buttons UI controls

CSS Changes Required

Current CSS:

grid grid-cols-3 gap-6

Proposed CSS:

view === 'grid'
  ? 'grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6'
  : 'flex flex-col gap-4'

Responsive Breakpoints to Fix

Breakpoint Current Behavior Expected Behavior
xs Grid only Grid/List toggle
md Grid Grid/List
lg Grid Grid/List

Fix Verification Checklist

Visual Verification

  • Toggle button visible
  • Grid view unchanged
  • List view implemented
  • Switching works both ways
  • No layout issues

Responsive Verification

Viewport Tested Status Notes
Mobile [ ] ✅/❌
Tablet [ ] ✅/❌
Desktop [ ] ✅/❌

Browser Verification

Browser Tested Status Notes
Chrome [ ] ✅/❌
Firefox [ ] ✅/❌

Accessibility Verification

  • Keyboard navigation works
  • Focus states visible

Performance Verification

  • No layout shift
  • Smooth transition

Additional Context

  • Improves usability for large datasets
  • Standard UI pattern in dashboards
  • Required for better scalability

@ranjithraj as per your suggestion, I have created this issue for implementing the UI

Edited by Damanagari Sathwika