hospital-management/inpatients/templates/inpatients/partials/WARD_STATS_DOCUMENTATION.md

Ward Statistics - Dynamic Column Width Implementation

Current Implementation ✅

The ward statistics cards now use responsive Bootstrap column classes for dynamic width adjustment across all screen sizes.

Column Classes Applied

<div class="col-12 col-sm-6 col-md-4 col-lg mb-3">

Responsive Behavior

Screen Size	Bootstrap Breakpoint	Columns per Row	Card Width
Mobile (< 576px)	col-12	1 column	100% width
Tablet (≥ 576px)	col-sm-6	2 columns	50% width
Medium (≥ 768px)	col-md-4	3 columns	~33% width
Large (≥ 992px)	col-lg	5 columns	Equal width (auto)
Extra Large (≥ 1200px)	col-lg	5 columns	Equal width (auto)

How It Works

1. Mobile First: Starts with full width (col-12)
2. Progressive Enhancement: Adds responsive classes for larger screens
3. Equal Distribution: col-lg without a number creates equal-width columns
4. Automatic Wrapping: Cards wrap to new rows when space is limited

Alternative Approaches

Option 1: Fixed Column Distribution (Current - RECOMMENDED)

<div class="col-12 col-sm-6 col-md-4 col-lg mb-3">

Pros:

• Predictable layout across all screen sizes
• Works perfectly with 5 cards
• No custom CSS needed
• Leverages Bootstrap's grid system

Cons:

• Less flexible if card count changes

---

Option 2: Flexbox Equal Width

<div class="col-12 col-sm-6 col-lg mb-3">

Pros:

• Simpler class structure
• Automatically adjusts to any number of cards
• Very flexible

Cons:

• Less control over medium screen layout
• May not look optimal with 5 cards on medium screens

---

Option 3: CSS Grid (Custom Implementation)

<!-- In parent container -->
<div class="row mb-4 stats-grid" id="ward-stats">

.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
}

@media (min-width: 992px) {
    .stats-grid {
        grid-template-columns: repeat(5, 1fr);
    }
}

Pros:

• Most modern and flexible
• Perfect equal widths
• Easy to maintain

Cons:

• Requires custom CSS
• Overrides Bootstrap grid
• May conflict with existing styles

---

Option 4: Dynamic Column Calculation (JavaScript)

// Calculate columns based on card count
const cardCount = document.querySelectorAll('.widget-stats').length;
const colClass = `col-lg-${Math.floor(12 / cardCount)}`;

Pros:

• Automatically adapts to any number of cards
• No manual class updates needed

Cons:

• Requires JavaScript
• More complex
• Overkill for static card count

---

Option 5: Percentage-Based Width (Custom CSS)

.stats-card-wrapper {
    flex: 1 1 calc(20% - 1rem); /* 5 cards = 20% each */
    min-width: 200px;
}

@media (max-width: 991px) {
    .stats-card-wrapper {
        flex: 1 1 calc(33.333% - 1rem); /* 3 cards */
    }
}

@media (max-width: 767px) {
    .stats-card-wrapper {
        flex: 1 1 calc(50% - 1rem); /* 2 cards */
    }
}

@media (max-width: 575px) {
    .stats-card-wrapper {
        flex: 1 1 100%; /* 1 card */
    }
}

Pros:

• Precise control over widths
• Smooth transitions

Cons:

• Requires custom CSS
• More maintenance
• Duplicates Bootstrap functionality

---

Recommendations

For Current Use Case (5 Static Cards)

✅ Use Option 1 (Current Implementation)

• Best balance of simplicity and control
• Leverages Bootstrap's proven grid system
• No custom CSS required
• Predictable behavior

For Dynamic Card Count

Consider Option 3 (CSS Grid) if:

• Card count varies based on permissions/features
• Need perfect equal widths always
• Willing to add custom CSS

For Maximum Flexibility

Consider Option 2 (Flexbox Equal Width) if:

• Card count may change frequently
• Want simplest possible implementation
• Don't need precise control over medium screens

Testing Checklist

• Mobile (< 576px): 1 card per row, full width
• Tablet (576-767px): 2 cards per row, 50% width each
• Medium (768-991px): 3 cards per row, ~33% width each
• Large (≥ 992px): 5 cards per row, equal width
• Cards wrap properly when resizing
• No horizontal overflow
• Consistent spacing between cards
• HTMX auto-refresh maintains layout

Browser Compatibility

All approaches work in:

• ✅ Chrome/Edge (latest)
• ✅ Firefox (latest)
• ✅ Safari (latest)
• ✅ Mobile browsers (iOS Safari, Chrome Mobile)

Performance Notes

• Bootstrap grid classes are highly optimized
• No JavaScript overhead with current implementation
• HTMX partial updates preserve layout
• Minimal CSS footprint